官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html,必须是认证公众号。
前端安装模块
npm i weixin-js-sdk
main.js 添加一行代码
Vue.config.ignoredElements.push('wx-open-launch-weapp')
前端代码
<template>
<view class="page">
<!-- 样式类的话貌似只能在style的内联样式或行内样式才生效 -->
<wx-open-launch-weapp
id="launch-btn"
username="小程序原始id"
path="小程序路径"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
</view>
</template>
<script>
var wx = require('weixin-js-sdk');
export default {
data() {
return {
}
},
onLoad() {
this.getConfig()
},
methods: {
// wx api 注册
getConfig() {
uni.request({
url:"后端接口地址",
method:'POST',
data:{
url : window.location.href
},
success(res) {
let data = res.data.data
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appid, // 必填,公众号的唯一标识,填自己的!
timestamp: data.timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名,见附录1
jsApiList: ['wx-open-launch-weapp'],
openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填
});
}
})
}
}
}
</script>