使用<wx-open-launch-weapp>
小程序开放标签
·
H5跳转小程序按钮
一、微信授权后注册config
// 使用微信公众号SDK,开始签名,签名信息在result.signature中
// 发起签名注册,是一个异步操作,成功会触发wx.ready
wx.config({
appId: wechatAppId, // 微信公众号appid
timestamp: res.signature.timestamp + '', // 时间戳,从返回result.signature中获取
nonceStr: res.signature.nonceStr, // 随机字符串,从返回result.signature中获取
signature: res.signature.signature, // 签名,从返回result.signature中获取
jsApiList: [], // 注册的api列表
openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
})
二、在Vue3中使用
<!-- VUE3 -->
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxx"
style="display: inline-block; width: 100%"
>
<div v-is="'script'" type="text/wxtag-template">
<div v-is="'style'">
.mini-btn { display: inline-block; width: 120px;height:40px;line-height: 40px; text-align: center; font-weight: bold; background:
#0d828e; color:#fff; border-radius: 10px; font-size: 15px; }
</div>
<button class="mini-btn">
前往小程序
</button>
</div>
</wx-open-launch-weapp>
三、在Vue2中使用
<!-- VUE2 -->
<div style="position:relative; height: 22px;width: 70px;">
<!-- 做一个假按钮,使用定位z-index -->
<div style="
position: absolute;
top: 0;
left: 0;
width: 100%;
color: #fff;
font-size: 14px;
height: 22px;
">
前往{{ item.btn_txt }}
</div>
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" :path="/pages/index/index" style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 22px;
z-index: 10;
">
<script type="text/wxtag-template">
<style>
.mini-btn {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 50%;
transform: translate(-50%);
background: transparent;
border: none;
border-radius: 0.25rem;
z-index: 99
}
</style>
<button class="mini-btn"> </button>
</script>
</wx-open-launch-weapp>
</div>
username: 原始ID
path: 即将跳转的小程序页面
更多推荐
已为社区贡献1条内容
所有评论(0)