Vue-公众号一次性订阅消息

置顶江哦_

已于 2023-06-23 14:55:15 修改

阅读量818

点赞数

文章标签： vue.js 前端 javascript 微信公众平台

于 2023-06-23 14:47:32 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41256253/article/details/131349710

版权

文章讲述了如何在Vue应用中集成微信的订阅消息功能，通过使用wx-open-subscribe标签，并封装成Subscribe.vue组件，实现订阅按钮覆盖在其他组件上方，以解决样式隔离和自适应布局的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考微信的官方文档订阅消息、开放标签

<wx-open-subscribe template='TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I' id='subscribe-btn'>
  <script type="text/wxtag-template" slot="style">
    <style>
      .subscribe-btn {
        color: #fff;
        background-color: #07c160;
      }
    </style>
  </script>
  <script type="text/wxtag-template">
    <button class="subscribe-btn">
      一次性模版消息订阅              
    </button>
  </script>
</wx-open-subscribe>


import wx from "weixin-js-sdk";
async mounted() {
        const res = await config.WxConf({ uri: location.href });
        //这里让用户订阅模板消息， 要到服务器上做才可以
		wx.config({
	      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
	      appId: res.appId , // 必填，公众号的唯一标识
	      timestamp:res.timestamp, // 必填，生成签名的时间戳
	      nonceStr: res.nonceStr, // 必填，生成签名的随机串
	      signature: res.signature,// 必填，签名
	      jsApiList: [], // 必填，需要使用的JS接口列表
	      openTagList: ['wx-open-subscribe'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
		});
		await wx.ready(() => {});
	}

插槽中模板的样式和页面是隔离的，所以不好做自适应布局，不太友好。我希望最终效果是：可以在需要添加订阅功能的组件上面添加透明蒙层(wx-open-subscribe)，宽高刚好覆盖组件，这样就只需要单独给组件编写样式，而不用将样式写在 <script type="text/wxtag-template" slot="style">
在这里插入图片描述

最终代码：
Subscribe.vue

<template>
	<div className='sub-Modal'>
	    <!--插槽中放需要添加订阅的组件 -->
		<slot />
		<wx-open-subscribe template='TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I' id='subscribe-btn'>
			<script type='text/wxtag-template'>
			     <!-- div中必须有内容否则不生效 -->
				<div>订阅</div>
			</script>
		</wx-open-subscribe>
	</div>
</template>

<script>
export default {
  async mounted() {
		wx.config({
	     ...
		});
	}
}
</script>
<style lang="scss" scoped>
.sub-Modal {
	width: max-content;
	height: max-content;
	position: relative;
}
#subscribe-btn {
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}
</style>

给发送按钮添加订阅功能

<Subscribe>
	<div className='w-14 h-8 bg-[#02C160] rounded text-white text-sm flex items-center justify-center'>
	  发送
	</div>
</Subscribe>