使用"微信开放标签"可实现在微信内网页跳转APP的功能。

文档参考：

1. https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html

2. https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

文档写的很简单，可能真的是因为代码量几乎为零吧~~but，网上参考资料也是几乎为零啊！！功能实现过程中遇到了很多坑。

最大的障碍就是：该开放标签内的文字不显示。

首先，我是基于taro框架开发的，文档主要代码如下：

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

<wx-open-launch-app
  appid="your-appid" //注意，这里的appid指的是要跳转的APP的id，不是公众号的appId
  extinfo="your-extinfo"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </template>
</wx-open-launch-app>

简单吧，实际上，如果你用原生框架写，这些代码差不多就能实现跳转功能了。

但是，在taro框架里，首先会遇到的问题就是跳转按钮的文字不显示，对于开放标签的使用，文档只有如下的使用说明。

所有开放标签都能像普通的HTML标签一样在页面中直接使用，不需要再进行额外的处理。
如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。
插槽模版及样式均需要通过<template></template>进行包裹。
对于Vue等视图框架，为了避免template标签冲突的问题，
可使用<script type="text/wxtag-template"><script>进行代替，
来包裹插槽模版和样式。另外，对于具名插槽还需要通过slot属性声明插槽名称，
下文标签插槽中的default插槽为默认插槽，可不声明插槽名称。
对于标签事件，均可通过event.detail获得详细信息。
如果无特殊说明，下文标签事件说明中的返回值均指代event.detail中的内容。

然后我就按上述说明改写了对应的代码：

<wx-open-launch-app
  appid="your-appid" //注意，这里的appid指的是要跳转的APP的id，不是公众号的appId
  extinfo="your-extinfo"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </script>
</wx-open-launch-app>

嗯，你很快就发现，在taro里不能像上面那样使用<style>标签，会报错：

搜搜搜，参考如下文章：

https://blog.csdn.net/sinat_38728634/article/details/106424181

代码修改如下，总算不报错了：

<script type="text/wxtag-template"> 
    <style>{`.btn { padding: '12px' }`}</style>           
    <button class="btn">App内查看</button>         
</script>

然而，嗯~~~并没有生效。

最后，经过多次试验，终于跳出了这个大坑，代码如下：

<View style='width:100%;height:100%;background:#F9482E;'> 
  <wx-open-launch-app     
    appid={Config.clientAppId}
    extinfo={}
>    
    <script type='text/wxtag-template'>
         <button
            style='font-size:14px;color: #ffffff;display:block;width:80px;border:0px;background:#F9482E;padding:0px;line-height:39px;height:39px;'
         >立即打开</button>
    </script>
</wx-open-launch-app></View>

要点总结：

1. <wx-open-launch-app>标签外面必须再包裹一个标签，并且该标签的样式只能采用内联样式。

2. 开放标签的文字必须使用button按钮，我试过div了，使用div文字会消失。

3. 文字的样式采用内联样式，样式才能生效。