一、准备工作
1、开通订阅消息
进入微信公众平台（地址：https://mp.weixin.qq.com/），进入小程序【管理后台】>【功能】>【订阅消息】>开通。
2、申请推送模板
进入小程序【订阅消息】>【公共模板库】，搜索选择自己需要订阅的消息模板，一个小程序可以订阅多个消息模板。
二、获取用户openid
1、创建云函数，命名为getOpenid（用于获取用户的openid）
2、云函数的代码
1 // 云函数入口文件 2 const cloud = require(\'wx-server-sdk\') 3 4 //cloud.init() 5 //环境变量初始化 6 cloud.init({ 7 evn:cloud.DYNAMIC_CURRENT_ENV //标志当前所在环境 8 }) 9 // 云函数入口函数 10 exports.main = async (event, context) => { 11 const wxContext = cloud.getWXContext() 12 13 return { 14 event, 15 openid: wxContext.OPENID, //获取用户openid 16 appid: wxContext.APPID, 17 unionid: wxContext.UNIONID, 18 } 19 }
3、创建小程序页面
4、调用云函数，获取用户的openid（console.log打印出来）
- MessagePush.wxml
1 <!-- 获取用户openid --> 2 <button bindtap="getOpenid">获取用户openid</button>
- MessagePush.js
1 Page({ 2 //获取用户的openid 3 getOpenid(){ 4 wx.cloud.callFunction({ 5 name:"getOpenid" 6 }).then(res=>{ 7 console.log("获取openid成功",res); 8 }).catch(err=>{ 9 console.log("获取openid失败",err); 10 }) 11 },12 })
三、获取用户授权
MessagePush.wxml
1 <!-- 获取用户授权 --> 2 <button bindtap="getAuthorization">获取用户授权</button>
MessagePush.js
1 //获取用户消息推送授权 2 getAuthorization(){ 3 wx.requestSubscribeMessage({ 4 tmplIds: ["nITTI4zOSJy3C7EtabjhYjWNkf9OrZ9p5cJQaOpNPYw"], //所选模板的模板ID,可以有多个 5 }).then(res=>{ 6 console.log("获取消息推送授权成功",res); 7 }).catch(err=>{ 8 console.log("获取消息推送授权失败",err); 9 }) 10 },
四、创建发送消息的云函数
1、创建发送消息的云函数sendMessage
云函数的index.js代码
注意：云函数的编写要根据模板中的内容来写
五、发送消息给用户
包括发送消息给单个用户和发送消息给多个用户（此为示例讲解），整体代码：
- 云函数的代码
- 云函数getOpenid（用来获取用户的openid）
1 // 云函数入口文件 2 const cloud = require(\'wx-server-sdk\') 3 4 //cloud.init() 5 //环境变量初始化 6 cloud.init({ 7 evn:cloud.DYNAMIC_CURRENT_ENV //标志当前所在环境 8 }) 9 // 云函数入口函数 10 exports.main = async (event, context) => { 11 const wxContext = cloud.getWXContext() 12 return { 13 event, 14 openid: wxContext.OPENID, //获取用户openid 15 appid: wxContext.APPID, 16 unionid: wxContext.UNIONID, 17 } 18 }
2.云函数sendMessage（用来发送商品秒杀的订阅消息）
1 // 云函数入口文件 2 const cloud = require(\'wx-server-sdk\') 3 4 cloud.init({ 5 env: cloud.DYNAMIC_CURRENT_ENV 6 }) 7 8 // 云函数入口函数 9 exports.main = async(event, context) => { 10 try { 11 const result = await cloud.openapi.subscribeMessage.send({ 12 touser: event.openid, //要推送给那个用户 13 page: \'pages/index/index\', //要跳转到那个小程序页面 14 data: { //推送的内容 15 thing1: { 16 value: event.name //商品名称 17 }, 18 time2: { 19 value: event.time //秒杀时间 20 }, 21 thing3: { 22 value: event.remark //温馨提示 23 } 24 }, 25 templateId: \'nITTI4zOSJy3C7EtabjhYjWNkf9OrZ9p5cJQaOpNPYw\' //模板id(示例为商品秒杀的消息推送模板)，模板ID要与授权的模板ID一致 26 }) 27 console.log(result) 28 return result 29 } catch (err) { 30 console.log(err) 31 return err 32 } 33 }
- 小程序页面的代码
- MessagePush.wxml
1 <view>秒杀活动的消息推送</view> 2 <!-- 获取用户openid --> 3 <button bindtap="getOpenid" type="primary">获取用户openid</button> 4 <!-- 获取用户授权 --> 5 <button bindtap="getAuthorization" type="primary">获取用户授权</button> 6 <!-- 获取用户输入的 --> 7 <input type="text" placeholder="请输入商品名称" bindinput="getName" ></input> 8 <input type="text" placeholder="请输入秒杀时间" bindinput="getTime"></input> 9 <input type="text" placeholder="请输入温馨提示" bindinput="getRemark"></input> 10 <!-- 发送消息给单个用户 --> 11 <button bindtap="sendMsgToOne" type="primary">发送消息给单用户</button> 12 <!-- 发送消息给多个用户 --> 13 <button bindtap="sendMsgToAll" type="primary">发送消息给多用户</button>
2.MessagePush.wxss
1 button{ 2 margin-top: 20rpx; 3 } 4 5 input{ 6 margin-top: 20rpx; 7 border: 1rpx solid #c3c3c3; 8 height: 80rpx; 9 width: 80%; 10 margin: 20rpx auto ; 11 }
3.MessagePush.js
1 //自定义变量，存储获取的openid 2 let openid = \'\' 3 //自定义变量，存储用户输入的商品名称/秒杀时间/温馨提示 4 let name = \'\' 5 let time = \'\' 6 let remark = \'\' 7 Page({ 8 9 //获取用户的openid 10 getOpenid(){ 11 wx.cloud.callFunction({ 12 name:"getOpenid" 13 }).then(res=>{ 14 console.log("获取openid成功",res); 15 openid = res.result.openid 16 console.log("获取的openid为",openid); 17 }).catch(err=>{ 18 console.log("获取openid失败",err); 19 }) 20 }, 21 22 //获取用户消息推送授权 23 getAuthorization(){ 24 wx.requestSubscribeMessage({ 25 tmplIds: ["nITTI4zOSJy3C7EtabjhYjWNkf9OrZ9p5cJQaOpNPYw"], //所选模板的模板ID,可以有多个 26 }).then(res=>{ 27 console.log("获取消息推送授权成功",res); 28 }).catch(err=>{ 29 console.log("获取消息推送授权失败",err); 30 }) 31 }, 32 //获取用户输入的内容 33 getName(e){ 34 console.log("用户输入的商品名称",e); 35 name = e.detail.value 36 console.log(name); 37 }, 38 getTime(e){ 39 console.log("用户输入的秒杀时间",e); 40 time = e.detail.value 41 console.log(time); 42 }, 43 getRemark(e){ 44 console.log("用户输入的温馨提示",e); 45 remark = e.detail.value 46 console.log(remark); 47 }, 48 49 //发送订阅消息给单个用户 50 sendMsgToOne(){ 51 if(name==null||name==\'\'){ 52 wx.showToast({ 53 title: \'请输入商品名称\', 54 icon:"none" 55 }) 56 return 57 } 58 this.sendMsg(openid,name,time,remark); //调用自封装方法发送消息 59 }, 60 61 //发送订阅消息给多个用户 62 sendMsgToAll(){ 63 if(name==null||name==\'\'){ 64 wx.showToast({ 65 title: \'请输入商品名称\', 66 icon:"none" 67 }) 68 return 69 } 70 let users = ["oWzSH4jwGKmvNajQXjmfGa4j8XF8","otvxTs4dckWG7imySrJd6jSi0CWE"] //两个openid的示例 71 users.forEach(openid=>{ 72 console.log("多个用户",openid); 73 this.sendMsg(openid,name,time,remark) 74 }) 75 }, 76 77 //封装方法，发送商品秒杀的订阅消息 78 sendMsg(openid,name,time,remark){ 79 wx.cloud.callFunction({ 80 name:"sendMessage", //调用发送消息的云函数 81 data:{ 82 openid:openid , //openid是要传给云函数的参数 83 name:name, 84 time:time, 85 remark:remark 86 } 87 }).then(res=>{ 88 console.log("发送消息成功",res); 89 }).catch(err=>{ 90 console.log("发送消息失败",err); 91 }) 92 } 93 })
六、效果展示
