vue H5页面跳转小程序＜wx-open-launch-weapp＞

微信版本要求：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

官网文档

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
首先按照官网把公众号的安全域名配好
然后通过config接口注入权限验证配置并申请所需开放标签（wx.config）

然后用小程序跳转按钮：< wx-open-launch-weapp >
官网用例

然后我就出现了一些列报错，而且真机测试按钮不显示

wx-open-launch-weapp 这个只有在真机测试才不会报错，在模拟器上也会报错

template 这个报错是template未注册

综合上面我给改了如下

需要注意

1. jsApiList必填，可以随便写个属性值就行
2. wx-open-launch-weapp 中path小程序路径必须是写后缀.html 参数多少随意
3. jweixin-1.6.0.js加载方式随意，可写在最外层html里

<template>
  <div>
    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_xxxxxxxxx"
      path="pages/home/index.html"
    >
      <script type="text/wxtag-template">
        <style>.btn { margin: 50px; }</style>
        <button class="btn">打开小程序</button>
      script>
    wx-open-launch-weapp>
  div>
template>

<script>
    import wx from "weixin-js-sdk";
    export default {
        data() {
            return {
                msg: "关注博主更多文章 https://blog.csdn.net/qq_39882537"
            }
        },
      beforeCreate(){
        wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: appId, // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: noncestr, // 必填，生成签名的随机串
          signature: signature,// 必填，签名
          jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的JS接口列表
          openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        });
        // 通过ready接口处理成功验证
        wx.ready(function () {
          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
        });
        // 通过error接口处理失败验证
        wx.error(function (res) {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
        });
      },
        mounted() {
        let wxJs = document.createElement('script');
          wxJs.src = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js";
          document.head.appendChild(wxJs);
          wxJs.onload = function () {

          };
        },
        methods: {

        }
    }
</script>

关注博主更多文章 https://blog.csdn.net/qq_39882537