微信中H5页面唤起 APP方案

wx-open-H5网页在微信上是无法直接打开app链接的，需要使用微信开放标签wx-open-launch-app，它主要用于微信H5网页唤醒app，该标签只有在微信中才会显示。下面由“fly63前端网”为大家整理记录使用wx-open-launch-app跳转app的历程，方便大家以后查阅和参考。

步骤一：域名和应用Appid的绑定

绑定H5域名：登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

关联移动应用：移动应用Appid在开放平台管理中心/移动应用中，根据自己的应用进行选择；开放平台绑定的每个移动应用都有一个AppID。需要注意的是：目前安全域名只绑定了一个移动应用。

关于微信外部链接内容管理规范的声明：点击查看

步骤二、获取签名

获取签名这一块由后端的同事来完成，原因很简单，因为获取access_token要的ip必须加入服务号的ip白名单中，而我们本地的IP不是固定的

官网文档：后端获取签名方式

调用这个接口我们会获取到如下参数appId、timestamp、nonceStr、signature。

步骤三、前端引入微信的jssdk

网页中需要引入weixin.js

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

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

当然也支持npm的方式安装：

npm install weixin-js-sdk

引入：

import wx from 'weixin-js-sdk'

步骤四、前端完整示例

<wx-open-launch-app id="openApp" appid="xxx" extinfo="">
  <!-- template为必选项 -->
  <template>
	<!-- 样式写在了template中的style里才生效哦 -->
	<style>
        .wx-btn{
            width:100%;
            color: #666;
        }
    </style>
    <button>App内查看</button>
  </template>
</wx-open-launch-app>
  
 <script>
  wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开
      appId: '', // 必填，开发者ID
      timestamp: , // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名
      jsApiList: ["onMenuShareAppMessage"], // 必填，需要使用的JS接口列表
      openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表
  });
  wx.ready(() => {
      console.log("ready")
  })
  wx.error(() => {
      console.log("error")
  })
  var btn = document.getElementById('openApp');
  btn.addEventListener('launch', () => {
      console.log('success');
  });
  btn.addEventListener('error', (e) => {
      console.log('fail', e.detail);
  });
 </script>

说明：

config的appId为开发者ID是公众号的获取的。wx-open-launch-app标签里的appid为步骤一里配置的移动应用Appid（不要跟wx.config里面的appid弄混了）。

标签里的extinfo通常传入的是一个url，用来打开指定的页面，这里有一点需要注意的是，我们应使用一个自定义的scheme，否则我们在打开App 的过程中会出现一个选取浏览器的过程。

关于标签的样式问题：

1. wx-open-launch-app 这个标签可以加样式style
2. wx-open-launch-app 标签外部样式和内部样式是隔离的

在开发中，我们需要判断是否是微信环境，根据环境不同做相应的处理，判断微信的方法：

is_weixn() {
    let ua = navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
	return true
    } else {
	return false
    }
}

关于未成功唤醒App

当我们完成上述工作之后，准备唤起我们的app的时候，发现居然不好使！！

你遇见的问题可能是这样的：

1. IOS能成功唤起，Android无法唤起
2. Android在后台运行时，能成功唤起app，当结束app进程时，无法唤起
3. Android唤起app之后，出现一层蒙版导致无法点击

出现这一系列问题，大概率是SDK关于Android和IOS的接入配置有问题。参考以下文档

IOS接入指南
 Android接入指南

总结

配置需严格按照文档，wx.config调用时，jsApiList必须传入至少一项Api，不能只传openTagList。
外部样式无法影响标签内样式，因为template下生成了document-fragment单独的doc，样式已于外界隔离。
template样式无法使用position。
标签本身可以设置样式，因此对其设置absolute，外部按正常方式写，只是样式多一个relative即可。
内部高度无法使用百分比，需要传入真实高度，因此不适用不知道外部高度的场景。
弹窗唤起后，不报错的情况下，点击允许和取消都会进入launch事件，按现在逻辑无法区分用户是点击的允许还是取消的。

链接: https://www.fly63.com/article/detial/12298