vue项目中微信h5页面跳转到小程序 wx-open-launch-weapp
先放上微信官方文档:微信官方文档1、先请求接口配置微信需要的一些参数// 需要先请求后端接口let url = window.location.href.split("#")[0];let shareConfig = await shareViewAPI.getWechatConfig({url});let _this = this;// 将接口返回的信息配置wx.config({debug: f
·
先放上微信官方文档:微信官方文档
1、先请求接口配置微信需要的一些参数
// 需要先请求后端接口
let url = window.location.href.split("#")[0];
let shareConfig = await shareViewAPI.getWechatConfig({url});
let _this = this;
// 将接口返回的信息配置
wx.config({
debug: false,
appId: _this.app_id, // 必填,公众号的唯一标识
timestamp: shareConfig.timestamp, // 必填,生成签名的时间戳
nonceStr: shareConfig.nonceStr, // 必填,生成签名的随机串
signature: shareConfig.signature, // 必填,签名
jsApiList: ["onMenuShareAppMessage"], // 必填,如果只是为了跳转小程序,随便填个值都行
openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填
});
配置的方法需要放到created、mounted或者beforeRouteEnter里
2、在页面中添加wx-open-launch-weapp标签
<!-- 关于username 与 path的值 参考官方文档 -->
<wx-open-launch-weapp
id="launch-btn"
username="gh_***"
path="/pages/index/index.html"
@error="handleErrorFn"
@launch="handleLaunchFn"
>
<!-- vue中需要使用script标签代替template插槽 html中使用template -->
<script type="text/wxtag-template">
<p class="store-tool_tip">点击进入选基工具</p>
</script>
</wx-open-launch-weapp>
methods: {
handleLaunchFn(e) {
console.log("success", e);
},
handleErrorFn(e) {
console.log("fail", e.detail);
}
}
3、好啦
备注:
使用该标签的时候可能会报错,在main.js文件中添加上该行代码即可
// 忽略打开微信小程序的组件
Vue.config.ignoredElements = ['wx-open-launch-weapp']
更多推荐
已为社区贡献1条内容
所有评论(0)