微信小程序雲開發-消息推送

一、准備工作

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);
    })  
  }
})

 六、效果展示