一,绑定公众号
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
二,跳转小程序
- 属性
小程序原始id:gh_*********
path:pages/picBook/picBook.html?params
params说明:第一步[[1]][auth]生成的验签信息,例如 appid=lz20201116&phone=13100000000*
- 用例
<wx-open-launch-weapp
id="launch-btn"
username="gh_*******"
path="pages/home/picBook.html?appid=lz1235678&phone=17700000000&time=1605512282&encryption=MD5&token=5675f9054bbf6d32903d64637ba5405e">
<template>
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script>
三,权限验证配置
- H5页面引入微信wx-jsdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
或者
npm install weixin-js-sdk
var wx = require("weixin-js-sdk");
- H5页面config注入
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来, 若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [], // 必填,需要使用的JS接口列表
openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
- 完整用例(需线上环境真机测试)
<template>
<div>
<wx-open-launch-weapp
id="launch-btn"
username="gh_**********"
path="pages/picBook/picBook.html?appid=appid&time=time&user=user&encryption=encryption&phone=phone&token=token"
>
<script type="text/wxtag-template">
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
</div>
</template>
<script>
var wx = require('weixin-js-sdk');
export default {
data() {
return {};
},
created() {
var hrefUrl = window.location.href;
this.$http
.get("后台接口获取签名的时间戳、签名的随机串、签名")
.then((res) => {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: "", // 必填,公众号的唯一标识
timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.data.noncestr, // 必填,生成签名的随机串
signature: res.data.data.signature, // 必填,签名
jsApiList: ["onMenuShareAppMessage"], // 必填,需要使用的JS接口列表
openTagList: ["wx-open-launch-weapp"], // 可选,需要使用的开放标签列表,例如['wx-open-launch-weapp']
});
let _this = this;
wx.ready(function (res) {
console.log(res);
});
wx.error(function (res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
console.log('err:'+res);
});
})
.catch((error) => {});
},
mounted() {
var btn = document.getElementById("launch-btn");
btn.addEventListener("launch", function (e) {
console.log("success");
});
btn.addEventListener("error", function (e) {
alert("小程序打开失败");
console.log("fail", e.detail);
});
},
};
</script>