引入sdk

第一种： npm install weixin-js-sdk -D   import wx from 'weixin-js-sdk';
第二种： <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
切记：同时引入的话，第二种层级高；

页面 跳转地址记得加.html

<template>
  <div>
    <wx-open-launch-weapp id="launch-btn" username="小程序原始id" path="/pages/index/index.html">
      <script type="text/wxtag-template">
        <button class="btn" style="display:block;width:200px;height:100px;background-color:red;">打开小程序</button>
      </script>
    </wx-open-launch-weapp>
  </div>
</template>

定义config:

 data () {
    return {
      vxConfig: {
        debug: true,
        appId: '',
        timestamp: '',
        nonceStr: '',
        signature: '',
        jsApiList: ["checkJsApi", 'openLocation'], // 随便写一个就好
        openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填
      },
    }
  },

调用后台设置config

 wxconfig () {
      let signLink = /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl; // 兼容hash、history模式
      if (wx == null) {
        return;
      }
      $.ajax({
        type: 'POST',
        url: location.protocol + '//' + location.host + 'xxxxxxxxxx', // 请求自己后台地址
        dataType: 'json',
        timeout: 6e3,
        data: {
          'url': signLink,
        },
        success: (rData) => {
          if (rData) {
            this.vxConfig.appId = rData.appId;
            this.vxConfig.timestamp = rData.timestamp;
            this.vxConfig.nonceStr = rData.nonceStr;
            this.vxConfig.signature = rData.signature;
            wx.config(this.vxConfig);
            wx.ready(function () {
              console.log('ready')
            });
          }
        }, error: (err) => {
          console.log(err)
        },
      })
    },

调用方法

 // 目前不加定时按钮不显示 所以加了定时  有解决的小伙伴希望分享一下此解决办法
 setTimeout(() => {
      this.wxconfig();
    }, 1000)；

关于样式 目前只支持px 有好的方法可以分享 本人自身项目用的rem