写这篇文章为了解决现在没有一个合集,所以我参考其他文档,及自己的测试最后得出完整的方案
1. 公众号后台关联小程序
- 要求已认证的服务号,在服务号中关联要跳转的小程序
- 配置 JS接口安全域名
2. 调用wx.config配置‘wx-open-launch-weapp’标签
3. 修改微信本来的内联script
重点是 v-is="'script'"
<div>
<wx-open-launch-weapp
id="launch-btn"
appid="xxxxx"
path="pages/xxx/xxx"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
>
<div v-is="'script'" type="text/wxtag-template">
<div
style="
width: 100%;
height: 100%;
"
></div>
</div>
</wx-open-launch-weapp>
</div>
4. IOS,在标签中写图片则点击无效问题,替换方案
‘wx-open-launch-weapp’标签中的dom样式,如果是在vue3中,建议写成内联样式
<div style="position: relative">
<div style="position: relative">
这里写页面样式,下面的wx-open-launch-weapp用来做这个的遮罩,透明度改成零就好
</div>
<wx-open-launch-weapp
id="launch-btn"
appid="xxxxx"
path="pages/xxx/xxx"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
>
<div v-is="'script'" type="text/wxtag-template">
<div
style="
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 50px;
"
></div>
</div>
</wx-open-launch-weapp>
</div>
作者:白马不是马
标签:launch,微信,weapp,集锦,跳转,open,wx From: https://www.cnblogs.com/DTCLOUD/p/17176196.html