微信 H5 页面唤起 APP(uniapp)

最近使用uniapp开发app，其中有一个功能是从app分享内容到微信，再从微信唤起app，跳转到指定页面。第一次接触这个功能，看了很多文章和官网的说明，终于搞懂了，特此来总结一下。

首先需要在微信公众平台申请一个服务号，必须是服务号，接下来在公众号管理平台需要配置JS安全接口域名和的IP白名单。并且将MP_verify_f4VWFoFpHgzmqFbo.txt文件下载并放到项目的根目录下（域名的根目录下）

接下来需要在微信开放平台上申请移动应用，所有的资料填写完成之后，将你申请的服务号绑定到本开放平台，在绑定完成公众号之后，需要在微信开放平台 - 管理中心 - 公众号详情 - 接口信息 - 关联设置将移动应用的APPID与之前配置的JS安全域名进行绑定。

关于JS接口安全域名进行说明，具体配置请参考微信H5拉起APP相关要求，开放平台关联设置里的JS安全域名要与公众平台的域名保持一致。

都设置完，我们就可以开始在页面写代码了，微信打开的 h5 想要跳转 app 时，需要接入微信JS-SDK

方式一：sdk–http://res2.wx.qq.com/open/js/jweixin-1.6.0.js
方式二：npm install weixin-js-sdk --save

我使用的是方式npm install weixin-js-sdk --save，在页面进行引入import wx from 'weixin-js-sdk'
跳转页面还需要使用到微信提供的开放标签 wx-open-launch-app，请参考微信唤起APP相关标签

注意：
Android平台通过开放标签跳转App，App必须接入微信OpenSDK（uniapp这些sdk都是内置好的 不用配置）
在 ios 中，只要你接入了 Universal Link，那么在微信环境下你是可以直接唤起 app， 而不需要接入微信sdk触发这个弹框，如果你想和 android 保持一致的用户体验和代码逻辑，那就需要接入sdk
补充说明：
1、必须真机才能渲染该标签（开发时可以使用微信开发者工具的公众号网页项目模式调试）；
2、文字链无法拉起该标签

唤起App还需要获取签名，获取签名可以后台来生成，具体如何生成参考JS-SDK使用权限签名算法，timestamp，nonceStr，signature都是从后台来获取的。这些都准备完成就可以开始写代码了

附相关代码如下：

<template>
  <div id="shareWrap">
    <div>你的展示内容...</div>
    <div>
      <wx-open-launch-app 
        id="launch-btn" 
        appid="移动应用Id"
        :extinfo="向App传递的参数"
        @error="onListenLaunchError"
        >
        <component :is="'script'" type="text/wxtag-template">
          <button
            style="
            padding: 10px 55px;
            font-size: 14px;
            color: #fff;
            font-family: 'Sora';
            background-color: #7c7957;
            border: none;
            border-radius: 4px;"
          >App 内打开</button>
        </component>
      </wx-open-launch-app>
    </div>
  </div>
</template>
<script setup>
import wx from 'weixin-js-sdk';
import axios from 'axios'; 

onMounted(() => {
  initwxlaunch()
})

// 没有app 跳转至应用商店
function onListenLaunchError() {
  window.location.replace('应用商店地址');
}

async function initwxlaunch() {
 axios({
   method: 'get',
   url: `https://dev.test.net/api/v1/wx/getSDKConfig?url=${encodeURIComponent(location.href.split('#')[0])}`
 }).then((res) => {
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.data.appId,  // 必填，公众号的唯一标识
      timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
      signature: res.data.data.signature, // 必填，签名,// 必填，签名
      jsApiList: ['wx-open-launch-app'], // 必填，需要使用的JS接口列表
      openTagList: ['wx-open-launch-app']// 可选，需要使用的开放标签列表
    });

    wx.checkJsApi({
      jsApiList: ['wx-open-launch-app'], // 校验跳转APP的标签是否可用
      success: function (res) {
          console.log('可用')
      },
      fail: (err) => {
          console.log(err, '不可用')
      }             
    })
  })
}

</script>

注意：

1. 以上代码内容为Vue3.0的写法，使用vue2写法的话可以把<component :is="'script'" type="text/wxtag-template"></component>换成<script type="text/wxtag-template"><script>
2. vue编译过程中无法识别标签wx-open-launch-app，可以在main.js中设置：
   createApp(App).config.compilerOptions.isCustomElement = (tag) => (tag.includes(‘wx-open-launch-app’));
3. 获取签名传给后台的url，前台如果进行编码了 url=${encodeURIComponent(location.href.split('#')[0])，后台一定要进行解码，否则会报签名无效

所有的准备完成之后，可以使用微信开发者工具的公众号网页项目进行测试，开启调试时，要设置debug为true

若出现 wx.config：config:fail,invalid signature提示内容

1. 检查签名算法，使用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验
2. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致，并且为服务号appid
3. 检查传给后台的url，若使用 encodeURIComponent(location.href.split('#')[0]) 进行传参，确认后台是否进行解码操作

出现以下内容就是成功了

成功之后，使用真机运行就可以进行跳转啦，在App接收微信跳转传过来的参数，并跳转到指定页面。
uniapp中在app.vue页面使用 plus.runtime.arguments 可以拿到从微信网页跳转来的参数，具体内容参考uniapp文档中的内容

onShow: async function() {
  await new Promise((resolve, reject) => {
	setTimeout(() => {
	  let id = plus.runtime.arguments;  //获取app从分享过来的参数
	  console.log('id', id)
	  if(!id) return;
	  uni.navigateTo({
		url: `/pages/canvasPlay/index?bookId=${id}`
	  })
	});
  });
},
// 退出app删除参数，否则每次进来都会进行跳转
onHide: function() {
  plus.runtime.arguments = null;
  plus.runtime.arguments = "";
}

以上就是微信唤起app的全部内容啦~