? ? ? ? ?* 源碼已經(jīng)上傳到資源處，需要的話點(diǎn)擊跳轉(zhuǎn)下載 |??源碼下載

????????小程序中的訂閱內(nèi)容在日常中大家都會使用到，一般在支付的時(shí)候，會收到支持成功的消息，里面有一些基礎(chǔ)信息花費(fèi)多少以及是使用在什么地方，訂閱消息是小程序向用戶發(fā)送消息的方式，小程序本身是不具備接收消息功能，而是通過微信的服務(wù)通知功能將消息轉(zhuǎn)達(dá)給用戶的。下面來簡單看一下：

? ? ? ? 以上大致知道了訂閱消息的這個(gè)功能，這里需要客戶端和服務(wù)器端兩者，本篇就來使用客戶端，且在客戶端中來模擬服務(wù)器端，那么在下一篇會使用Node.js搭載的服務(wù)器作為服務(wù)端。

完成效果

下面來看一下完成的效果：

??? ? ? ? ?在未獲取用戶信息之前無法進(jìn)入界面，在獲取之后進(jìn)入操作界面，日志類型默認(rèn)是日報(bào)，可以點(diǎn)擊選擇周報(bào)或月報(bào)，點(diǎn)擊日期選擇可以挑選對應(yīng)的日期，需要填寫提醒人，溫馨提示默認(rèn)是這個(gè)尚未提交日志，下面還有一個(gè)提示，需要填寫提醒人名稱，當(dāng)點(diǎn)擊提醒人名稱時(shí)會獲取用戶訂閱消息的權(quán)限，填寫完提醒人發(fā)送按鈕也會從禁用轉(zhuǎn)成啟用狀態(tài)，點(diǎn)擊發(fā)送就可以在微信上的服務(wù)通知可以看到會有這個(gè)未提交日志提醒的通知了，下面就來開始實(shí)現(xiàn)：

訂閱消息相關(guān)參數(shù)

參數(shù)準(zhǔn)備

???????? appid(用戶標(biāo)識)，appSecret(app密鑰)，template_id (訂閱模板id)

????登錄?微信公眾平臺 (qq.com)?進(jìn)入之后，在左側(cè)菜單找到【開發(fā)管理】

? ? 現(xiàn)在來獲取第三個(gè)訂閱模板，在左側(cè)菜單的【訂閱消息】處，點(diǎn)擊【選用】，然后搜一下【未提交日志】

? ? 然后點(diǎn)擊【選用】?，會出現(xiàn)以下這個(gè)

? ? ?回到【訂閱消息】的界面，在【我的模板】中可以找到，打開【詳情】，里面就有這個(gè)模板id

頁面編寫

? ? ? ? 對頁面編寫的內(nèi)容同樣也不多說，點(diǎn)擊按鈕獲取到數(shù)據(jù)就更新狀態(tài)，通過wx:if或者wx:else來進(jìn)行顯示和隱藏，這里的樣式也需要大家自己寫了，頁面也是比較簡單的，還是著重在如何來實(shí)現(xiàn)訂閱消息這塊。

<!-- index.html -->
<!-- 頂部 -->
<view class="content">
  <view class="head">
    當(dāng)前操作員：{{admin}}
  </view>
  <block wx:if="{{!hasUserInfo}}">
    <button bindtap="getUserProfile">獲取</button>
  </block>
  <block wx:else>
    <form bindsubmit="formSubmit">
      <view class="log">
        <view class="log_title"> 
          <text>日志類型</text>
          <picker bindchange="changeTitle" name="title" value="{{index}}" range="{{logArray}}">
              <view class="nowing">{{logArray[index]}}</view>
          </picker>
        </view>
        <view class="log_date">
          <text>日期選擇</text>
          <picker mode="date" name="date" value="{{date}}" bindchange="bindDateChange">
            <view class="nowing">{{date}}</view>   
          </picker>
        </view>
        <view class="log_person">
          <text>提醒人</text>
          <input type="text" name="remind" bindinput="bindRemindPer" bindtap ="allowSubscribeMessage" placeholder="例如：小明(參考)" value="{{remind}}"/>
        </view>
        <view class="log_tip">
          <text>溫馨提示</text> 
          <input type="text" name="tip" bindinput="bindTipCont" value="{{tip}}"/>
        </view>
        <button form-type="submit" disabled="{{ remind == '' ? true : false}}">發(fā)送</button>
        <view class="errMsg">{{ remind == '' ? 'tips：需要填寫提醒人名稱才可發(fā)送！' : '' }}</view>
      </view>
    </form>
  </block>
</view>

