H5跳转微信小程序：wx-open-launch-weapp的按

前言

某业务场景需要支持H5跳转微信小程序，查阅官方文档发现官方提供了相关的方案
官方文档地址：wx-open-launch-weapp
其核心用例为

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </template>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

这里的例子是普通H5的写法，如果使用了框架，例如Vue，则需要对wx-open-launch-weapp内的template进行变形

<script type=“text/wxtag-template”>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
</script>

疑问：template标签中btn样式设置问题

设置按钮样式的时候发现百分比宽度不可以，看到社区有人说在wx-open-launch-weapp中使用style="display: block; width: 100%"，然后在标签外部套一层div设置wrap样式

遂尝试，模拟器可以正常展示布局，但是在iPhone X - iOS 14.4的设备上发现按钮的宽度异常，几个同事也出现了同样的问题，怀疑是不是百分比宽度的问题，用固定的px可以展示出来

所以尝试用flex布局解决，固定按钮宽高，然后align-item: center;

结论

让按钮部分定宽高，然后父容器设置flex-column-center实现居中即可

<style>
    .wrap {
        margin: 0 46px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .img {
        width: 100%;
        margin: 70px 0 40px;
    }
    .launch_btn {
        width: 230px;
        display: block;
    }
</style>
<div class="wrap hide">
    <img src="xxx.png" class="img" />
    <wx-open-launch-weapp class="launch_btn" id="launch-btn" username="" path="">
        <template>
            <style>
                .btn {
                    box-sizing: border-box;
                    padding: 12px;
                    width: 230px;
                    background-color: #00a4ff;
                    border-radius: 4px;
                    color: #fff;
                    text-align: center;
                    font-size: 16px;
                    border: none;
                }
            </style>
            <p class="btn">打开小程序</p>
        </template>
    </wx-open-launch-weapp>
</div>