VUE项目中使用wx-open-launch-weapp跳转小程

VUE项目中使用wx-open-launch-weapp跳转小程序

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

步骤如下

1.安装微信jsdk,并在页面中使用引入。jsdk版本不低于1.6.0

// package.json
"dependencies": {
    "weixin-js-sdk": "^1.6.0"
  },

//test.vue
<template>
    <div> </div>
</template>
<script>
    import "weixin-js-sdk";  // 引入wx-jsdk
    export default {

    }
</script>

2.通过config接口注入权限验证配置并申请所需开放标签

// test.vue
created(){
  this.setWxConfig();
}
methods: {
    setWxConfig(){
          const that = this;
          const appid = this.appid;
          const url = window.location.href;  // 注意这里，我的项目中路由模式用的是history模式
          console.log(appid, url);
          // 注意这里是调用接口获取到微信配置相关参数的
          that.$api.getJsApiConfig({ appid: appid, jsurl: url }, res => {
              const config = res;
              wx.config({
              debug: false, // 开启调试模式,
              appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
              timestamp: res.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.nonceStr, // 必填，生成签名的随机串
              signature: res.signature, // 必填，签名，见附录1
              jsApiList: [
                "checkJsApi",
                "openLocation",
                "getLocation",
                "closeWindow",
                "scanQRCode",
                "chooseWXPay",
                "chooseImage",
                "uploadImage",
                "previewImage",
                "getLocalImgData"
              ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            openTagList: ['wx-open-launch-weapp']  // 这里要配置一下
        });
      });
    }
}
      

3.在页面中添加wx-open-launch-weapp标签

<template>
    <div>
        <wx-open-launch-weapp
            id="launch-btn"
            username="小程序原始id"
            path="/pages/index/index.html"
            @launch="launchHandle"
            @error="errorHandle"
        >
            <script type="text/wxtag-template">
                <style>.btn { padding: 12px; border: 1px solid red; }</style>
                <button class="btn">打开小程序</button>
            </script>
        </wx-open-launch-weapp>
    </div>
</template>

4.解决vue中报wx-open-launch-weapp组件未注册的问题

// main.js
Vue.config.ignoredElements = ['wx-open-launch-weapp'];

5.将代码上传至服务器，在真机上查看(微信开发者工具中无效果)

总结以下几个注意点

1.wx.config接口中配置openTagList项

2.需要真机调试，开发者工具无效

3.<wx-open-launch-weapp>标签中的path再设置小程序路径时必须加上“.html”

4.跳转小程序按钮在vue项目中需要放在<script type="text/wxtag-template"></script>内，样式也要写在该标签内。如下：

<script type="text/wxtag-template">
       <style>.btn { padding: 12px; border: 1px solid red; }</style>
       <button class="btn">打开小程序</button>
</script>

5.当vue路由为history模式时，ios手机上兼容问题(这个是和微信缓存机制相关)

原因：ios下微信会缓存第一次进入的页面地址，如果从微信一级页面跳转到二级页面，
由于vue是单页应用，不会刷新页面，vue路由地址变了，和微信缓存的地址不一致，
所以在进行wxConfig时传入的url和微信缓存的url不一致会导致jsdk调起失败，进而导致<wx-open-launch-weapp>无法生效

解决办法：

// 刷新一下当前页面
reloadPage() {
      if (!this.$utils.isIOS()) {
        return;
      } else {
        const currUrl = location.href;
        const isReload = currUrl.indexOf("?reload=1") > -1 ? true : false;
        if (!isReload) {
          location.replace(currUrl + "?reload=1");
        }
      }
    },