公众号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.kancloud.cn%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="https://www.kancloud.cn/wangcwei/v4-2/1829023" target="_blank">https://www.kancloud.cn/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>