H5跳转小程序踩坑经历

最新推荐文章于 2024-09-11 17:26:38 发布

qy_demon

最新推荐文章于 2024-09-11 17:26:38 发布

阅读量220

点赞数 7

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_21879775/article/details/141548462

版权

参考链接：目录 | 微信开放文档

示例代码：vue3项目

<wx-open-launch-weapp appid="appid" :path="/pages/index/index" env-version="trial">
  <component is="script" v-bind="{ type: 'text/wxtag-template' }">
      <div style="line-height: 40px; width: 120px; text-align: center; background-color: #07c160; border-radius: 20px; color: #fff">
       去学习
      </div>
  </component>
</wx-open-launch-weapp>

测试环境正常，生产环境ios显示，Android不显示

请特别注意文档中这句话：

对于有CSP要求的页面，需要添加白名单frame-src https://*.qq.com webcompt:，才能在页面中正常使用开放标签。

如何判断是否是CSP页面

查看静态资源的网络请求中的response是否有 Content-Security-Policy

如果是CSP页面，请在nginx配置文件中加入：

add_header Content-Security-Policy "default-src *;style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-inline' 'unsafe-eval';img-src * data:;worker-src * blob:;font-src 'self' data:;frame-src https://*.qq.com webcompt:;";