场景:在微信公众号的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、如果在标签中使用到了图片,要使用图片的网络地址