公眾號h5功能 · 微酷信小程序v4.3教程

<div class="workspace"><div class="article"><div class="article-head"><div class="left tools"><a class="item icon"><i class="icon align justify"></i></a></div><h1>公眾號h5功能</h1><div class="right tools"><div role="listbox" aria-expanded="false" class="ui top right pointing dropdown item" tabindex="0"><div class="text" role="alert" aria-live="polite"></div><i aria-hidden="true" class="share alternate icon"></i><div class="menu transition"><div role="option" class="item"><i aria-hidden="true" class="linkify icon"></i><span class="text">復制鏈接</span></div><div role="option" class="item"><i aria-hidden="true" class="qq icon"></i><span class="text">騰訊QQ</span></div><div role="option" class="item"><i aria-hidden="true" class="weibo icon"></i><span class="text">新浪微博</span></div><div class="header"><p><i class="icon wechat"></i><span class="text">微信掃一掃</span></p><img src="https://bshare.optimix.cn/barCode?site=weixin&url=https%3A%2F%2Fwww.hmoore.net%2Fwangcwei%2Fv4-2%2Fcontent%2F%25E5%2585%25AC%25E4%25BC%2597%25E5%258F%25B7h5%25E5%258A%259F%25E8%2583%25BD.md"></div></div></div></div></div><div class="article-body kancloud-markdown-body"><div class="markdown-toc"><ul><ul><li><a href="#1_4">1.用戶中心自定義</a></li><li><a href="#2DIY_10">2.DIY首頁自定義</a></li><li><a href="#3_16">3.支付管理單獨設置</a></li><ul><li><a href="#1_20">1.微信小程序的支付設置</a></li><li><a href="#2_25">2.公眾號微信支付配置</a></li><li><a href="#3_36">3.公眾號支付寶支付配置</a></li><li><a href="#4h5_54">4.h5配置微信支付</a></li><li><a href="#5h5_61">5.h5支付寶支付配置</a></li></ul><li><a href="#4_81">4.公眾號配置：</a></li><ul><li><a href="#1_88">1非開放平臺授權模式；</a></li><li><a href="#2_94">2.開放平臺授權模式</a></li></ul></ul></ul></div><p>需要更新到4.3.76以上的版本才能使用，插件也必須更新，后續商城每次更新，公眾號跟h5那邊要點下發布才會顯示最新內容</p> <h2><a id="1_4"></a>1.用戶中心自定義</h2> <p>多個端可以設置不同的用戶中心<br><img src="https://img.kancloud.cn/bd/06/bd06f8c717c0883893f3997beb8bceeb_1910x687.png" alt=""><br><img src="https://img.kancloud.cn/81/30/81304438eb80d91d805d416e12786302_816x622.png" alt=""></p> <h2><a id="2DIY_10"></a>2.DIY首頁自定義</h2> <p>需要有DIY插件<br> 多個端可以設置不同的DIY首頁<br><img src="https://img.kancloud.cn/94/68/9468e9f62bc5256db08ac800d0d21499_1802x662.png" alt=""><br><img src="https://img.kancloud.cn/c1/6a/c16a916e03fad742486ee25da12d43b3_765x614.png" alt=""></p> <h2><a id="3_16"></a>3.支付管理單獨設置</h2> <p>需要先配置好支付方式，然后再支付設置那邊選擇配置的支付方式，注意，小程序的微信支付配置跟公眾號的不一樣，填的appid是各自的appid，h5微信支付填寫的也是服務號的appid；<br><img src="https://img.kancloud.cn/70/f9/70f95e50c0cdae95d7dbe21bc009ac05_1902x800.png" alt=""><br><img src="https://img.kancloud.cn/cd/77/cd778ccf4dd021b9df42524c7e75fdaa_1764x865.png" alt=""></p> <h3><a id="1_20"></a>1.微信小程序的支付設置</h3> <p><img src="https://img.kancloud.cn/a7/f3/a7f3f12358fa17e9128dc87197a588fb_1103x851.png" alt=""><br> 服務商配置<br><a href="http://www.hmoore.net/wangcwei/v4-2/1829023" target="_blank">http://www.hmoore.net/wangcwei/v4-2/1829023</a></p> <h3><a id="2_25"></a>2.公眾號微信支付配置</h3> <p>需要開通jsapi支付并且配置支付授權目錄<br> 支付授權目錄需要具體到某個商城<br> 獨立版：<a href="https://xn--eqrt2g/plugins/wechat/h5/mall/1/" target="_blank">https://域名/plugins/wechat/h5/mall/1/</a><br> 最后那個1是商城id 獨立版從管理后臺--商城列表拿商城id<br> 微擎版：<a href="https://xn--eqrt2g/addons/zjhj_bd/plugins/wechat/we_h5/mall/1/" target="_blank">https://域名/addons/zjhj_bd/plugins/wechat/we_h5/mall/1/</a><br> 最后那個1是商城id 微擎版登陸總賬戶從商城后臺--小程序管理列表拿商城id<br><img src="https://img.kancloud.cn/57/cf/57cfd2296854f34692ae83d7cf6ef26e_1404x672.png" alt=""><br><img src="https://img.kancloud.cn/6a/eb/6aeb98531a3cbb3c1fac5368d2b0dcd0_1289x628.png" alt=""><br><img src="https://img.kancloud.cn/59/b6/59b6aac634672d18eb165ed165e7f1f5_1020x815.png" alt=""></p> <h3><a id="3_36"></a>3.公眾號支付寶支付配置</h3> <p><strong>1: 登錄到支付寶開放平臺，并創建網頁應用</strong><br><img src="https://img.kancloud.cn/c2/2b/c22b81db09ac8591a7e0d424a2e709af_1090x413.png" alt=""><br><strong>2.簽約手機網站支付能力</strong><br><img src="https://img.kancloud.cn/db/2e/db2e0dd70bb75bd954cc66d9b308979d_1562x127.png" alt=""><br><strong>3:設置接口加密方式</strong><br><img src="https://img.kancloud.cn/b9/84/b984fd30a27fd0b2f7d33fe60d282d33_965x331.png" alt=""><br><strong>4：必須選擇公鑰證書下載支付寶密鑰生成器</strong><br><img src="https://img.kancloud.cn/15/80/1580ca5309bfe4f4b82dd687ca7d8832_688x437.png" alt=""><br><strong>5：打開支付寶密鑰生成器選擇PKCS1(非JAVA使用) - 生成密鑰- 點擊獲取 -打開文件位置并上傳CSR文件在線生成證書</strong><br><img src="https://img.kancloud.cn/11/e8/11e88bc53233cae11175b88df75fbbfa_1080x780.png" alt=""><br> 注：請妥善保存好商戶<strong>應用私鑰</strong><br><img src="https://img.kancloud.cn/85/c3/85c3640b8ff47c7875d20392afb26d44_800x700.png" alt=""><br> 注：組織/公司必須和公司主體名稱保持一致。<br><strong>6：獲取證書并填入后臺</strong><br><img src="https://img.kancloud.cn/17/88/1788c3d501f7a31bb402c97f193137d8_701x307.png" alt=""><br><img src="https://img.kancloud.cn/9d/46/9d460c4083a47b5a721e602a5adbea96_1143x881.png" alt=""></p> <h3><a id="4h5_54"></a>4.h5配置微信支付</h3> <p>需要開通商戶平臺h5支付<br> 并且將域名配置進去，注意，添加頂級域名就行<br><img src="https://img.kancloud.cn/c4/e8/c4e83c00991970028147999e4146310b_1439x708.png" alt=""><br><img src="https://img.kancloud.cn/b3/28/b328a0b1ac5d34efe2a36272ccf51fce_1055x360.png" alt=""><br><img src="https://img.kancloud.cn/59/b6/59b6aac634672d18eb165ed165e7f1f5_1020x815.png" alt=""></p> <h3><a id="5h5_61"></a>5.h5支付寶支付配置</h3> <p><strong>1: 登錄到支付寶開放平臺，并創建網頁應用</strong><br><img src="https://img.kancloud.cn/c2/2b/c22b81db09ac8591a7e0d424a2e709af_1090x413.png" alt=""><br><strong>2.簽約手機網站支付能力</strong><br><img src="https://img.kancloud.cn/db/2e/db2e0dd70bb75bd954cc66d9b308979d_1562x127.png" alt=""><br><strong>3:設置接口加密方式</strong><br><img src="https://img.kancloud.cn/b9/84/b984fd30a27fd0b2f7d33fe60d282d33_965x331.png" alt=""><br><strong>4：必須選擇公鑰證書下載支付寶密鑰生成器</strong><br><img src="https://img.kancloud.cn/15/80/1580ca5309bfe4f4b82dd687ca7d8832_688x437.png" alt=""><br><strong>5：打開支付寶密鑰生成器選擇PKCS1(非JAVA使用) - 生成密鑰- 點擊獲取 -打開文件位置并上傳CSR文件在線生成證書</strong><br><img src="https://img.kancloud.cn/11/e8/11e88bc53233cae11175b88df75fbbfa_1080x780.png" alt=""><br> 注：請妥善保存好商戶<strong>應用私鑰</strong><br><img src="https://img.kancloud.cn/85/c3/85c3640b8ff47c7875d20392afb26d44_800x700.png" alt=""><br> 注：組織/公司必須和公司主體名稱保持一致。<br><strong>6：獲取證書并填入后臺</strong><br><img src="https://img.kancloud.cn/17/88/1788c3d501f7a31bb402c97f193137d8_701x307.png" alt=""><br><img src="https://img.kancloud.cn/9d/46/9d460c4083a47b5a721e602a5adbea96_1143x881.png" alt=""></p> <hr> <hr> <h2><a id="4_81"></a>4.公眾號配置：</h2> <p>注意:建議公眾號跟小程序同主體并且綁定同一個開放平臺，這樣數據可以互通<br> 注意需要配置js安全域名，網頁授權域名，業務域名,ip白名單<br><img src="https://img.kancloud.cn/18/04/18043b8658c0e1b64e3c7fa22146f8aa_756x667.png" alt=""></p> <p>先購買安裝號公眾號插件<br><img src="https://img.kancloud.cn/e7/e7/e7e7d97c9fbd74fa84e452d86da99cf6_1847x720.png" alt=""></p> <h3><a id="1_88"></a>1非開放平臺授權模式；</h3> <p>填寫公眾號的appid，密鑰等參數<br> 然后自定義添加圖標，名稱，跟關注二維碼<br> 之后哦點擊發布版本，就可以打開使用</p> <h3><a id="2_94"></a>2.開放平臺授權模式</h3> <p>需要綁定微信開放平臺添加公眾號權限<br><img src="https://img.kancloud.cn/8b/a6/8ba60c00a375f8336aa41e98f95f8d70_1385x654.png" alt=""><br><img src="https://img.kancloud.cn/fd/3f/fd3f3e9e49fa7251f40f8cebe1f98cc9_1354x576.png" alt=""></p> <p>如果用到了小程序相關權限需要勾選<br><img src="https://img.kancloud.cn/f3/37/f3371baf402abb505ae67e1855aae3b0_1326x597.png" alt=""><br><img src="https://img.kancloud.cn/cd/d6/cdd655889991826c145735d09517faf0_1343x605.png" alt=""><br> 添加域名<br><img src="https://img.kancloud.cn/91/c9/91c9387786b99baba560eeeea3f812c5_1083x249.png" alt=""><br> 全網發布之后可以用公眾號管理員掃碼授權<br><img src="https://img.kancloud.cn/be/3e/be3e05a5fe62ecc22b5c4d8352914ca9_853x792.png" alt=""></p> </div><div class="article-navigation"><span class="prev">上一篇：<a href="2021079">生成視頻號鏈接</a></span><span class="next">下一篇：<a href="2111564">收銀臺功能</a></span></div><div class="article-foot"></div></div></div>