微信小程序实现消息推送效果

                                                           消息推送效果效果图

步骤一：

1.1 创建一个小程序 https://mp.weixin.qq.com/wxopen/waregister?action=step1&source=mpregister&token=&lang=zh_CN 
注：一个邮箱只能创建一个小程序
1.2 完善小程序基本信息
1.3 完善小程序类目，不要创建游戏类目，我这里创建的是商业服务 > 企业管理 
1.4 记录自己的AppID和AppSecret，密钥需要生成，不明文记录

步骤二：

2.1 在hbuilder中新建一个uni-app项目，默认模板即可，vue版本选择3(但生成的项目是vue2的composition API格式，我就接着用了)
2.2 去功能/订阅消息中订阅消息，首先启用该功能，去公共模块库中按需选用一些模块，如果没有也可自己定义模板，但需要3-5日审核
2.3 下载微信开发者工具，在uni-app的manifest.json文件中的微信小程序配置中，输入微信小程序AppID(关联微信小程序)，运行到微信开发者工具
2.4 在pages/index/index.vue中
    2.4.1 template结构
        <view class="container">
            <button class="btn" @click="subscribe()">测试1</button>
        </view>
    2.4.2 核心代码script标签中，在下面单独写，这一部分内容要结合uni-app官方文档，以便理解，要使用真机预览小程序，否则会有一些坑（效果不一样，一次性只能订阅一个消息，而真机最多可以订阅三个等） 

<script>
	export default {
		data() {
			return {
                // 在data中定义这三个字段，后面需要使用，tmplIds是一个数组，里面存放的是模板ID，这个例子就存放一个模板ID
				tmplIds: ["xxxxxxxxxx"],
				appid: "xxxxxxxxxx",
				secret: "xxxxxxxxxx"
			}
		},
		methods: {
            // 这里要使用普通函数，否则this指向window，后面自己注意this指向
			subscribe: async function() {
                // 现在消息推送的前提是需用户点击按钮或支付回调里触发弹出授权消息框，现在只有这两种方式
                // uni.requestSubscribeMessage的使用（https://uniapp.dcloud.net.cn/api/other/requestSubscribeMessage.html#requestsubscribemessage）
				uni.requestSubscribeMessage({
					tmplIds: this.tmplIds,
					success: (res) => {
						if (res[this.tmplIds] === "accept") {
							this.sendMsg()
						}
					},
					fail(err) {
						console.log("订阅消息失败:", err);
					}
				})
			},
			async sendMsg() {
				const js_code = await this.getJsCode()
				const openid = await this.getOpenId(js_code)
				const access_token = await this.getAccessToken()
				// 使用uni.request()调用订阅信息的接口（https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-message-management/subscribe-message/sendMessage.html）
				uni.request({
					url: `https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=${access_token}`,
					method: 'POST',
					data: {
						touser: openid,
						template_id: this.tmplIds[0],
						page: "pages/index/index",
						lang: "zh_CN",
						access_token,
						miniprogram_state: "formal",
                        // data是模板内容，属性名为模板中所给，value值是需要传递的
						data: {
							character_string1: {
                                value: "TDPO-20000428-0001"
                            },
                            thing2: {
                                value: "XXX有限公司"
                            },
                            thing3: {
                                value: "王某某"
                            },
                            number4: {
                                value: "1"
                            },
                            thing5: {
                                value: "未找到车辆"
                            },
						}
					},					
				})
			},
			getJsCode() {
				return new Promise((resolve, reject) => {
                    // 通过uni.login获取用户登录凭证code（有效期五分钟），用于获取openid
					uni.login({
						timeout: 3000,
						success(res) {
							resolve(res.code)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			getOpenId(js_code) {
				return new Promise((resolve, reject) => {
                    // 通过调用code2Session（https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-login/code2Session.html）获取openid
					uni.request({
						url: `https://api.weixin.qq.com/sns/jscode2session`,
						data: {
							appid: this.appid,
							secret: this.secret,
							js_code: js_code,
							grant_type: 'authorization_code'
						},
						success: (res) => {
							resolve(res.data?.openid)
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},
			getAccessToken() {
				return new Promise((resolve, reject) => {
                    // 获取接口调用凭据（https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html）
					uni.request({
						url: 'https://api.weixin.qq.com/cgi-bin/token',
						data: {
							appid: this.appid,
							secret: this.secret,
							grant_type: 'client_credential'
						},
						success: (res) => {
							resolve(res.data.access_token)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			}
		}
	}
</script>

                                                                 模板内容