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

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