前言

某業(yè)務(wù)場景需要支持H5跳轉(zhuǎn)微信小程序，查閱官方文檔發(fā)現(xiàn)官方提供了相關(guān)的方案
官方文檔地址：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內(nèi)的template進行變形

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

疑問：template標簽中btn樣式設(shè)置問題

設(shè)置按鈕樣式的時候發(fā)現(xiàn)百分比寬度不可以，看到社區(qū)有人說在wx-open-launch-weapp中使用style="display: block; width: 100%"，然后在標簽外部套一層div設(shè)置wrap樣式

遂嘗試，模擬器可以正常展示布局，但是在iPhone X - iOS 14.4的設(shè)備上發(fā)現(xiàn)按鈕的寬度異常，幾個同事也出現(xiàn)了同樣的問題，懷疑是不是百分比寬度的問題，用固定的px可以展示出來

所以嘗試用flex布局解決，固定按鈕寬高，然后align-item: center;

結(jié)論

讓按鈕部分定寬高，然后父容器設(shè)置flex-column-center實現(xiàn)居中即可

<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>