使用＜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： 即将跳转的小程序页面