微信小程序云开发-消息推送

一、准备工作

1、开通订阅消息

进入微信公众平台（地址：https://mp.weixin.qq.com/），进入小程序【管理后台】>【功能】>【订阅消息】>开通。

2、申请推送模板

进入小程序【订阅消息】>【公共模板库】，搜索选择自己需要订阅的消息模板，一个小程序可以订阅多个消息模板。

 

二、获取用户openid

1、创建云函数，命名为getOpenid（用于获取用户的openid）

 2、云函数的代码

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

//cloud.init()
//环境变量初始化 
cloud.init({
  evn:cloud.DYNAMIC_CURRENT_ENV   //标志当前所在环境
})
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID, //获取用户openid
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

3、创建小程序页面

 4、调用云函数，获取用户的openid（console.log打印出来）

•  MessagePush.wxml

<!-- 获取用户openid -->
<button bindtap="getOpenid">获取用户openid</button>

• MessagePush.js

Page({
  //获取用户的openid
  getOpenid(){
    wx.cloud.callFunction({
      name:"getOpenid"
    }).then(res=>{
      console.log("获取openid成功",res);
    }).catch(err=>{
      console.log("获取openid失败",err);
    })
  },12 })

 

三、获取用户授权

MessagePush.wxml

 <!-- 获取用户授权 -->
 <button bindtap="getAuthorization">获取用户授权</button>

MessagePush.js

  //获取用户消息推送授权
  getAuthorization(){
    wx.requestSubscribeMessage({
      tmplIds: ["nITTI4zOSJy3C7EtabjhYjWNkf9OrZ9p5cJQaOpNPYw"],   //所选模板的模板ID,可以有多个
    }).then(res=>{
      console.log("获取消息推送授权成功",res);
    }).catch(err=>{
      console.log("获取消息推送授权失败",err);
    })
  },

 

 

 

 

 

 

四、创建发送消息的云函数

1、创建发送消息的云函数sendMessage

 云函数的index.js代码

注意：云函数的编写要根据模板中的内容来写

 

五、发送消息给用户

包括发送消息给单个用户和发送消息给多个用户（此为示例讲解），整体代码：

• 云函数的代码

1. 云函数getOpenid（用来获取用户的openid）

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

//cloud.init()
//环境变量初始化 
cloud.init({
  evn:cloud.DYNAMIC_CURRENT_ENV   //标志当前所在环境
})
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    event,
    openid: wxContext.OPENID, //获取用户openid
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

　　2.云函数sendMessage（用来发送商品秒杀的订阅消息）

// 云函数入口文件
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: { //推送的内容
        thing1: {
          value: event.name     //商品名称
        },
        time2: {
          value: event.time     //秒杀时间
        },
        thing3: {
          value: event.remark   //温馨提示
        }
      },
      templateId: 'nITTI4zOSJy3C7EtabjhYjWNkf9OrZ9p5cJQaOpNPYw' //模板id(示例为商品秒杀的消息推送模板)，模板ID要与授权的模板ID一致
    })
    console.log(result)
    return result
  } catch (err) {
    console.log(err)
    return err
  }
}

• 小程序页面的代码

1. MessagePush.wxml

<view>秒杀活动的消息推送</view>
<!-- 获取用户openid -->
<button bindtap="getOpenid" type="primary">获取用户openid</button>
<!-- 获取用户授权 -->
<button bindtap="getAuthorization" type="primary">获取用户授权</button>
<!-- 获取用户输入的 -->
<input type="text" placeholder="请输入商品名称" bindinput="getName" ></input>
<input type="text" placeholder="请输入秒杀时间" bindinput="getTime"></input>
<input type="text" placeholder="请输入温馨提示" bindinput="getRemark"></input>
<!-- 发送消息给单个用户 -->
<button bindtap="sendMsgToOne" type="primary">发送消息给单用户</button>
<!-- 发送消息给多个用户 -->
<button bindtap="sendMsgToAll" type="primary">发送消息给多用户</button>

　　2.MessagePush.wxss

button{
  margin-top: 20rpx;
}

input{
  margin-top: 20rpx;
  border: 1rpx solid #c3c3c3;
  height: 80rpx;
  width: 80%;
  margin: 20rpx auto ;
}

　　3.MessagePush.js

//自定义变量，存储获取的openid
let openid = ''
//自定义变量，存储用户输入的商品名称/秒杀时间/温馨提示
let name  = ''
let time  = ''
let remark = ''
Page({
  
  //获取用户的openid
  getOpenid(){
    wx.cloud.callFunction({
      name:"getOpenid"
    }).then(res=>{
      console.log("获取openid成功",res);
      openid = res.result.openid
      console.log("获取的openid为",openid);
    }).catch(err=>{
      console.log("获取openid失败",err);
    })
  },

  //获取用户消息推送授权
  getAuthorization(){
    wx.requestSubscribeMessage({
      tmplIds: ["nITTI4zOSJy3C7EtabjhYjWNkf9OrZ9p5cJQaOpNPYw"],   //所选模板的模板ID,可以有多个
    }).then(res=>{
      console.log("获取消息推送授权成功",res);
    }).catch(err=>{
      console.log("获取消息推送授权失败",err);
    })
  },
  //获取用户输入的内容
  getName(e){
    console.log("用户输入的商品名称",e);
    name = e.detail.value
    console.log(name);
  },
  getTime(e){
    console.log("用户输入的秒杀时间",e);
    time = e.detail.value
    console.log(time);  
  },
  getRemark(e){
    console.log("用户输入的温馨提示",e);
    remark = e.detail.value
    console.log(remark);  
  },

  //发送订阅消息给单个用户
  sendMsgToOne(){
    if(name==null||name==''){
      wx.showToast({
        title: '请输入商品名称',
        icon:"none"
      })
      return
    }
    this.sendMsg(openid,name,time,remark);  //调用自封装方法发送消息
  },

  //发送订阅消息给多个用户
  sendMsgToAll(){
    if(name==null||name==''){
      wx.showToast({
        title: '请输入商品名称',
        icon:"none"
      })
      return
    }
    let users = ["oWzSH4jwGKmvNajQXjmfGa4j8XF8","otvxTs4dckWG7imySrJd6jSi0CWE"]   //两个openid的示例
    users.forEach(openid=>{
      console.log("多个用户",openid);
      this.sendMsg(openid,name,time,remark)
    })
  },

  //封装方法，发送商品秒杀的订阅消息
  sendMsg(openid,name,time,remark){
    wx.cloud.callFunction({
      name:"sendMessage",     //调用发送消息的云函数
      data:{
        openid:openid ,  //openid是要传给云函数的参数
        name:name,
        time:time,
        remark:remark
      }
    }).then(res=>{
      console.log("发送消息成功",res);
    }).catch(err=>{
      console.log("发送消息失败",err);
    })  
  }
})

 六、效果展示