天天看點

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

一.什麼是訂閱消息

微信裡有一個服務通知,我們經常收到的各種消息,就是通過訂閱消息進行發送的,訂閱消息分為二種:

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

進一步了解跳轉到官方文檔中去學習吧官方解釋

二.在小程式中使用訂閱消息

業務:使用者點選按鈕,我們傳回使用者如下資訊:

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

2.1第一步:建立模闆

1.進入到小程式官網首頁,點選訂閱消息

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

公共模闆>任務模闆>選擇紅框框裡的哪一個>選用

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

選擇參數,下面的場景說明也要填寫,然後送出

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

注意模闆ID是一個很重要的參數,點選詳情

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

進行詳情頁面,記住thing1和thing2參數【模闆不一樣參數名也不一樣】

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

2.2 第二步:建立雲服務

由于我已經建立過雲服務的環境了,這裡可能有點不一樣但是,大概過程差不多

進行微信小程式開發工具裡>雲開發

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

編寫環境名稱,和支付方式

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

這裡注意一下按量收費,我使用的是預付費,用的免費套餐,但是免費套餐現在一天可通路人數為500有點坑:

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述
微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

找到自己的環境ID

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

2.3 第三步:雲服務項目配置

第一個app.js中進行配置

//雲資料
wx.cloud.init({
  env:"你的環境ID"
})
           
微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

然後建立紅框框裡的三個檔案

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

第一個檔案建立方式為,箭頭指向的檔案夾,點選建立檔案夾名為cloud

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

另外二個建立方式如下:檔案名分别對應:getopenid,sendmessage

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

getopenid裡面關心紅框框裡的即可:

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

,這裡的DYNAMIC_CURRENT_ENV其實就是環境id隻是動态的擷取環境Id

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

getopenid檔案就是擷取openid,這個openid可以了解為使用者家的位址,我要給使用者發消息肯定要知道該使用者家在哪裡吧

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

index.js内容如下:

// 雲函數入口檔案
const cloud = require('wx-server-sdk')

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

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

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}
           
微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

sendmessage裡,主要關心紅框框裡的内容:

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述
// 雲函數入口檔案
const cloud = require('wx-server-sdk')

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

// 雲函數入口函數
exports.main = async (event, context) => {
  try{
    let  tmplId='模闆ID'
    let index='pages/index/index'
    const result = await cloud.openapi.subscribeMessage.send({
       touser: event.openId,
       page: index,
       data: {
          thing1: {
            value:event.thing1
        },
        thing2: {
          value:event.thing2
        }
      },
      templateId: 模闆ID
    })
  return result
  }catch(err){
    console.log(err)
      return err
  }

}
           
微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述
微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

裡面的參數一定要填對!

上面的配置完了就上傳到雲服務中去!

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

部署完之後就是通過雲服務進行檢視是否上傳成功!

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

2.3 第三步:項目使用訂閱消息

在utils中建立一個messagepush.js檔案

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

這裡的send就是用來發送消息的函數,實作方式就三步

  • 進行授權
  • 擷取openid
  • 進行發送

具體操作看源碼,解釋查找官方文檔:

  • 詳見小程式端消息訂閱接口wx.requestSubscribeMessage
  • 詳見服務端消息發送接口 subscribeMessage.send
function send(thing1,thing2){
  //【1】進行授權
  let  tmplId='Xl-JeelQZqmAWcUy9VlyDc7eWy2HoPTdenK4pbr1V4w'
  wx.requestSubscribeMessage({
    tmplIds: [tmplId],
    success (res) { 
      console.log('授權成功',res)
      //【2】擷取openid
      wx.cloud.callFunction({
        name:'getopenid'
      }).then(res=>{
        //【3】進行發送
        wx.cloud.callFunction({
          name:'sendmessage',
          data:{
            openId:res.result.openid,
            thing1:thing1,
            thing2:thing2
          }
        }).then(res=>{
        console.log('發送成功',res)
        }).catch(res=>{
        console.log('發送失敗',res)
        }) 
      }).catch(res=>{
        console.log("擷取失敗",res)
      })
    },fail(res){
      console.log('授權失敗',res)
    }
  })

}


module.exports = {
  send: send
}
           

小程式中建立一個buttion的按鈕:

在點選事件中,調用send方法進行發送消息即可

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述
微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述
微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

最後運作效果:

微信小程式訂閱消息:用雲服務編寫訂閱消息超較長的描述

繼續閱讀