详细步骤跳转vite+ts+uniapp设置公众号网页的分享与隐藏-CSDN博客

概述：配置wx.config之后使用官方给的订阅组件即可

第一步:下载js-sdk依赖包

npm i weixin-js-sdk

第二步：配置config

openTagList: ["wx-open-subscribe"],//订阅组件（主要配置）

import wx from "weixin-js-sdk";
onLaunch(() => {
  // 微信公众号config配置只需在入口文件app.vue配置一次即可
  wxConfigHandler();
});
 
function wxConfigHandler() {
  // config里面的配置信息一般需要后端的接口获取
  uni.request({
    url: "替换成自己项目接口",
    method: "get",
    data: {
      url: getCurrentUrl(),
    },
    success: function (res) {
      const data = res.data.data;
 
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名
        jsApiList: data.jsApiList, // 必填，需要使用的JS接口列表
         openTagList: ["wx-open-subscribe"],//订阅组件
      });
    },
    fail: function (err) {
      console.log(err);
    },
  });
}
// 获取当前页面URL（官网要求要动态获取页面路径config配置才能生效）
function getCurrentUrl() {
  return window.location.href.split("#")[0]; // 移除hash部分
}

第三步：使用

HTML部分

注意：必须使用px，使用rpx不生效

<view class="pop_btn_item btn_item1" v-if="subscribe">
        <wx-open-subscribe
          template="9SYqoZRxl_Z1Qw74WzNPux05CB6TvLdqXk05hWKUHZQ"
          id="subscribe-btn"
          @error="onSubscribeError"
          @success="onSubscribeSuccess"
          style="width: 100%"
        >
          <component :is="'script'" type="text/wxtag-template">
            <component :is="'style'">
              .btn{ width: 100%;padding:10px 0;display: flex;
              justify-content:center;align-content: center} .subscribe-btn{
              width: 100%;color: #000;font-weight:700;font-size:14px;
              text-align: center;}
            </component>
          </component>
          <component :is="'script'" type="text/wxtag-template">
            <div class="btn">
              <button class="subscribe-btn">新增提醒</button>
            </div>
          </component>
        </wx-open-subscribe>
      </view>

TS部分

onSubscribeSuccess函数无论用户拒绝还是同意都会执行,可以根据status状态来执行不同的业务逻辑。

onSubscribeError函数是组件出错的时候才会执行。

const onSubscribeSuccess = (e) => {
  let subscribeDetails = JSON.parse(e.detail.subscribeDetails); // 全部的模板
  for (let i in subscribeDetails) {
    let subKey = subscribeDetails[i]; // 获取每个模板的状态
    let status = JSON.parse(subKey);
    console.log("success:状态：", status.status);
    switch (status.status) {
      case "reject":
        console.log(`用户拒绝订阅消息`)
        break;
      case "cancel":
        console.log(`用户取消订阅消息`)
        break;
      case "filter":
        console.log(`第${i}条消息应该标题同名被后台过滤`)
        break;
      default:
        // 用户同意订阅执行业务逻辑
        break;
    }
  }
};

const onSubscribeError = (err) => {
  uni.showModal({
    title: err,
  });
  console.log("出现错误");
};

Tip：

订阅组件只能使用真机测试，使用微信开发者工具无法测试，微信开发者工具会显示“糖糖糖糖糖”