微信公众号H5跳转小程序，wx-open-launch-weapp

直接上干货，不多哔哔~~

注意事项：

需要再公众号里面绑定需要跳转的小程序

获取jssdk配置的时候需要再公众平台绑定安全域名

微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android5.0及以上。

如若需要在微信的wx-open-launch-weapp添加img标签，img的路径需要为base64或者远程地址，不能为本地的静态地址

1、引入微信JSSDK文件

引用地址：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js

注意：如果版本过低，可能导致wx-open-launch-weapp 标签会无法使用

2、注入微信接口验证，申请开放标签

在这之前可以先看下微信提供的官方文档静态网站 H5 跳小程序 | 微信开放文档，其中对于appid的定义是跳转小程序的appid。但是你别信，我就中了这个毒，按钮一直加载不出来。

fetch().then((res) => {
	let urlN = window.location.href.split('#')[0];
	let timestampn = new Date().getTime().toString();
	let timestamp = timestampn.substring(0, 10);			//生成签名的时间戳
	let nonceStr = Math.random().toString(36).substr(2);	//生成签名的随机串
	let con = `jsapi_ticket=${res.content.ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${urlN}`
	let signature = hex_sha1(con);		//签名
	wx.config({
		debug: false, // 调试时可开启
		appId: res.content.appid, // <!-- replace -->
		timestamp: timestamp, // 必填，填任意数字即可
		nonceStr: nonceStr, // 必填，填任意非空字符串即可
		signature: signature, // 必填，填任意非空字符串即可
		jsApiList: ['chooseImage'], // 必填，随意一个接口即可
		openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名wx-open-launch-weapp
	})
	wx.ready(function() {
		vm.entryVisiable = false;
		vm.$nextTick(() => {
			try {
				var btn = document.getElementById('launch-btn');
				btn.addEventListener('launch', function(e) {
					console.log('success');
					console.log(e);
				});
				btn.addEventListener('error', function(e) {
					console.log('fail', e);
				})
			} catch (error) {

			}
		})
	});
	wx.error(function(err) {
		vm.$toast(err.errMsg);
	});
})

fetch是后端接口用于获取公众号appid的，及ticket;

hex_sha1()方法是签名加密方法在我之前的博客中有提到；

3、index.vue页面

注意点：

username是需要跳转小程序的原始id，以gh_开头
path是需要跳转的微信小程序的路径，需要在路径后边添加.html。否则跳转不过去
Vue框架需要把template标签转换成script标签，避免和Vue本身的template标签混合报错

<wx-open-launch-weapp id="launch-btn" username="gh_c68673c8e45f" path="pages/index/index.html">
	<script type="text/wxtag-template">
		<style>
			.label-car_button { color: #333;font-size: 14px;font-weight: 500;font-family: "PingFang SC"; margin: 0;text-align: center;}
			.label-car_img { vertical-align: middle; width: 63px;}
		    .label_box { position: relative;}
		</style>
		<div class="label_box">
				<img class="label-car_img" src="xxx/static/wxAppImg/claim-entry-2.png"/>
				<p class="label-car_button">车险</p>
		</div>
	</script>
</wx-open-launch-weapp>

4、控制台报错

如果发现以下错误

扫描二维码关注公众号，回复： 15052700 查看本文章

[Vue warn]: Unknown custom element: <wx-open-launch-weapp> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

请在Vue文件入口处即main.js中添加：

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

5、如果需要在wx-open-launch-weapp标签中添加动态图片

我的办法是写成了绝对路径；

看了多个博客的内容：

使用小程序的语法

<img src="{
   
   { icon.image }}" />

使用js单双引号包裹变量

<img src='" + window.location.origin + " /static/img/img1.png' />

这俩种没实现我要的效果，图片没有加载出来。

还有像我文章开头说得提供base64感觉和我的绝对路径一个意思，大家可以试一试。

如果有这方面的实现方法，请不吝赐教~~