亲测有效
<div class="launch-weapp-box">
<wx-open-launch-weapp
id="launch-btn"
username="跳转小程序原始id" //gh_ 开头
path="跳转地址" //不带参 '/pages/index/index.html' //带参 '/pages/project/project?id=1&name=lll'
@launch="onLaunch"
@error="onError"
>
<script type="text/wxtag-template">
<style>
.btn{
width:100%;
height:0.41rem;
color: red;
}
</style>
<button class="btn">跳转小程序</button>
</script>
</wx-open-launch-weapp>
</div>
<style>
#launch-btn{
width:686px;
height:98px;
margin:0 0.15rem;
}
</style>
created() {
this.gowxopenapp();
window.document.title = 'wxopen';
},
methods: {
onLaunch(e) {
console.log(e);
},
onError(e) {
console.log("fail", e);
},
gowxopenapp({ //getJump是请求接口
url: "当前页面的url" //或则接口名 根据后台定
}).then(res => {
var {appId,timestamp,nonceStr,signature}= res.data;
wx.config({
debug: false, //是否开启debug
appId, //必填,公众号的唯一标识
timestamp, // 必填,生成签名的时间戳
nonceStr, // 必填,生成签名的随机串
signature,// 必填,签名
jsApiList: ['chooseImage', 'previewImage'], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'],// 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
wx.ready(() => {
console.log("ready");
//config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
});
wx.error(res => {
console.info("开始error", res);
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
});
});
}
引入和挂载
//index.html
<script type=text/javascript src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
注意事项
index.html页面中不要引入http-equiv=“Content-Security-Policy”,会导致安卓不显示
//mian,js
Vue.config.ignoredElements = ['wx-open-launch-weapp']