vue微信H5跳转APP,wx-open-launch-app,最强攻略

稍微看了一下微信开发文档关于跳转APP的说明(链接),文档说的很简单,自己去网上找了相关用法,过程还是有些曲折,但是最终还是成功了,特此记录:

1.引入SDK

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

通过npm

npm install weixin-js-sdk --save

2.配置微信config(wx.config)

注:

1. 因为我不止一个页面要跳转到app,所以封装了一个函数;
2. 配置信息是接口下发的;
3. 要先通过wx.config的检验才能使用开放标签wx-open-launch-app

 * 微信唤醒app
 * 请在需要分享的前端页面调用
 * @param {Object} url -需要唤醒的前端页面
 */
export const InWeixinOpenApp=async(url)=>{
  await jsConfig({ url })
  .then((response) => {
    let { data } = response;
    let jsConfig = {
      debug: data.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: data.appId, // 必填，公众号的唯一标识
      timestamp: data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.nonceStr, // 必填，生成签名的随机串
      signature: data.signature, // 必填，签名
      jsApiList: data.jsApiList, // 必填，需要使用的JS接口列表
      openTagList: ["wx-open-launch-app"],
    };
    wx.config(jsConfig);
    wx.ready(function () {});
    wx.error(function (err) {
      // console.log(err);
    });
  })
  .catch((err) => {
    // console.log("请求失败", err);
  });
}

在vue组件使用:

注:extinfo为h5向app传递的相关参数

const extinfo = ref();
onMounted(async () => {
  // 唤醒app
  if (isInWeixin) {//判断是否是在微信内
    InWeixinOpenApp(window.location.href);
    extinfo.value = isIOS
      ? `taobao:/${paramsToBase64("IOS")}`
      : `taobao:/${paramsToBase64("Android")}`;
  }
});

3使用开放标签wx-open-launch-app

注:

• 标签绑定的appId是你要跳转的移动应用的appId，不是微信公众号的appId(跟wx.config的appId是不一样的!!!)
• 这个开放标签我在写的时候遇到蛮多坑的,而且在手机上调试一直不知道哪里有bug,再加上需要配置的JS安全域名下才能使用该开放标签，所以必须使用线上的服务器调试(后来发现不需要每改一次就部署到线上调试:改本地host文件,把域名改成配置的哪个域名,比如我这边配置的安全域名是www.baidu.com,本地host的域名也改成www.baidu.com,但是记得本地访问的时候是www.baidu.com)
• 调试工具下载微信开发者工具(选择公众号网页调试,输入url)

 <wx-open-launch-app
          id="launch-btn"
          v-if="isInWeixin"
          @error="handleErrorFn"
          @launch="handleLaunchFn"
          appid="wxXXXXXXXXXXXX"
          :extinfo="extinfo"
        >
          <script v-is="'script'" type="text/wxtag-template">
            <button class="btn" style="opacity:0">
              在XXX打开
            </button>
          </script>
        </wx-open-launch-app>

我是原本就有写好了ui,我就直接设置透明度为0,设置对应样式,直接覆盖在我要使用的按钮上,如果你在同一个页面有多个地方需要点击跳转到app的,直接复制,设置透明度为0....一样的方法,此外:

使用wx-open-launch-app控制台会有警告,虽然不影响使用,但也不美观,在main.js使用:

app.config.warnHandler = () => null;

在微信开发者工具,点击跳转按钮

到这里已经成功了,部署到线上服务器,但是在手机上调试,没反应,我用微信开发者工具看看是否是控制台报错了,成功唤起的弹窗呀!在网上查找了一番,发现同样的问题了:必须把网址生成为二维码(网上有工具)，然后在微信内识别二维码打开网页，然后再点击按钮，就能成功唤起app了