微信公众号跳转小程序 wx-open-launch-weapp安装 weixin-js-sdk npm install

安装 weixin-js-sdk

npm install weixin-js-sdk
注册组件：在 main.js 注册

var wx = require('weixin-js-sdk')
// 通过 config 接口注入权限验证配置并申请所需开发标签
wx.config({
    debug:true, // 开启调试模式，调用得所有api得返回值会在客户端 alert 出来，若要查看传入的参数，可以在PC 端打开，参数信息通过log打印，仅在PC端时才会打印
    appId:'', // 必填，公众号唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: ['wx-open-launch-weapp'], // 必填，需要使用的JS接口列表
    openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app'] // 跳转小程序
})

所有开放标签都能像普通的HTML标签一样在页面中直接使用，不需要再进行额外的处理。 2.对于标签事件，均可通过event.detail获得详细信息。

wx-open-launch-weapp 1. 属性
username 必填所跳转的小程序原始id,即小程序对应的已gh_开头的id
path 所需跳转的小程序内页面路径及参数 2. 注意事项
1.wx.config接口中配置openTagList项
2.需要真机调试，开发者工具无效
3 标签中的path再设置小程序路径时必须加上“.html”
4.跳转小程序按钮在vue项目中需要放在内，样式也要写在该标签内。

<wx-open-launch-weapp
  username="gh_******"
  :path="page/home/index"
  style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"
>
  <script type="text/wxtag-template">
       <style>.btn { padding: 12px; border: 1px solid red; }</style>
       <button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>