藉助雲開發實現小程序訂閱消息(模板消息)推送功能

以前的模板消息推送,將在2020年1月10日下線,因此咱們不得不使用訂閱消息了。html

咱們先來看下訂閱消息的官方簡介。

接下來咱們就來藉助雲開發,來快速實現小程序消息推送的功能。編程

一:獲取模板 ID

這一步和咱們以前的模板消息推送是同樣的,也是先添加模板,而後拿到模板id

首先是開通訂閱消息功能,很簡單,以下圖

因爲長期性訂閱消息,目前僅向政務民生、醫療、交通、金融、教育等線下公共服務開放,後期將逐步支持到其餘線下公共服務業務。僅就線下公共服務這一點,長期性訂閱消息就和大部分開發者無緣了。
因此咱們這裏只能以使用一次性訂閱消息爲例。

如上圖,咱們從公共模板庫裏選擇一個一次性訂閱的模板。而後編輯模板以下圖

下圖就是咱們添加好的模板,下圖的模板id就是咱們須要的。
 json

二,請求用戶受權

咱們作訂閱消息受權時,只能是用戶點擊或者支付完成後才能夠調起來受權彈窗,官方是這麼要求的:

咱們這裏用到了wx.requestSubscribeMessage這個方法,來獲取用戶的受權。小程序

  • 1,編寫index.wxml代碼
  • 2,編寫index.js代碼,實現點擊獲取受權

    這一步tmplIds裏的一串字符,就是咱們本身添加的模板id
  • 3,點擊按鈕運行效果以下
    開發者工具模擬器上點擊受權彈窗是這樣的:

    手機上的受權彈窗是這樣的:

    能夠看到,這裏顯示的就是咱們添加的 ‘上課提醒’的模板。
    細心的同窗能夠看到, 真機上多了一個 ‘老是保持以上選擇,再也不詢問’
    其實,你本身仔細多品一些。也能明天,咱們正常訂閱消息受權時,用戶容許的話,你只能推送一次消息。也就是用戶容許一次,咱們就能夠推送一條消息給用戶,而且這個容許不存在過時。因此咱們可讓用戶儘可能多的點擊容許,這樣咱們就能夠儘可能多的給用戶發送消息了。

    這裏用戶容許後,咱們就能夠給用戶推送消息了,接下來咱們來藉助雲開發的雲函數來實現消息推送功能。

三,獲取用戶的opneid

先來看官方爸爸是怎麼說的。

能夠看出官方提供了兩種方式,咱們這裏使用雲調用。說白了就是在雲函數裏調用推送功能。api

  • 推送所需參數

    能夠看到我這裏用來openapi功能,而且須要用到用戶的opneid,關於openid的獲取,我以前有寫過文章,也錄過視頻的。文章的話,你們去翻下我歷史的文章,視頻的話,點擊這個便可:《藉助雲函數獲取用戶openid》
    這裏的openid的獲取我就再也不詳細講解了,把對應雲函數的代碼給你們貼出來。

    在使用雲開發時,有幾點須要注意的
  • 1,須要在project.config.json裏建立雲函數目錄以下圖
  • 2,須要在app.js裏初始化雲開發環境

    至於雲開發的環境id從哪裏拿,我視頻裏也講過不少遍了,直接去看我視頻或者翻看我歷史文章便可。
    《零基礎入門雲開發視頻》

四,用雲函數實現消息推送

咱們只須要建立一個雲函數以下,而後填入用戶的openid,要跳轉的小程序頁面連接,模板內容,模板id便可。一般這些數據都應該傳進來,簡單起見,我就把這裏的模板內容寫成固定的。
 app

注意:我在編寫上面的代碼時,推送內容的key必須和小程序模板裏的key保持一致,不然就會報以下錯誤。

  • 而後看下調用這個雲函數的地方

    若是用戶沒有受權,咱們推送會報以下錯誤

    若是用戶受權過,咱們就能夠成功推送了,推送後的打印日誌以下

    還記得咱們真機上的受權嗎,若是用戶只是點擊了容許,沒有選擇一直容許,那我咱們在推送成功一次後,若是再次推送,就須要用戶從新受權。不然,仍是會報這個錯誤的

    因此咱們用戶點擊一次容許,咱們就能夠推送一次消息,好比,我點擊了4次容許那麼我就能夠成功的推送4次

效果圖


能夠看到,咱們成功的收到 上課提醒的模板消息,點擊進去,就是咱們具體的推送內容

其實我這是連續收到了4條消息,由於我點擊了4次容許推送,因此就能夠成功的推送4次。async

到這裏咱們就完整的實現模板消息推送功能了,下面我把主要代碼貼給你們,你們也能夠私信我獲取完整源碼。

  • index.wxml
    <button bindtap="shouquan" type='primary'>獲取訂閱消息受權</button>
    <button bindtap="getOpenid">獲取用戶的openid並推送消息</button>
  • index.js
    //編程小石頭wechat:2501902696
    Page({
    //獲取受權的點擊事件
    shouquan() {
    wx.requestSubscribeMessage({
      tmplIds: ['CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU'], //這裏填入咱們生成的模板id
      success(res) {
        console.log('受權成功', res)
      },
      fail(res) {
        console.log('受權失敗', res)
      }
    })
    },
    //獲取用戶的openid
    getOpenid() {
    wx.cloud.callFunction({
      name: "getopenid"
    }).then(res => {
      let openid = res.result.openid
      console.log("獲取openid成功", openid)
      this.send(openid)
    }).catch(res => {
      console.log("獲取openid失敗", res)
    })
    },
    //發送模板消息到指定用戶,推送以前要先獲取用戶的openid
    send(openid) {
    wx.cloud.callFunction({
      name: "sendMsg",
      data: {
        openid: openid
      }
    }).then(res => {
      console.log("推送消息成功", res)
    }).catch(res => {
      console.log("推送消息失敗", res)
    })
    }
    })
  • 推送對應的雲函數
    //編程小石頭wechat:2501902696
    const cloud = require('wx-server-sdk')
    cloud.init()
    exports.main = async(event, context) => {
    try {
    const result = await cloud.openapi.subscribeMessage.send({
      touser: event.openid, //要推送給那個用戶
      page: 'pages/index/index', //要跳轉到那個小程序頁面
      data: {//推送的內容
        thing1: {
          value: '小程序入門課程'
        },
        thing6: {
          value: '杭州浙江大學'
        },
        thing7: {
          value: '第一章第一節'
        }
      },
      templateId: 'CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU' //模板id
    })
    console.log(result)
    return result
    } catch (err) {
    console.log(err)
    return err
    }
    }

    後面我會分享更多小程序相關的知識出來,請持續關注。ide

視頻講解:https://edu.51cto.com/course/19575.html函數

相關文章
相關標籤/搜索