uniapp 调用wx-open-subscribe实现微信订阅

文章目录

前提

具体实现代码

注意

---

前提

我们在uniapp写h5时，对微信进行一系列的操作需要依赖 “jweixin-module”，所以首先我们要安装这个库

npm install jweixin-module

 然后新一个配置文件js，然后引入jweixin-module，然后在配置文件里添加引入wx-open-subscribe

import "jweixin-module";
import * as wechatApi from "@/api/wechat-login.js";

export default function (wxData) {
	return new Promise(async function (resolve, reject) {
    const isConfigured = await wechatApi.checkIsAuthorized();

    if (!isConfigured.ok) {
      return;
    }

    const config = await wechatApi.getWechatJsSDKConf({ url: window.location.href });

    uni.setStorageSync('appId', config.appId)

		window.wx.config({
				debug: false,
				...config,
				jsApiList: [
				'wx-open-subscribe',
				'launchAppLication',
				"updateAppMessageShareData",
				"updateTimelineShareData",
				"onMenuShareWeibo",
				],
				openTagList: [
				'wx-open-subscribe',
		]
		});

		window.wx.ready(function () {
			// 微信/QQ好友分享
			wx.updateAppMessageShareData(wxData);

			// 微信朋友圈分享
			wx.updateTimelineShareData(wxData);

			// 分享腾讯微博
			wx.onMenuShareWeibo(wxData);

			resolve(true)
		});



		window.wx.error((res) => {
			console.log("error", res);
			reject(false)
		});
	})
}

 如果你想看有没有引入成功，可以使用微信开发者工具打开，在控制台查看

然后在需要的页面引用 

import shareApi from '@/hooks/shareApi';

shareApi({
  title: '分享标题',
  desc: '分享简介',
  imgUrl: formatUrl(props.goods.cover), // 分享的图片
  link: window.location.href// 分享的链接
}).then((res) => {
  console.log(res)
})

具体实现代码

html代码如下：

<wx-open-subscribe style="width: 146px;" :template="subscribeInf" id="subscribe-btn"
          @success="onSubscribeSuccess" @error="onSubscribeError"  class=" flex flex-col items-center ">
          <component is="script" type="text/wxtag-template" slot="style">
            <component is="style">
              .subscribe-btn {
              color: #fff;
              background-color: #FF4A02;
              width: 100% !important;
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: center;
              font-size: 14px;
              height: 36px;
              padding: 2px 0;
              border: none;
              font-weight: 500;
              font-family: PingFang SC, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Hiragino Sans GB,
              Microsoft YaHei UI, Microsoft YaHei, Arial, sans-serif;
              }
              .text-10 {
              font-size: 12px;
              transform: scale(0.83333);
              transform-origin: 0 0;
              font-weight: 400;
              }
            </component>
          </component>
          <component is="script" type="text/wxtag-template">
            <span :class="active.status ? 'bg-FF4B02' : 'bg-C9CDD4'"
              class="subscribe-btn pay-foot-right-last flex flex-col items-center justify-around font-500 w-full">
              立即开团
              <span class="text-10 font-400">
                ￥20
              </span>
            </span>
          </component>
</wx-open-subscribe>

javascript代码如下：

const reg = /accept/;

const onSubscribeSuccess = (e) => {
  console.log('订阅弹窗选择完毕');

    const subscribeDetails = e.detail.subscribeDetails;

    // 判断是否点击确定
   if (reg.test(subscribeDetails)) {
        conosle.log('点击了确定')
   }
}

const onSubscribeError = () => {
  console.log('出现错误');
}

//订阅消息的ID
const subscribeInf = ref('')

//将标识传给后端来获取订阅消息所需要的ID
const getwxID = async () => {
  const data = await getSubscribeInf({ keys: '订阅标识' })
  subscribeInf.value = data
}

注意

• 要确定微信配置是正确的
• 要确定微信订阅消息的ID是正确的