小程序订阅消息的创建与发送

微信小程序订阅消息

一、模板选择

• 打开登录微信小程序的平台

• 在左侧面板中找到功能->订阅消息

• 从我的模板页面点击 选用按钮，进入到公共订阅消息模板页面

• 搜索自己所需的提醒消息模板，点击选用按钮，进入到通知消息各项调整页面

• 左侧为订阅消息预览，右侧为映射的数据项

• 勾选完毕，并填写好场景说明即可生成自己所需的模板
  

• 在我的模板页面，可以点击详情，查看当前模板的信息，包括模板ID、数据项 ，这两项是代码配置中需要用到的

• 详细内容项，请见本文最后一份代码提示

二、代码实现

忽略云开发细节

1、获取用户openid（可以耦合在发送消息云函数里面，但这里我拆分出来）

• 订阅消息的发送，是以用户的openid为target，指定发送给某个用户
• 云函数：getOpenId 云函数的创建需要上传部署，改动可以使用增量上传更新

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 业务代码中获取openid的方法，res.result.openid就是当前用户的openid

getOpenId: function (e) {
    wx.cloud.callFunction({
      name: 'getOpenId' // 上文中的云函数名
    }).then(res => {
      console.log("获取openid成功", res.result.openid)
    }).catch(err => {
      console.log("获取openid失败", err)
    })
  },
1
2
3
4
5
6
7
8
9

• 可以存为data，在发送消息时作为参数传递

2、触发消息订阅

• 消息订阅是小程序端请求用户授权的操作
• 对应的API是：wx.requestSubscribeMessage({ tmplIds: ['消息模板id1'] })
• 可以看到模板id是一个数组格式，那就意味着可以请求用户授权多个消息模板
• 在业务代码中请求授权：

 subscribeMsg: function (e) {
    wx.requestSubscribeMessage({
      tmplIds: ['填上选用的模板id'],
      success(res) {
        console.log("订阅成功", res)
      },
      fail(err) {
        console.log("订阅失败", err)
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11

• 授权失败情况：我的模板中未选用id
  
• 订阅成功：编辑器端效果示例（此处可以自行使用真机预览效果）
  

3、订阅结果查询

• 无论用户点击了上图中的【取消】 还是 【允许】
• wx.requestSubscribeMessage这个API都会提示调用成功
• 结果获取：res中模板id作为key的值，分为：reject、accept
• 这里的图片只作为展示结果用，模板id与上下文无关
  
  

4、订阅消息发送

• 在用户点击了【允许】后，执行发送订阅消息逻辑
• 这里将发送逻辑写在云函数中
• 业务代码中，调用云函数，将openid和模板id作为参数传递

send2one: function (e) {
	let that = this;
    wx.cloud.callFunction({
      name: 'sendSubscribeMsg',
      data: {
        openid: 'xxxxxxxxxx', // 测试的时候，可以直接写死openid
        tmplid: 'xxxxxxxxxx',
      }
    }).then(res => {
      console.log("发送给单个用户成功", res)
    }).catch(err => {
      console.log("发送给单个用户失败", err)
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 云函数：sendSubscribeMsg，需要参数：当前用户openid
• 需要注意的是：发送的订阅消息的数据结构必须和选用的模板字段key一致！！！

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.subscribeMessage.send({
      touser: event.openid,
      page: 'pages/index/index',
      data: {
        date1: {  // 对应模板中第一个key
          value: '2022年07月19日'
        },
        phrase2: { // 对应模板中第二个key
          value: '广州'
        }
      },
      "templateId": event.tmplid,
      "miniprogramState": 'developer'
    })
    return result.errCode;
  } catch (err) {
    return err
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

• 部署好云函数后，就可以真机预览操作来见证订阅消息的来到了