h5页面唤起微信小程序（vue）

腾讯文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

前提
请确保小程序是已认证的非个人主体的小程序，或者已认证的服务号 ·
“JS接口安全域名” 已经绑定（登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”）

1、安装weixin-js-sdk 版本要求1.6.0

npm install weixin-js-sdk或<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

2、在main.js文件中添加

Vue.config.ignoredElements = ['wx-open-launch-weapp']

3、vue 代码如下

// div
<div id="launch-btn"><wx-open-launch-weappid="launch-btn"username="gh_XXX":path="mpPath"@error="handleErrorFn"@launch="handleLaunchFn"><script type="text/wxtag-template"><button class="test-btn">去支付</button><style>.test-btn{width:100%;background: #f24f45;border-radius: 20px;padding:0 10px;color:#fff;font-size:16px;border:none;}</style></script></wx-open-launch-weapp></div>async mounted() {this.mpPath = 'page2/pages/gasStation/wxCodePay/wxCodePay.html?token=' + this.$cookieOption.getCookie("boToken");await this.wxmini();
},// 方法
wxmini() {// 获取密钥let url = location.href.split('#')[0]; // vue的hash模式带#，要去掉，此处是个坑，要注意this.$api.get(WECHAT_JS_SDK + "?url=" + location.href.split('#')[0],null,(res) => {if (res.status == 10000) {wx.config({debug: true,appId: res.data.appId,  // 公众号appId，非小程序appId，此处是个坑，要注意timestamp: res.data.timestamp,nonceStr: res.data.nonceStr,signature: res.data.signature,jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'checkJsApi', 'scanQRCode','chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表})wx.ready(function () {console.log("ready")})wx.error(function (res) {console.log("err", res)})} else if (+success.status === 90000) {this.$toast(success.info);handleUnLoginRedirect();} else {this.$toast(success.info);}});},handleErrorFn(e) {console.log("fail", e.detail)},handleLaunchFn(e) {console.log("success")},

期间遇到的问题：1、按照官网文档步骤下来后发现按钮无法显示；

　　　　　　　　2、按钮显示后，无法跳转微信小程序。

解决问题：

1、咱们先来看看微信的官方文档怎么说（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html），首先，与咱们的微信版本和手机版本有关系，标准如下，如果这个没有符合要求，就先升级一下吧。　　　　　　　

微信版本要求为：7.0.12及以上
系统版本要求为：iOS 10.3及以上、Android 5.0及以上

2、按照文档的要求，在与微信小程序绑定的微信公众号里面去设置好“JS接口安全域名”。

　这里需要注意的点是：a、与微信小程序绑定的微信公众号必须为已认证的服务号，服务号与订阅号最快的辨别方式是，服务号是直接出现在微信聊天窗口的（就像是我和爸爸的聊天一样），订阅号是由微信里面的一个订阅号进去里面有很多很多的微信公众号。这里官方有提供一个“接口测试号申请”（https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login），这里的测试号是订阅号，也是导致我后面按钮没有出现的原因之一。

　　b、“JS接口安全域名”，这个让专门管理微信公众号的同仁帮忙设置，安全域名例如：home.cnblogs.com，而不是https://home.cnblogs.com/u/jiangdanan/；

　　3、在h5页面中通过config接口注入权限验证配置并申请所需开放标签，这有一个点后台唬我，说是“timestamp”，“nonceStr”，“signature”让我自己去请求接口都一样的，这里一定要后台请求接口返回给自己，就请求不到access_token等，我这里是等了服务端然后通过接口去请求，然后自己手动生成的签名测试的。权限签名算法可查看官网文档（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62），如果和我一样是自己去手动请求要生成签名可以使用这个“微信JS接口签名校验工具”（https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign），输入“时间戳”，“通过接口获得到的jsapi_ticket”，“随机字符串”，“需要跳转的链接”，就可以生成签名。

4、要在真机即手机中才能看到效果

相关报错

1、config:invalid signature签名报错的原因检测

第一点：确认签名算法正确，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验；
第二点：确认config中nonceStr(js中驼峰标准大写S)，timestamp与用与签名中的对应noncestr，timestamp一致；

第三点：确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。

比如：如果是"http://x.com/jspay?oid=0&attr=1#wechat"的形式，那么应该保留的是"http://x.com/jspay?oid=0&attr=1"。

第四点：确保你获取用户来签名的url是动态获取的，动态页面可参见实例代码中PHP的实现方式，如果是html的静态页面在前端通过ajax讲url传到后台签名，前端需要js获取当前页面出去‘#’hash部分的链接（可用location.href.split('#')[0]获取，而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是胴体啊获取当前链接，讲导致分享后的页面签名失败。

第五点：url在php中用$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]拼装，

第六点：确认config中的appid与用来获取jsapi_ticket的appid一致；

