微信瀏覽器里面h5跳轉(zhuǎn)小程序

注意事項(xiàng),以vue框架為例

一、獲取jssdk配置，在wx.ready回調(diào)函數(shù)里面展示按鈕

wx.config({
      debug: false, 
      appId: data.appId, 
      timestamp: data.timestamp, 
      nonceStr: data.nonceStr, 
      signature: data.signature,
      //這里必須填一個(gè)不能為空數(shù)組
      jsApiList: ['chooseImage'],
      //這里注意需要填“wx-open-launch-weapp”，官方文檔上是填的“wx-open-launch-app”
      openTagList: ["wx-open-launch-weapp"], 
    });
   wx.ready(function() {
      me.showtplBtn=true;
      me.$nextTick(()=>{
         try {
            var btn = document.getElementById('launch-btn');
            btn.addEventListener('launch', function (e) {
               console.log('success');
               console.log(e);
           });
            btn.addEventListener('error', function (e) {
                console.log('fail', e);
            })
            } catch (error) {

            }
        })

    });
    wx.error(function(err) {
        me.$toast(err.errMsg);
    });

二、對應(yīng)的HTML模板

注意點(diǎn)：

• username:需要跳轉(zhuǎn)的微信小程序的原始id以gh_開頭
• path:需要跳轉(zhuǎn)的微信小程序的路徑，這里注意的是路徑后面需要添加.html
• 由于是vue框架，需要把template標(biāo)簽轉(zhuǎn)換為script標(biāo)簽避免和vue的tempalte報(bào)錯(cuò)

"launch-btn"
      
        :username="appid"
        path="pages/personalInfoSub/personalInfoSub.html?type=active"
        v-if="showtplBtn"
        >
        
        <script type="text/wxtag-template">
            //這里的樣式必須在這個(gè)插槽中寫
                <style>
                    .label {
                        color: #448ce1;
                        font-size: 15px;
                        display:block;
                        text-align:center;
                         margin-top: 10px;
                        }
                style>
            <div class="label">跳轉(zhuǎn)小程序div>
           
        script>
        </wx-open-launch-weapp>

三、解決報(bào)錯(cuò)問題

• 如若在控制臺出現(xiàn)以下報(bào)錯(cuò)信息

vconsole.min.js?aac1:10 [Vue warn]: Unknown custom element: <wx-open-launch-weapp> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Pannel>
       <Index> at src/views/index/index.vue
         <App> at src/App.vue
           <Root>

• 解決辦法：

在main.js里面天下Vue.config.ignoredElements = ['wx-open-launch-weapp']這一行代碼即可

四、一些注意事項(xiàng)

• 需要再公眾號里面綁定需要跳轉(zhuǎn)的小程序
• 獲取jssdk配置的時(shí)候需要再公眾平臺綁定安全域名
• 通過接口獲取jssdk配置的時(shí)候url需要時(shí)動(dòng)態(tài)獲取的，且綁定過安全域名
• 微信版本要求為：7.0.12及以上。 系統(tǒng)版本要求為：iOS 10.3及以上、Android5.0及以上。