如何在h5中使用wx

wx-open-launch-weapp的官方文档在这里：参考文档

1. 首先在index.html引入sdk

  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2. 封装微信config文件：具体可看文档有详细说明

import Reqs from "@api/common.js";
export function wxSubscribe() {
  const url = window.location.href.split("#")[0];
  const params = {
    url,
  };
  console.log("params___", params);
  Reqs.wxConfig(params)
    .then((data) => {
      console.log("配置数据", data);
      wx.config({
        // beta: true,
        debug: false,
        appId: data.appId,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        jsApiList: ['onMenuShareAppMessage'],//必填属性
        openTagList: ["wx-open-launch-weapp"],
      });
      console.log("微信config完成");
    })
    .catch((err) => {
      console.log(err);
    });
}

3. 因为要方便使用模板消息所以我就全局引用了，在main.js加上这句

import {wxSubscribe} from '@s-a/js/wxSubscribe'

然后在对应需要加载开放标签的页面，直接在created里面，调用这个公共函数就可以了

created() {
    this.wxSubscribe();
  },

4.因为这个需求是后期添加的，所以我只是修改样式变成透明的覆盖在原样式上，具体样式根据你的实际情况修改，如下样式仅作为参考：

<div class="weapp-box">
            <div class="real-box" style="display: flex; align-items: center">
              <div class="icon">
                <img :src="item.icon" alt />
              </div>
              <div class="name">{{ item.name }}</div>
            </div>
            <wx-open-launch-weapp
              v-if="item.id == 'xxzs' || item.id == 'xysc'"
              style="
                width: 100%;
                z-index: 2;
                height: 100%;
                position: absolute;
                top: 0;
              "
              :username="
                item.id == 'xxzs' ? 'gh_c99fcc7337ea' : 'gh_c6cf00508f89'
              "
              id="launch-btn"
            >
              <script type="text/wxtag-template">
                <style>
                    .btn2 {
                        border: none;
                        opacity: 0;
                        left:0;
                        right:0;
                        bottom:0;
                </style>
                <button class="btn2"></button>
              </script>
            </wx-open-launch-weapp>
          </div>