微信7.0.12开始，增加了 wx-open-launch-app标签，用于打开App，感觉又高大上了。

前期相关配置需严格对照文档，戳 微信内网页跳转App功能 和 开发标签说明

按照官方demo加各种配置踩坑，终于弹出了唤起App的弹窗以及打开了App，不容易啊~，现在要开始真正的写需求了

对照设计稿，有一个button，带背景色和圆角，点击要唤起App，按照文档的方式，样式写在了 template中的style里，样式还算简单，终于撸出来了，但标签内样式无法使用vw（这次妥协下，就不适配了）

后面又来了个需求，是个复杂的列表，需求点击每个item都是唤起App操作，一看这个，想着等于要在这个标签内完成原生的样式，而且还有数据的渲染，想想都可怕（React/Vue都出来多少年了~）。想了下，干脆用absolute定位，将内部空元素覆盖在外面不就可以了，直接开干，但最后悲剧了，没有任何效果，在社区一搜发现样式不能设置position

休息下，重点马上到来~~

试来试去发现 wx-open-launch-app这个标签本身是可以加样式的，那还等什么，直接设置个postition: absolute，然后外面样式该怎么写就怎么写，外层设置个position: relative就好，template内部样式就放一个空div，设置width:100%, height: 100%，见证奇迹的时刻到了

你以为这样就结束了，但打开发现内部根本没有高度，因此必须设置真实高度，代码大致如下（React）

export const getWxOpenAppHtml = (extinfo: string, height: number) => {
  const id = 'launch-btn' + getRandomId();
  return {
    id,
    html: `
      <wx-open-launch-app
        id=${id}
        style="position:absolute;top:0;left:0;right:0;bottom:0;"
        extinfo=${extinfo}
        appid="appid"
        >
        <template>
          <style>
            .wx-btn{
              width:100%;
              height:${getRealSize(height, isPad)}px;
            }
          </style>
          <div class="wx-btn"></div>
        </template>
      </wx-open-launch-app>
    `,
  };
};

<div className="open-app-btn">
  <Button className="btn">打开APP</Button>
  <div
    onClick={() => {
      openAppError(); // 用于处理标签未生效的情况
    }}
    dangerouslySetInnerHTML={{ __html: openBtnAppHtml }}
  ></div>
</div>

上面的getRealSize我这边主要是为了处理传入的高度，并将其按vw的形式进行适配，返回适配后的px

总结

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