微信浏览器里面h5跳转小程序

码农天地 - 2020-09-28 17:36:13

---

微信浏览器里面h5跳转小程序注意事项,以vue框架为例一、获取jssdk配置，在wx.ready回调函数里面展示按钮

wx.config({
      debug: false, 
      appId: data.appId, 
      timestamp: data.timestamp, 
      nonceStr: data.nonceStr, 
      signature: data.signature,
      //这里必须填一个不能为空数组
      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);
    });

二、对应的HTML模板注意点：username:需要跳转的微信小程序的原始id以gh_开头path:需要跳转的微信小程序的路径，这里注意的是路径后面需要添加.html由于是vue框架，需要把template标签转换为script标签避免和vue的tempalte报错

<wx-open-launch-weapp
        id="launch-btn"
      <!-- username:需要跳转的微信小程序的原始id以gh_开头的;path:需要跳转的微信小程序的路径，这里注意的是路径后面需要添加.html -->
        :username="appid"
        path="pages/personalInfoSub/personalInfoSub.html?type=active"
        v-if="showtplBtn"
        >
        <!-- 由于是vue框架，需要把template标签转换为script标签避免和vue的tempalte报错 -->
        <script type="text/wxtag-template">
            //这里的样式必须在这个插槽中写
                <style>
                    .label {
                        color: #448ce1;
                        font-size: 15px;
                        display:block;
                        text-align:center;
                         margin-top: 10px;
                        }
                </style>
            <div >跳转小程序</div>
           
        </script>
        </wx-open-launch-weapp>

三、解决报错问题如若在控制台出现以下报错信息

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']这一行代码即可

四、一些注意事项需要再公众号里面绑定需要跳转的小程序获取jssdk配置的时候需要再公众平台绑定安全域名通过接口获取jssdk配置的时候url需要时动态获取的，且绑定过安全域名微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android5.0及以上。

Tags 标签