第七点：确保一定缓存access_token和jsapi_ticket；

2、errMsg:config:invalid url domain

公众号设置==》功能设置==》JS接口安全域名中填写域名

ps 自己遇到的一个极其另类的问题，有的页面能显示按钮，有的页面不能显示

描述背景，项目使用vue微服务分包多页面，按钮未显示的页面是按钮放在组件里

分析过程：幸好一开始调试的页面是可以显示的，将可以显示的页面的代码复制到其他页面，发现其他页面不显示，说明不是页面代码的原因，在配置相同的情况下，说明参数配置正确的，最后将问题定位在html引用的js中，发现html中引入了百度的SDK导致的

处理结果：由于该包引用了微信的SDK，又引用了百度地图的SDK，如果先加载百度地图的后加载腾讯的就会出错，换了顺序就好了，这真是个大坑啊，花了两天的时间才发现

ps 又遇到了一个奇葩的问题，按钮所在的页面首次进来不显示按钮（因为我的是动态加载的），一定要手动刷新一次才出来，虽然不知道是什么原因，可能是微信SDK异步的原因，但是问题需要解决，于是做了两步操作
第一，使用v-show代替v-if
第二，首次进入重载页面，并记录缓存，下次就不用重刷了

html 段代码
<div id="launch-btn" class="manual-btn" v-show="isShowWxMpBtn"><wx-open-launch-weappid="launch-btn"username="gh_9aa0f574d809":path="mpPath"@error="handleErrorFn"@launch="handleLaunchFn"><script type="text/wxtag-template"><button class="test-btn">去支付</button><style>.test-btn{width: 345px;height: 50px;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 18px;background-image: linear-gradient(138deg, #55bfd7, #148cfd 100%);box-shadow: 0 2px 8px 0 rgba(31,34,58,0.19);text-align: center;border-radius: 5px;border: none;}</style></script></wx-open-launch-weapp></div><div class="manual-btn" @click="nextStep" v-show="!isShowWxMpBtn">去支付</div>computed: {// 是否显示微信小程序付款按钮isShowWxMpBtn () {return this.isWechatBrowser && this.selectPayMethod && this.selectPayMethod == 'wechat' ? true : false;},},created () {var ua = window.navigator.userAgent.toLowerCase();// 微信浏览器环境 使用小程序付款码if(ua.match(/MicroMessenger/i) == 'micromessenger'){this.isWechatBrowser = true;this.mpPath = 'page2/pages/gasStation/wxCodePay/wxCodePay.html?token=' + this.$cookieOption.getCookie("boToken");// 针对首次进入用户刷新页面 解决按钮不出来的问题if(!localStorage.getItem('reload_wx_pay') || localStorage.getItem('reload_wx_pay') != 'Y'){localStorage.setItem('reload_wx_pay', 'Y');window.location.reload();}}},

h5页面唤起微信小程序（vue）相关推荐

小程序接入h5页面_微信小程序跳转外部链接（h5页面）以及数据交互
最近项目有个需求,在微信小程序中跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面. 1.跳转外部链接(官方文档) 1)入口 //跳转到入口 wx.navigateTo({url: '.. ...
微信小程序嵌套h5页面+发布微信小程序（超级简单）
将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!!! 使用到的技术为uniapp和web-view 首先,我们先来了解一下web-view是什么: 简单的一句话来讲:web-view 是 ...
小程序嵌套h5页面_微信小程序内嵌h5页面
概况使用标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的.如果开发工具上勾选了'不校验域名',在开发 ...
微信小程序webview(H5页面)调用微信小程序支付
1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...
小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...
Uni-app的webview，H5页面在微信小程序中webview再跳回小程序的解决方案
场景: 微信小程序:uni-app开发 H5:uni-app开发小程序其中一个场景需要使用webview嵌入H5,待H5里的业务处理完成再跳转回小程序遇到的问题: webview无法跳转回小程序, ...
微信H5页面跳转小程序 - Vue中使用微信开放标签＜wx-open-launch-weapp＞
微信开放标签说明文档使用微信开放标签前置条件 1.绑定域名登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名" 2 ...
小程序接入h5页面_微信小程序开发接入colorUI
本文接前天的小程序开发第一篇文章,上篇文章完成了微信官方提供的小程序初始模板代码的构建,今天这篇文章主要讲解小程序使用colorUI框架,并构建一个简单的页面. 前注: 1.本文代码基于第一篇文章的基 ...
uniapp H5页面嵌入微信小程序 ios 下 video组件播放视频设置 border-radius overflow:hidden 不生效
在ios 系统中, 设置border-radius 可能会不生效(安卓有效),直接给要设置的元素设置 border-radius属性,再添加下面的代码即可实现功能: -webkit-backface- ...

h5页面唤起微信小程序（vue）

h5页面唤起微信小程序（vue）相关推荐

最新文章

热门文章