vue3——H5页面调起微信订阅通知

<!--
 * @Description: 
 * @Author: Southern Wind
 * @Date: 2024-02-27 19:46:10
 * @LastEditTime: 2024-04-08 11:34:49
 * @FilePath: \h5\src\views\Index\Index.vue
-->
<script lang='ts' setup>
import wx from "weixin-js-sdk";
import { UserService } from "@/api/api";
import { onMounted, reactive, ref } from "vue";

onMounted(() => {
  // login()
  const load = async () => {
    const res: any = await UserService.getjssign({ url: location.href });
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.data.data.appId, // 必填，公众号的唯一标识
      timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
      signature: res.data.data.signature, // 必填，签名
      jsApiList: [],
      openTagList: ["wx-open-subscribe"], // 必填，需要使用的JS接口列表
    });
    console.log(res);

    let btn: any = document.getElementById("subscribe-btn");
    wx.ready(function () {
      btn.addEventListener("success", function (e: any) {
        console.log("success", e.detail);
      });
      btn.addEventListener("error", function (e: any) {
        console.log("fail", e.detail);
        routerBtn()
        
      });
    });
  };
  load();
});

</script>

<template>
  <div class="containers">
    <wx-open-subscribe template="templateID" id="subscribe-btn" >
      <component :is="'script'" type="text/wxtag-template">
        <div class="btn"   style="    text-align: center;
    color: #664502;
    line-height: 45px;
    font-size: 16px;" >
          点击进入
        </div>
      </component>
    </wx-open-subscribe>
  </div>
</template>

<style scoped lang='less'>
.containers {
  width: 100%;
  height: calc(100vh - 92px);
  background: url(../../assets/image/bg1.jpg) no-repeat top center;
  background-size: cover;
  position: relative;

  /*   .cs {
    width: 750px;
    height: 30px;
    background-color: black;
  } */

  #subscribe-btn  {
    position: absolute;
    bottom: 153px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 360px;
    height: 90px;
    text-align: center;
    line-height: 90px;
    background: linear-gradient(-29deg, #ffaf03 22%, #ffde00 100%), #ffc600;
    border-radius: 45px;
    box-shadow: -15px 0px 9px 15px rgba(0, 53, 181, 0.19);
    font-weight: 700;
  }
}

</style>

注意以下几点：

1. 使用pnpm weuxub-js-jdk安装微信依赖
2. url需要传递完整路径，可以使用location.href
3. 标签部分需要后端给templateID
4. wx-open-subscribe标签中的样式需要用内联样式，或者在标签里面使用style进行包裹，不然无法更改自定义样式