H5跳转小程序按钮不显示（使用wx-open-launch-weapp的血泪史）

Posted 2023-05-07

参考技术A 被wx-open-launch-weapp折磨累了，也就不废话了，直接上关键点：

<font color='red' size='2'>ps:其他细节不赘述，自行百度，有很多案例</font>

<font color='gray' size='2'>在vue的视图页：</font>

<font color='gray' size='2'>在vue的methods中：</font>

<font color='gray' size='2'>在vue视图中：</font>

<font color='gray' size='2'>在vue的script中（可放在created中）：</font>

<font color='red' size='3'> 注意：</font>
<font color='gray' size='3'>vue页面中，可以使用 <script type="text/wxtag-template"></script> 进行包裹标签</font>
<font color='gray' size='3'>普通html页面中，使用 <template></template> 进行包裹</font>
<font color='gray' size='3'>样式中不可添加 position:fixed，position:absoulte 样式，不然按钮不展示</font>

ps： 尽自己的绵薄之力让大家少走点坑，其他的坑大家慢慢踩吧🐷。
说实话，微信相关开发是真的坑，及其不友好😭😭😭（痛苦三连~~~）

H5跳转小程序按钮(wx-open-launch-weapp)不显示问题

原因：

1、开发使用者必须是已认证的服-务-号（服务号可以置顶，订阅号不能），服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。

2、开发使用者必须是已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

3、必须部署到正式服务器，测试公众号不显示图标。

4、必须是在已认证的服务号中做JS接口安全域名验证，“JS接口安全域名”和“IP白名单”都要，IP是指获取微信签名的服务器的IP。

注意：1、2两个条件必须满足其中一个；3、4两个条件必须满足，否则标签中的按钮不会显示（微信文档不讲武德，写的不清楚，稍微不注意就会掉坑）。

其他细节：

1、微信开发者工具，"verifyOpenTagList":[]，是显示不了图标的。微信开发工具和真机测试结果可能不一样，一定要用真机测试。安卓和ios测试结果也可能不同，都要测试。

2、小程序的web-view不支持wx-open-launch-weapp。

3、jsApiList:['chooseImage', 'previewImage']（必须有，不然安卓不显示）

4、微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上

目录 | 微信开放文档