監(jiān)聽獲取表單信息

? ? ? ? 對填寫的表單中的input框中數(shù)據(jù)進(jìn)行監(jiān)聽，獲取到表單數(shù)據(jù)進(jìn)行更新；通過bindinput獲取

// index.js
// 獲取應(yīng)用實(shí)例
const app = getApp()

Page({
  data:{
    index: 0 ,                            // 默認(rèn)為0,日報(bào)
    logArray:['日報(bào)','周報(bào)','月報(bào)'],
    admin:'',                             // 操作員
    lTitle:'未提交日志提醒',               // 提醒標(biāo)題
    date: new Date(),                     // 日期(未格式化)
    remind:'',                            // 提醒人，默認(rèn)admin              
    tip:'尚未提交日志',                    // 溫馨提示內(nèi)容
  },
  // 獲取提醒標(biāo)題
  changeTitle(e){
    this.setData({ index : e.detail.value })
  },
  // 獲取日期選擇
  bindDateChange(e){
    this.setData({ date : e.detail.value })
  },
  // 獲取提醒人
  bindRemindPer(e){
    this.setData({ remind : e.detail.value })
  },
  // 獲取提示內(nèi)容
  bindTipCont(e){
    console.log(e)
    this.setData({ tip : e.detail.value })
  },
  // 獲取用戶信息 - 待寫
})

? ? ? ? 這里存在一個(gè)問題，也就是選擇日期的問題，通過new Date() 獲取的日期并不符合日期格式，所以這里可以對獲取到的日期進(jìn)行一個(gè)格式化處理，這里就不去裝moment.js插件這些了，在util/util.js 文件中來編寫格式化日期。

日期格式化處理

? ? ? ? 在 util/util.js 文件中編寫一個(gè)公共函數(shù)并導(dǎo)出：

// 格式化日期
function formatTime(date) {
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
    return [year, month, day].map(formatNumber).join('-') 
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime
}

? ? ? ? 在index.js文件中來引入使用，const time = require('../../util/util')

// index.js
// 獲取應(yīng)用實(shí)例
const app = getApp()
const time = require('../../utils/util')

Page({
    data:{
        ...
        date: time.formateTime(new Date())        // 日期(格式化)
    }
    ...
})

? ? ? ? ?可以拿到的 date 是這種格式的 " xxxx - xx?- xx?"，下面就來獲取用戶信息：

獲取用戶信息

? ? ? ? 獲取用戶信息，一般像這些的話可以寫在app.js中然后進(jìn)行保存，以便全局使用，這里就保存到app.js，就存放在index.js中方便查看。小程序中獲取用戶信息的方式也有了調(diào)整，具體可以看以下?wx.getUserProfile(Object object) | 微信開放文檔

// index.js
// 獲取應(yīng)用實(shí)例
const app = getApp()
const time = require('../../utils/util')

Page({
  data:{
    hasUserInfo:false,                    // 獲取用戶信息
    index: 0 ,                            // 默認(rèn)為0,日報(bào)
    logArray:['日報(bào)','周報(bào)','月報(bào)'],
    admin:'',                             // 操作員
    lTitle:'未提交日志提醒',               // 提醒標(biāo)題
    date: time.formateTime(new Date())    // 日期(格式化)
    remind:'',                            // 提醒人，默認(rèn)admin              
    tip:'尚未提交日志',                    // 溫馨提示內(nèi)容
  },
  // 獲取提醒標(biāo)題
  // 獲取日期選擇
  // 獲取提醒人
  // 獲取提示內(nèi)容
  // 獲取用戶信息
  getUserProfile(e) {
    // 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個(gè)人信息均需用戶確認(rèn)，開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復(fù)彈窗
    wx.getUserProfile({
      desc: '展示用戶信息', // 聲明獲取用戶個(gè)人信息后的用途，后續(xù)會展示在彈窗中，請謹(jǐn)慎填寫
      success: (res) => {
        this.setData({
          admin: res.userInfo.nickName,
          hasUserInfo: true
        })
      }
    })
  },
  // 獲取用戶權(quán)限 - 待寫
})

? ? ? ? 當(dāng)點(diǎn)擊獲取時(shí)用戶信息成功時(shí)在回調(diào)處理中hasUserInfo會打開，此時(shí)填寫的界面就會顯示出來，而獲取按鈕將會被隱藏起來。

獲取訂閱消息權(quán)限

