使用wx-open-launch-weapp跳转小程序(vue中)

首先,我们来看下官网    目录 | 微信开放文档

首先要符合要求,才可以使用链接

1.已认证的服务号 服务号绑定js接口安全域名

2.已认证的非个人主体的小程序

然后开始配置:

---引入或下载js文件

http://res.wx.qq.com/open/js/jweixin-1.6.0.js       引入

npm i  weixin-js-sdk   && npm i  weixin-jsapi           项目中安装

---config接口注入

wx.config({
      debug: false,
      appId: config.shareappid,
      timestamp: wxconfig.timestamp,
      nonceStr: wxconfig.nonceStr,
      signature: wxconfig.signature,
      openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填

    })

--- 在框架中使用微信的api,会报一些警告,在main.js中配置忽略这些警告

Vue.config.ignoredElements = ['wx-open-launch-weapp']

---代码中使用

<wx-open-launch-weapp style="display:block;width:100%;height:0.7rem;margin-top:-0.8rem;"
                                    id="launch-btn"
                                    :username="username"
                                    :path="path">
                <script type="text/wxtag-template">
                  <style> .btn {width: 100%;width: 100%;height: 1.3rem;opacity: 0} </style>
                  <div class="btn">跳转小程序</div>
              </script>
              </wx-open-launch-weapp>

注:样式的话可以根据代码自己调试,这里我在粘贴的我的项目中代码

---查看

此标签内容在浏览器和开发者工具都没办法显示,需要真机调试,或者放在测试环境下查看,

end...