直接上干货，不多哔哔~~
注意事项 ：
- 需要再公众号里面绑定需要跳转的小程序
- 获取
jssdk配置的时候需要再公众平台绑定安全域名- 微信版本要求为：7.0.12及以上。 系统版本要求为：
iOS10.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}×tamp=${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、控制台报错
如果发现以下错误
[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感觉和我的绝对路径一个意思，大家可以试一试。文章来源：https://www.toymoban.com/news/detail-431528.html
如果有这方面的实现方法，请不吝赐教~~文章来源地址https://www.toymoban.com/news/detail-431528.html
到了这里，关于微信公众号H5跳转小程序，wx-open-launch-weapp的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
