背景：

1、拥有认证服务号

2、JS接口安全域名已配置

3、网站正常使用

需求：在网站内添加跳转小程序功能

实现：vue组件

<template>
  <div class="components-details" v-if="reday" :span="24">
      <wx-open-launch-weapp style="display:block; width:100%;height:100%;" class="launch-btn" id="launch-btn"
      :username="appid" :extinfo="path">
      <script type="text/wxtag-template">
        <style>
            .btn {
              width: 100%;
              height: 100%;
              font-size:15px;
              color:#ffffff;
              line-height: 45px;
              background-color: #e60039;
              margin: 0 auto;
              text-align: center;
            }
            </style>
            <div class="btn">前往小程序</div>
          </script>
    </wx-open-launch-weapp>
  </div>
</template>


<script>
//获取配置接口
import { getWxConfigInfo } from '@/api/goods'
export default {
  props: {
    appid: {
      type: String,
      default: ''
    },
    path: {
      type: String,
      default: 'pages/index/index.html'
    }
  },
  data() {
    return {
      reday: false
    };
  },
  created() {
    this.getConfig()
  },
  methods: {
    getConfig() {
      let wxurl = window.location.href.split('#')[0]; //获取签名的地址   vue hash模式
      const that = this;
      getWxConfigInfo({
        appid: '你的服务号appid',
        requesturl: wxurl
      }).then(res => {
        if (res.code == '0') {
           //这里直接用wx是因为项目在index.html 引入了https://res.wx.qq.com/open/js/jweixin-1.6.0.js
           //当然也可以用import方式引入再使用
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ['onMenuShareTimeline'], // 所有要调用的 API 都要加到这个列表中,即使 不使用任何API也必须填一个，不填的话按钮不会显示
            openTagList: ['wx-open-launch-weapp'],//小程序跳转组件
            success: function (res) {
              // alert(JSON.stringify(res));
              // console.log(res)
              // 以键值对的形式返回，可用的api值true，不可用为false
              // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}


            },
            cancel: function () {
              reject();
            },
            fail: function (err) {
              console.log(err)
              reject(err)
            }
          });
         // config成功
          wx.ready(function () {
          
            // 成功后显示<wx-open-launch-weapp>标签
            that.reday = true;
          })
        }
      })
    }
  }
};
</script>


<style scoped lang="scss">
.components-details {
  width: 100%;
  height: 100%;
}
</style>

效果：

iPhone手机能正常显示（低版本没有测试）

2部小米手机无法显示按钮安卓10，微信7.0.16

2部OPPO手机无法显示 安卓10，微信7.0.15

华为P30无法显示 安卓9 微信7.0.15