前言
某业务场景需要支持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>
