H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】微信浏览器里面h5跳转小程序

微信浏览器里面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 class="label">跳转小程序</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及以上。
  • 如若需要在微信的wx-open-launch-weapp添加img标签,img的路径需要为base64或者远程地址,不能为本地的静态地址
  • 在vue里面若wx-open-launch-weapp子元素里面包含img标签,不能通过循环(v-for)来渲染图片,否则图片渲染不出来,可以在HTML模板里面写死

本文地址:H5W3 » 【前端技术】微信浏览器里面h5跳转小程序

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址