? ? ? ? 發(fā)送訂閱消息的時(shí)候需要獲取到訂閱消息的權(quán)限，那么可以放到用戶在操作的時(shí)候進(jìn)行提示，這里可以在用戶在輸入提醒人的時(shí)候，點(diǎn)擊提醒人input輸入框的時(shí)候觸發(fā)，為它綁定一個(gè)事件 bindtap = "allowSubscribeMessage" 獲取用戶訂閱消息權(quán)限，獲取之后需要保存它的獲取狀態(tài)，所以需要保存到app.js文件中。

// app.js
App({
  globalData: {
    userInfo: null, 
    hasSubscribeMessage:''
  }
})

// index.js
// 獲取應(yīng)用實(shí)例
const app = getApp()
const time = require('../../utils/util')

const tempid = ''     // 填寫上你自己的訂閱模板id [未提交日志模板]

Page({
  data:{
    ...
  },
  // 獲取提醒標(biāo)題
  // 獲取日期選擇
  // 獲取提醒人
  // 獲取提示內(nèi)容
  // 獲取用戶信息
  // 獲取用戶權(quán)限
  allowSubscribeMessage(){
    // hasSubscribeMessage 授權(quán)狀態(tài)
    if (!app.globalData.hasSubscribeMessage) {
      wx.requestSubscribeMessage({
        tmplIds: [tempid], // 在此處填寫模板id
        success(res) {
          console.log('獲取權(quán)限：',res)
          app.globalData.hasSubscribeMessage = res.errMsg.split(':')[1]
        }
      })
    }
  },
  // form 提交表單 - 待寫 
})

? ? ? ? 獲取定位權(quán)限之后，下面來進(jìn)行對表單內(nèi)容的一個(gè)提交；

form 提交表單

? ? ? ? 后臺服務(wù)器端發(fā)送模板信息中需要用到這個(gè)【openid】參數(shù)，那么openid參數(shù)可以通過appid，appsecret 和 code 才能拿到，前兩個(gè)參數(shù)已經(jīng)有了，那么 code 參數(shù)可以通過wx.login 獲取到，通過 wx.login 獲取到 code參數(shù)，然后提交到后臺服務(wù)器端；

? ? ? ? 這里提交表單會將表單中的 value 進(jìn)行整理，可以打印一下提交的內(nèi)容數(shù)據(jù)：

// form 提交表單
formSubmit(e){
    // e.detail.value 可以拿到用戶提交表單的數(shù)據(jù)
    console.log(e)
    console.log(e.detail.value)

? ? ? ? ?根據(jù)前面data中定義，它是logArray數(shù)組下標(biāo)為0的值，即日報(bào)，那么這里需要處理一下然后提交過去，wx.login() 方法獲取code成功之后回調(diào)將 code 和 提交的數(shù)據(jù)一并提交過去即可！

Page({
...
// 表單提交
  formSubmit(e){
    // e.detail.value 可以拿到用戶提交表單的數(shù)據(jù)
    // console.log(e.detail.value)
    let formInfo = e.detail.value
    formInfo.title = this.data.logArray[formInfo.title]
    wx.login({
      timeout: 2000,
      // 成功后會返回code，將code提交給服務(wù)器
      success: res =>{
        // 獲取到code
        console.log('獲取到code:' + res.code)
        console.log(res)
        // 提交服務(wù)器 -- 待寫
      }
    })
  }    
})

? ? ? ? 到這客戶端的內(nèi)容基本已經(jīng)差不多了，就剩下提交到服務(wù)器端，在這邊寫之前，先來模擬后臺服務(wù)器來接收，接收客戶端提交的數(shù)據(jù)，處理之后再發(fā)送訂閱消息！

模擬后臺服務(wù)器端

? ? ? ? 在客戶端中模擬后臺服務(wù)器端進(jìn)行接收，接收來自客戶端的表單數(shù)據(jù)在訂閱消息的模板中來使用，以及接收客戶端通過 wx.login 方法獲取的code

// index.js
const app = getApp()
const time = require('../../utils/util')

const tempid = ''

Page({
    ...
})

// 模擬服務(wù)器端
var server = {
    // 響應(yīng)POST請求
    post(data,success) {
        console.log('收到來自客戶端提交的數(shù)據(jù):',data);
        // 獲取openid - 待寫
    }
} 

? ? ? ? 這里模擬服務(wù)器端后，回到【form提交表單】這里，來發(fā)起請求將對應(yīng)獲取到的code和form表單數(shù)據(jù)提交過來:

...
// 表單提交
  formSubmit(e){
    // e.detail.value 可以拿到用戶提交表單的數(shù)據(jù)
    // console.log(e.detail.value)
    let formInfo = e.detail.value
    formInfo.title = this.data.logArray[formInfo.title]
    wx.login({
      timeout: 2000,
      // 成功后會返回code，將code提交給服務(wù)器
      success: res =>{
        // 獲取到code
        console.log('獲取到code:' + res.code)
        console.log(res)
        // 提交服務(wù)器
        server.post({ code : res.code , formInfo},()=>{
            wx.showToast({
                title: '發(fā)送成功',
                icon: 'success',
                duration: 2000
            })
            // 成功提交,由服務(wù)器發(fā)起訂閱消息 - 待寫
        })
      }
    })
  }    
})
...
// 模擬服務(wù)器端
var server = {
    // 響應(yīng)POST請求
    post(data,success) {
        console.log('收到來自客戶端提交的數(shù)據(jù):',data);
        // 獲取openid - 待寫
    }
} 

