在h5页面中通常会有调起应用的需求，来达到dau增长的目的以及提供更好的用户体验。 在h5页面中通常使用location.href或者iframe来触发一个scheme链接来进行调起。但是由于微信浏览器对scheme调起的限制，在微信中是不能直接通过点击按钮来打开应用的，除非在微信白名单中。所以在安卓中，通常调起的方式是借助浏览器或者应用宝。而这种方式体验很不好，很容易就造成了流量的流失。
所以微信提供了一个开放标签来实现直接调起，就是得按照微信的标准一步步操作，这个过程是非常辛酸。

跳转APP开放标签：wx-open-launch-app

这是在2020年5月，微信开放平台推出了微信内网页可跳转指定App的功能。 wx-open-launch-app标签则用于在微信网页中跳转App的按钮标签
可先参考官方文档

一. 引入 weixin-js-sdk

版本必须是1.6以上

import wx from 'weixin-js-sdk';

二. 配置使用的开放标签

这里的信息通常由后端来提供，签名生成规则可参考官方文档
注： 这里的appid是公众号的appid

 wx.config({
        debug: false,
        appId: res.appId,
        timestamp: res.timestamp,
        nonceStr: res.nonceStr,
        signature: res.signature,
        openTagList: ['wx-open-launch-app'],
        jsApiList: jsApiListOpt // 必填，需要使用的JS接口列表
    });

三.在页面组件中使用开放标签

因为开放标签script中是独立的，外部样式无法影响内部。通常按钮样式又非常复杂，所以解决方案是将按钮样式按照正常方式写好，然后将开放标签使用绝对定位盖在上面。
标签上的参数说明：

• appid 这个是要跳转的应用appid
• extinfo 传给客户端的参数（调起的scheme）需要客户端自行解析后跳转 代码示例：

<wx-open-launch-app 
    ref={openApp}
    appid='xxxx'
    extinfo={props.extinfo}
    style={{display: 'block', width: `100%`, height: '100%', position: 'absolute', left: '0', top: '0'}} >
    <script type='text/wxtag-template'>
    <style>{`.btn{ width:100%;height:${height}px;`}</style> 
    <div className='btn'></div> </script> 
</wx-open-launch-app> 

开放标签中的高度使用百分比无效，只能是真实高度数值，所以需要等待dom加载完成后计算高度值传入

useEffect(() => { 
    setTimeout(() => { 
        setHeight(openApp.current.offsetHeight); 
    }, 100);
}, [props, openApp.current.offsetHeight]); 

四 开放标签上的事件监听

• 触发launch: 当弹窗弹出，点击确认和取消都会触发,并且无法区分确认和取消，很鸡肋，恶心人。
• 触发error： 域名不是绑定的安全域名，应用未安装，校验App跳转权限失败。

    const launchError = (e) => {}
    const launchSuccess = (e) => {}
   launchBtn.current.addEventListener('error', launchError);
   launchBtn.current.addEventListener('launch', launchSuccess); 

踩坑总结：

• config配置中的appid是公众号appid, 标签上的appid是要跳转的应用appid
• jssdk版本需是1.6.0+
• wx.config调用时，jsApiList必须传入至少一项Api，不能只传openTagList
• 外部样式无法影响标签内样式，因为template下生成了document-fragment单独的doc，样式已于外界隔离，可以理解为是webComponent。所以如果标签内样式很复杂，可以将标签盖在原有元素之上。
• template中样式无法使用position样式，但是标签本身可以设置样式，因此对其设置absolute，外部按正常方式写，只是样式多一个relative。
• 标签内部高度无法使用百分比，需要传入真实高度
• 调试必须使用绑定的安全域名才可以，若使用代理到测试环境，需是http协议，否则微信中打不开。调试工具可使用手机或者微信开发者工具
• 安全域名只能绑定一个，这点非常不友好，恶心。
• 无法做应用低版本兼容，只要能点击弹窗，无法监听到调起成功或者失败