微信公众号H5利用JS-SDK中的开放标签wx-open-launch-weapp跳转第三方小程序

未知 02-07 6629

场景：在微信公众号的h5页面中有这样一个需求，需要跳转到第三方小程序，我这里主要记录一下使用JS-SDK中的开放标签wx-open-launch-weapp来实现跳转，以及我在需求中遇到的一些问题，以及怎么解决的。我是使用的HBuilder写的h5公众号

1、要使用JS-SDK里面的东西需要安装依赖?jweixin-module

npm i jweixin-module --save

2、通过 config 配置权限并申请所需开放标签，新建文件jssdk.js

import jweixin from 'jweixin-module' export default { initJssdk: function() { //获取当前url然后传递给后台获取授权和签名信息这里需要使用encodeURIComponent加密 let url = encodeURIComponent(location.href.split('#')[0]) console.info("url",url) //发送请求获取相关配置信息 request({ url: ``,//后端的请求地址 param:{ url, }, method: '',//请求方式 success: res => { jweixin.config({ debug: false, // 调试时可开启,可以看到js-sdk返回的信息 appId, // appId timestamp: res.data.timestamp, // 必填，生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填，生成签名的随机串 signature: res.data.signature, //必填，签名 jsApiList: ['chooseImage','previewImage'], // 必填，随意一个接口即可 openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名wx-open-launch-weapp }) } }); }, //如果要使用到其它的api也可以添加到该文件中 }

3、在main.js中将jssdk.js中的方法挂载在vue原型上

import jwx from '@/common/js/jssdk.js' Vue.prototype.$jwx=jwx

4、在需要使用标签的vue文件的created生命周期中调用初始化的方法

created() { this.$jwx.initJssdk() }

5、在该页面使用

<wx-open-launch-weapp id="launch-btn" username="" path="" > <script type="text/wxtag-template"> <style> .itemBtn{ padding: 5px 0; display: flex; flex-direction: column; align-items: center; } .prize-img{ width: 32px; height: 32px; border-radius: 32px; } .text{ font-size: 12px; color: #c31362; margin-top: 5px; white-space: nowrap; } </style> <div class='itemBtn'> <div class="prize-img"> <img src="{{ tft.tftphoto}}" class="prize-img"> </div> <div class="text">{{tft.text}}</div> </div> </script> </wx-open-launch-weapp>

注意标签中绑定vue页面中数据的方式

data(){ return { tft:{ tftphoto:'https://.....',//注意这里要使用图片的网络绝对地址，不然找不到图片 text:'XXX' }, } }

总结在这里面遇到的问题：

? ? ? ? 1、这个一定要使用真机测试，才能看到效果，不管是在浏览器端还是在微信开发者工具中都是看不到效果的。

? ? ? ? 2、在浏览器中打开报错Unknown custom element: \<wx-open-launch-weapp> - did you register the component correctly。在maim.js中添加下面这一行代码

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

? ? ? ? 3、前端给的url一定是#之前的部分动态获取，包括参数部分，并且要使用?encodeURIComponent包裹。

? ? ? ? 4、确保前端传递的url正确的情况下，报错{realAuthUrl: "[https://xxx, https://xxx]", errMsg: "config:invalid signature"}无效的签名，需要后端接收到url还原为原本的url格式进行请求微信接口

? ? ? ? 5、如果在标签中使用到了图片，要使用图片的网络地址