在vue中使用wx-open-launch-weapp(h5转跳小程序), wx-open-subscribe(服务号订阅通知按钮)
在vue中使用wx-open-launch-weapp(h5转跳小程序), wx-open-subscribe(服务号订阅通知按钮)
·
首先:
wx-open-launch-weapp: 是已认证服务号, 小程序为非个人主体
wx-open-subscribe: 是已认证服务号
其次, 你需要判断当前页面是否在微信浏览器中
引用1.6版本的js
**wx.js: 要在main.js中引用此文件**
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId, // 必填,公众号的唯一标识
timestamp, // 必填,生成签名的时间戳
nonceStr, // 必填,生成签名的随机串
signature, // 必填,签名
jsApiList: ['wx-open-launch-weapp', 'wx-open-subscribe'], // 必填,需要使用的JS接口列表,
openTagList: ['wx-open-launch-weapp', 'wx-open-subscribe'],
fail(err) {
console.log('config err', err);
},
});
**main.js**
// 引用此才会在.vue文件中不报错
Vue.config.ignoredElements = ['wx-open-launch-weapp', 'wx-open-subscribe']
**页面.vue**
<template>
<wx-open-launch-weapp
id="launch-btn"
username="跳转的小程序原始id"
:path="小程序的路径"
style="display: inline-block;width: 100%"
>
<script type="text/wxtag-template">
<style>
.mini-btn {
display: inline-block;
width: 100%;
text-align: center;
border-top: 1px solid #f9f9f9;
padding-top: 10px;
color: #333;
font-weight: bold;
}
</style>
<p class="mini-btn">点击授权转跳</p>
</script>
</wx-open-launch-weapp>
<wx-open-subscribe template="这里需要自己服务号对应的templateid" id="subscribe-btn">
<script type="text/wxtag-template" slot="style">
<style>
.subscribe-btn {
color: #333;
background-color: #fff;
width: 100%;
line-height: 30px;
}
</style>
</script>
<script type="text/wxtag-template">
<span class="subscribe-btn">
点击进行消息订阅
</span>
</script>
</wx-open-subscribe>
</template>
更多推荐
已为社区贡献3条内容
所有评论(0)