首页 > 编程语言 >微信公众号跳转小程序 wx-open-launch-weapp,在vue3+vite中使用 (多个问题集锦)

微信公众号跳转小程序 wx-open-launch-weapp,在vue3+vite中使用 (多个问题集锦)

时间:2023-03-03 16:45:04浏览次数:57  
标签:launch 微信 weapp 集锦 跳转 open wx

写这篇文章为了解决现在没有一个合集,所以我参考其他文档,及自己的测试最后得出完整的方案

1. 公众号后台关联小程序

  • 要求已认证的服务号,在服务号中关联要跳转的小程序
  • 配置 JS接口安全域名
    image.png
    image.png

2. 调用wx.config配置‘wx-open-launch-weapp’标签

image.png

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

相关文章