微信|微信公众号H5跳转小程序，wx-open-launch-weapp vue.js|h5

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

注意事项：

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

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

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

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

1、引入微信JSSDK文件
【微信|微信公众号H5跳转小程序，wx-open-launch-weapp】引用地址：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}×tamp=${timestamp}&url=${urlN}` let signature = hex_sha1(con); //签名 wx.config({ debug: false, // 调试时可开启 appId: res.content.appid, // 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); }); })