关注公众号

刀刀

12/30/2024

0 字

0 分钟

客户提出需求：本项目中的提现功能需要用户关注公众号，只有关注了公众号后才能提现佣金。

思路

首先需要判断用户是否关注了公众号，这里后端写好了一个接口，通过调用接口获取用户关注公众号的数据；如果用户没有关注公众号，则返回 null 。

接着需要引导用户关注公众号，这里有几个实现思路：

贴上公众号二维码让用户自行复制图片长按识别二维码
小程序官方提供的公众号关注组件 official-account
给予公众号名称让用户搜索关注
客服消息
通过为按钮组件设置类型为客服类型，开启会话内信息卡片 show-message-card （注意只有 open-type="contact" 时有效），效果如下图所示：

条件

本案例实现方式为第二点，通过官网提供的关注公众号组件。官网指路 official-account 。

根据官网描述，关注公众号组件显示场景如下：

公众号关注组件。当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内。

小程序场景值命中以下值时，可展示关注公众号组件：

1011 扫描二维码
1017 前往小程序体验版的入口页
1025 扫描一维码
1047 扫描小程序码
1124 扫“一物一码”打开小程序

小程序热启动场景值命中以下值时，冷启动场景值在【1011、1017、1025、1047、1124】中，可展示关注公众号组件：

1001 发现栏小程序主入口，「最近使用」列表
1038 从另一个小程序返回
1041 从插件小程序返回小程序
1089 微信聊天主界面下拉，「最近使用」栏
1090 长按小程序右上角菜单唤出最近使用历史
1104 微信聊天主界面下拉，「我的小程序」栏
1131 浮窗
1187 新版浮窗，微信8.0起

微信开发工具调试需要修改编译条件，如下所示：

注意

在使用组件前，需要前往小程序后台，在“设置”->“关注公众号”中设置要展示的公众号。

实现

复制组件粘贴到 .vue 组件中，调用接口判断用户是否关注了公众号。当用户点击关注按钮后重新调用接口刷新关注状态，隐藏该组件。

vue

<template>
	<official-account v-if="!follow" @load="bindload" class="official-account"></official-account>
</template>

<script>
	userFollowFn() {
		this.$u.api.MineApi.userFollowApi().then(res => {
			this.follow = res.data
		})
	}
</script>

问题一：关注公众号没有点击确定按钮的回调，如何判断用户何时点击确定或取消。

我们需要在用户点击确定或取消后判断用户是否关注了公众号，关注了之后才隐藏关注公众号组件。但是为了防止小程序恶意让用户关注公众号，没有推出回调函数确定或取消按钮的回调。

通过百度查询，发现点击了确定或取消按钮后会触发 onShow 生命周期回调函数，因此可以在 onShow 上调用一次接口即可。

问题二：触发 onShow 后立即调用接口数据不是最新的值，退出页面再进入才是最新的值。

这是因为后端接口那边也需要时间去更新最新状态，因此可以加一个延时器调用接口即可。

vue

<template>
	<official-account v-if="!follow" @load="bindload" class="official-account"></official-account>
</template>

<script>
	export default {
		onShow() {
			if(!this.follow) {
				setTimeout(() => {
					this.userFollowFn()
				}, 5000)
			}
		},
		methods: {
			// 判断用户是否关注公众号
			userFollowFn() {
				this.$u.api.MineApi.userFollowApi().then(res => {
					this.follow = res.data
				})
			},
		}
	}
</script>

关注公众号 ​

思路 ​

条件 ​

实现 ​

关注公众号

思路

条件

实现