? ? ? ? 在這里來查看一下是否能夠正常的收到來自客戶端提交的數(shù)據(jù)：可以看到 title 和日期的處理

? ? ? ? ?data參數(shù)里面有這個(gè) code 和 formInfo 提交表單的數(shù)據(jù)，接下來就需要在服務(wù)器中來獲取openid參數(shù)了。

獲取參數(shù) Openid

? ? ? ? 在服務(wù)器端來獲取這個(gè)openid參數(shù)，openid參數(shù)的獲取需要這3個(gè)參數(shù)：appid，appsecret 和code ，這三個(gè)參數(shù)現(xiàn)在都已經(jīng)有了，下面就是獲取openid然后進(jìn)行保存待用。

? ? ? ? 可以看一下官方文檔的內(nèi)容：??獲取openid | 微信開放文檔?，通過請求如下地址

https://api.weixin.qq.com/sns/jscode2session 

? ? ? ? 以及需要如下這些請求參數(shù)，主要還是前三個(gè)參數(shù)的獲??；

? ? ? ? 成功后會返回以下這些參數(shù)

? ? ? ? ?可以獲取到 openid 和 session_key ，下面來進(jìn)行編寫獲取，通過 wx.request 方法發(fā)起請求，攜帶上那幾個(gè)參數(shù)，成功之后 success : success ，即觸發(fā)this.getOpenid(）方法的第二個(gè)參數(shù)是一個(gè)回調(diào)，(res)=>{ // 處理函數(shù)?} 。

...
// 模擬服務(wù)器端
var server = {
    appid: '',    // 寫上你自己的 appid 
    secret: '',   // 寫上你自己的 appsecret
    user:{
        openid: '' // 待接收
    }

    // 響應(yīng)POST請求
    post(data,success) {
        console.log('收到來自客戶端提交的數(shù)據(jù):',data);
        // 獲取openid
        this.getOpenid(data,(res)=>{
            // 獲取code成功回調(diào)
            console.log('用戶OpenId': res.data.code)
            // 保存
            this.user.openid = res.data.openid
            success()
        })
    },
    // 獲取Openid方法
    getOpenid(res,success){
        // res中有 code,formInfo
        wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session',
            data: { // 請求參數(shù)
                appid: this.appid,
                secret: this.secret,
                js_code: res.code,
                grant_type: 'authorization_code'
            },
            success: success 
        })
    }
} 

? ? ? ? 下面來看一下是否獲取到了這個(gè)用戶的Openid:

? ? ? ? ?拿到 Openid 接下來就可以進(jìn)行發(fā)布訂閱消息了。

發(fā)布訂閱消息

? ? ? ? 在前面的【表單】提交內(nèi)容中，成功返回code之后提交給服務(wù)器端，此時(shí)就可以從客戶端發(fā)起請求到服務(wù)器端響應(yīng)發(fā)送訂閱消息。

...
// 表單提交
  formSubmit(e){
        ...
        // 提交服務(wù)器
        server.post({ code : res.code , formInfo},()=>{
            wx.showToast({
                title: '發(fā)送成功',
                icon: 'success',
                duration: 2000
            })
            // 成功提交,由服務(wù)器發(fā)起訂閱消息
            server.sendTempMsg(formInfo,(res)=>{
                console.log('訂閱消息發(fā)送結(jié)果：',res.data)
            })
        })
      }
    })
  }    
})
...
// 模擬服務(wù)器端
var server = {
  appid: '',    // 寫你自己的 appid
  secret:'',    // 寫你自己的 appsecret
  user:{
    openid: ''  // 待接收
  },
  // 響應(yīng)POST請求
  // 獲取Openid方法
  // 發(fā)送訂閱消息 - 待寫
}

#發(fā)布訂閱消息需要的參數(shù)

? ? ? ? openid，template_id（訂閱模板id），模板的參數(shù)

