wx-open-launch-weapp 踩坑记录1、h5放在小程序web-view中，wx-open-launch-w

1、h5放在小程序web-view中，wx-open-launch-weapp不会显示；直接在微信浏览器打开h5会显示

2、weixin-js-sdk版本不能低于1.6.0

3、注意wx.config中jsApiList: [], openTagList: [],的配置

<template>
  <div>
    <div>test</div>
    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_7621d28e8a9e"
      path="pages/index/index"
    >
      <script type="text/wxtag-template">
        <style>.btn { display: flex;align-items: center;width: 100px;height: 100px; background: blue; }</style>
        <button class="btn">打开小程序</button>
      </script>
    </wx-open-launch-weapp>
  </div>
</template>

<script>
const wx = require("weixin-js-sdk");
import { getWxConfig } from "@/api/wxConfig";
export default {
  created() {
    this.wxConfig();
  },
  mounted() {
    document.addEventListener("WeixinOpenTagsError", function (e) {
      console.error(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
    });
  },
  methods: {
    wxConfig() {
      getWxConfig().then((res) => {
        if (res.code == 1) {
          wx.config({
            debug: true,
            appId: res.data.appId,
            timestamp: res.data.timestamp,
            nonceStr: res.data.nonceStr,
            signature: res.data.signature,
            jsApiList: ["chooseImage", "previewImage"],
            openTagList: ["wx-open-launch-weapp"],
          });
          wx.error((res) => {
            console.log("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
          });
          wx.ready(() => {
            document.addEventListener("WeixinOpenTagsError", function (e) {
              console.error(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
            });
            console.log("成功了");
            var btn = document.getElementById("launch-btn");
            btn.addEventListener("launch", function (e) {
              console.log("success");
            });
            btn.addEventListener("error", function (e) {
              console.log("fail", e.detail);
            });
          });
        } else {
          console.log(res.data.msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>

4、另外，需要注意以下几点：

页面中与布局和定位相关的样式，如position: fixed; top -100;等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；
对于有 CSP 要求的页面，需要添加白名单frame-src https://*.qq.com webcompt:，才能在页面中正常使用开放标签。

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
  <meta content="telephone=no" name="format-detection" />
  <meta http-equiv="Content-Security-Policy"
    content="script-src * 'self' 'unsafe-inline' 'unsafe-eval'  https://img.yzcdn.cn https://ssl.google-analytics.com  https://assets.zendesk.com https://connect.facebook.net;default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src * data: content:; connect-src *;  font-src * data: content:;frame-src https://*.qq.com webcompt:;">
  <title>XXX</title>
</head>