? ? ? ? openid 和 template_id 參數(shù)已經(jīng)拿到了，剩下這個(gè)模板的參數(shù)，前面我們申請選用了模板，那么發(fā)布訂閱模板中我們需要其中的哪些參數(shù)需要自己來定。

? ? ? ? 通過以上這些可以來制定發(fā)布訂閱消息的模板，發(fā)布訂閱模板信息需要用到這個(gè)微信API接口，可以看一下官方文檔提供的接口和所需要的請求參數(shù)：

POST https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=ACCESS_TOKEN 

????????這里主要缺少的參數(shù)就是 access_token 參數(shù)，該參數(shù)是接口調(diào)用的憑據(jù)，那么發(fā)布訂閱消息還需要獲取 access_token,這是【獲取接口調(diào)用憑據(jù)】，獲取接口調(diào)用憑據(jù) | 微信開放文檔?，通過下面這個(gè)微信API接口就可以獲取到接口調(diào)用的憑借。

GET https://api.weixin.qq.com/cgi-bin/token

? ? ? ? 所需要的參數(shù)也是已經(jīng)有了的，下面就來開始編寫發(fā)布訂閱消息代碼。

// 模擬服務(wù)器端
var server = {
  appid: '',    // 寫你自己的 appid
  secret:'',    // 寫你自己的 appsecret
  user:{
    openid: ''  // 待接收
  },
  // 響應(yīng)POST請求
  // 獲取Openid方法
  // 發(fā)送訂閱消息
  sendTempMsg(formInfo,success){
      var that = this.user
      var temp = {
          touser: that.openid
          template_id: tempid,   // 訂閱模板id
          data: {
              phrase1: { value: formInfo.title },
              date2: { value: formInfo.date },
              name3: {value: formInfo.remind },
              thing4: { value: formInfo.tip }
          },
          miniprogram_state: 'developer',
          lang: 'zh_CN'
      }  
      // 發(fā)送訂閱
      this.getAccessToken(res=>{
          var token = res.data.access_token
          console.log('服務(wù)器access_token：' + token)
          var url = 'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=' + token
          wx.request({
              url,
              method: 'POST',
              data: temp,
              success
          })
      })
      // 獲取 access_token 
      getAccessToken(success){
          var url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + this.appid + '&secret=' + this.secret
          wx.request({
              url,
              success: success
          })
      }
  }
}

? ? ? ? ?服務(wù)器會返回 access_token ，當(dāng)服務(wù)器發(fā)出訂閱消息成功時(shí)，客戶端做監(jiān)聽回調(diào)。

? ? ? ? ?到這里代碼內(nèi)容已經(jīng)編寫完成了，下面來進(jìn)行測試是否能夠發(fā)出訂閱消息！

發(fā)布訂閱消息測試

????????1. 點(diǎn)擊獲取按鈕時(shí)，會獲取用戶信息，此時(shí)會進(jìn)行提示，當(dāng)獲取到信息時(shí)hasUserInfo的狀態(tài)為 true時(shí)，此時(shí)填寫界面也會隨之出現(xiàn)。

????????2. 當(dāng)前的操作員就是獲取用戶信息中的NiceName，hasUserInfo的值也為true，此時(shí)提醒人還沒進(jìn)行填寫，有灰色的提示參考填寫，以及發(fā)布按鈕被禁用了，最底部有紅色的提示，需要填寫后才可以啟用按鈕進(jìn)行發(fā)送。

? ? ? ? ?3.點(diǎn)擊提醒人的輸入框時(shí)，會觸發(fā)獲取發(fā)布訂閱消息的權(quán)限事件。

? ? ? ? ?4. 獲取權(quán)限之后，輸入提醒人 “syan” 之后，可以看到發(fā)送按鈕以及啟用了，同時(shí)按鈕下面的紅色提示字體也隱藏起來了。

? ? ? ? ?5.點(diǎn)擊發(fā)送之后可以看到提示發(fā)送成功的提示消息。

? ? ? ? 6. 拿出你的手機(jī)打開微信，或者在電腦上打開微信在服務(wù)通知可以看到這條消息。

? ? ? ? 微信服務(wù)通知能夠接收到這條訂閱消息，那么本篇的內(nèi)容也就到此結(jié)束了，再下一期中會再出一期使用Node.js后臺來搭服務(wù)器的篇目供讀者參考交流學(xué)習(xí)，感謝大家的支持！?。?

文章來源地址http://www.zghlxwxcb.cn/news/detail-477061.html

到了這里，關(guān)于微信小程序?qū)崿F(xiàn)訂閱消息功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！