国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

這篇具有很好參考價(jià)值的文章主要介紹了微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

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

????????在上一篇內(nèi)容當(dāng)中在微信小程序中實(shí)現(xiàn)訂閱消息功能,都在客戶端(小程序)中來實(shí)現(xiàn)的,在客戶端中模擬了服務(wù)器端來進(jìn)行發(fā)送訂閱消息的功能,那么本篇就將上一篇內(nèi)容中僅在客戶端中實(shí)現(xiàn)發(fā)送訂閱消息功能進(jìn)行一個(gè)分離,使用 Node.js 搭載后臺(tái)服務(wù)器進(jìn)行操作,客戶端(小程序)通過請(qǐng)求提交數(shù)據(jù)信息到服務(wù)器,由服務(wù)器來發(fā)送訂閱消息,如果你在沒有讀在客戶端模擬服務(wù)器端的上一篇內(nèi)容來此篇目的話可能需要有一些吃力,至少需要了解它的一個(gè)基本流程,那么本篇內(nèi)容在客戶端的內(nèi)容不再?gòu)念^開始講起僅簡(jiǎn)單概述,重點(diǎn)還是在如何搭載后臺(tái)以及完成客戶端向服務(wù)器端進(jìn)行提交數(shù)據(jù)請(qǐng)求處理后發(fā)送訂閱消息,筆者建議小白從上一篇內(nèi)容開始,再讀本篇內(nèi)容,可以知道在客戶端模擬后端服務(wù)器和搭載后臺(tái)服務(wù)器有哪些異同點(diǎn),大大提高你的認(rèn)識(shí),下面進(jìn)入正題。


完成效果

下面來看一下完成的效果:?

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)


客戶端頁(yè)面編寫

<!-- 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>

客戶端代碼編寫

? ? ? ? 將前面客戶端編寫代碼進(jìn)行整理,在這里面需要填寫你申請(qǐng)的訂閱模板的id,以及form表單提交的內(nèi)容待寫,需要服務(wù)器端搭載編寫請(qǐng)求接口供客戶端發(fā)起請(qǐng)求。

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

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

Page({
  data:{
    index: 0 ,                            // 默認(rèn)為0,日?qǐng)?bào)
    logArray:['日?qǐng)?bào)','周報(bào)','月報(bào)'],
    admin:'',                             // 操作員
    lTitle:'未提交日志提醒',               // 提醒標(biāo)題
    date: time.formateTime(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 })
  },
  // 獲取用戶信息
  getUserProfile(e) {
    // 推薦使用wx.getUserProfile獲取用戶信息,開發(fā)者每次通過該接口獲取用戶個(gè)人信息均需用戶確認(rèn),開發(fā)者妥善保管用戶快速填寫的頭像昵稱,避免重復(fù)彈窗
    wx.getUserProfile({
      desc: '展示用戶信息', // 聲明獲取用戶個(gè)人信息后的用途,后續(xù)會(huì)展示在彈窗中,請(qǐng)謹(jǐn)慎填寫
      success: (res) => {
        this.setData({
          admin: res.userInfo.nickName,
          hasUserInfo: true
        })
      }
    })
  },
  // 獲取用戶權(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]
        }
      })
    }
  },
  // 表單提交
  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,
      // 成功后會(huì)返回code,將code提交給服務(wù)器
      success: res =>{
        // 獲取到code
        console.log('獲取到code:' + res.code)
        console.log(res)
        // 提交服務(wù)器 -- 待寫
      }
    })
  }   
})

日期格式化文件

? ? ? ? 引入 util/util.js 中存放著公共函數(shù),有處理日期格式化函數(shù),在index.js中來調(dià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
}

下面開始進(jìn)入本篇內(nèi)容的一個(gè)重點(diǎn)部分,使用Node.js搭載后臺(tái)服務(wù)器,那么對(duì)這塊內(nèi)容不熟悉的可以看一下這篇內(nèi)容??微信小程序搭載node.js服務(wù)器(簡(jiǎn)),同時(shí)還可以到Node專欄學(xué)習(xí)一些關(guān)于Node.js的基礎(chǔ)知識(shí)。

使用Node.js搭載后臺(tái)服務(wù)器

? ? ? ? 檢查Node.js這些就不再講了,在 微信小程序搭載node.js服務(wù)器(簡(jiǎn)) 當(dāng)中已經(jīng)講過了!創(chuàng)建一個(gè)存放后臺(tái)的文件夾,使用CMD命令切換到此目錄之下,輸入如下命令:

npm init -y 

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

? ? ? ? 使用如下命令來安裝 express 框架:

npm i express -S

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)?????????在目錄下創(chuàng)建index.js文件作為啟動(dòng)文件。

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

? ? ? ? ?使用代碼編譯器 ( 這里使用的是VSCode ) 打開index.js進(jìn)行代碼編寫如下代碼:

const express = require('express')
const app = express()

// 解析表單 - 待寫

app.get('/',(req,res)=>{
    res.send('ok')
})

// 監(jiān)聽 3000 端口號(hào) | 127.0.0.1:3000
app.listen('3000',()=>{
    console.log('Server Running ...')
})

? ? ? ? ?測(cè)試一下,切出CMD命令窗口輸入 node index.js (可安裝nodemon)

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

? ? ? ? ?在瀏覽器的url地址上輸入請(qǐng)求地址: http://127.0.0.1:3000/ ,會(huì)返回 res.send " ok "

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

? ? ? ? 接下來開始編寫客戶端需要請(qǐng)求的接口。


解析表單

? ? ? ? body-parser是一個(gè)常用的express中間件,主要就是對(duì) http 的請(qǐng)求體進(jìn)行解析。否則前臺(tái)發(fā)出請(qǐng)求所帶的請(qǐng)求體無法被后端進(jìn)行解析獲取。

// 解析表單
app.use(express.json());
app.use(express.urlencoded({extended : false}))

? ? ? ? 如果引入使用 bod-parser ,可以如下來引入編寫(但沒有必要,需要安裝body-parser,可以使用express框架中的。)

npm i body-parser
const bodyParser = require('body-parser')

// 解析表單
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : false}))

獲取Openid

? ? ? ? 獲取Openid從上一篇內(nèi)容就已然知道,獲取Openid需要3個(gè)參數(shù),分別是 code ,appid 和 appsecret ;appid 和 appsecret 可以在?微信公眾平臺(tái)?上登錄獲取,主要是 code 參數(shù),code參數(shù)可以在客戶端 (小程序) 通過 wx.login() 方法進(jìn)行獲取,然后發(fā)送到服務(wù)器端,再由服務(wù)器端發(fā)起請(qǐng)求小程序API拿到用戶的Openid。

// index.js - 客戶端
  ...
  // 表單提交
  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,
      // 成功后會(huì)返回code,將code提交給服務(wù)器
      success: res =>{
        // 獲取到code
        console.log('獲取到code:' + res.code)
        console.log(res)
        // 提交服務(wù)器
        wx.request({
            url: 'http://127.0.0.1:3000/getOpenId',
            method: 'POST',
            data: {
                code: res.code
            },
            success: res=>{
                // 待寫
            }
        })
      }
    })
  }  
... 

? ? ? ? 通過 wx.request() 方法請(qǐng)求接口 http://127.0.0.1:3000/getOpenId ,請(qǐng)求參數(shù)就是 wx.login 獲取到的code,下面來后臺(tái)編寫這個(gè)請(qǐng)求接口。

// index.js - 服務(wù)端
const express = require('express')
const app = express()

// 解析表單
app.use(express.json());
app.use(express.urlencoded({extended : false}))

// 用戶信息
var user = {
    appid: '',    // 填寫你自己的appid ( 微信公眾平臺(tái)獲取 )
    secret: '',   // 填寫你自己的appsecret密鑰 ( 微信公眾平臺(tái)獲取 )
    openid: ''
}

// 模板ID - template_id
const temp_id = ''        // 填寫你申請(qǐng)選用的模板id

app.get('/',(req,res)=>{
    res.send('ok')
})

// 獲取Openid請(qǐng)求接口
app.get('/getOpenId',(req,res)=>{
    // 待寫
})

// 監(jiān)聽 3000 端口號(hào) | 127.0.0.1:3000
app.listen('3000',()=>{
    console.log('Server Running ...')
})
...
// 獲取Openid請(qǐng)求接口
app.get('/getOpenId',(req,res)=>{
    // console.log(req.body) 含有code參數(shù)
    console.log("客戶端發(fā)來:",req.query.code)
    let data = req.query.code
    // 獲取Openid函數(shù)
    getOpenid(data,(result)=>{
        // 保存openid待用
        console.log('用戶OpenId:',result.data.openid)
        user.openid = result.data.openid
        res.send({ 'request' : 'ok' })
    })
})

// 監(jiān)聽 3000 端口號(hào) | 127.0.0.1:3000
app.listen('3000',()=>{
    console.log('Server Running ...')
})

// 獲取Openid處理函數(shù) - 待寫

? ? ? ? ?getOpenid(data,callback) ,通過req.body可以拿到客戶端發(fā)過來的請(qǐng)求參數(shù)code,結(jié)合服務(wù)器端的appid參數(shù)和secrest參數(shù)就可以向往小程序API發(fā)起請(qǐng)求返回 Openid進(jìn)行保存??梢钥匆幌鹿俜轿臋n內(nèi)容?小程序登錄 | 微信開放文檔?,如下請(qǐng)求小程序API

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code 

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

?????????在編寫接口之前這三個(gè)參數(shù)是可以獲取到的,我們可以使用這個(gè)API接口測(cè)試工具測(cè)試一下,測(cè)試API工具有很多像Postman,Apifox 等這些,然后將這個(gè)三個(gè)參數(shù)攜帶過去看能夠獲取這個(gè)Openid 。

? ? ? ? 在客戶端中拿到了code,appid和appsecret已經(jīng)有了的,測(cè)試一下向微信API接口發(fā)起請(qǐng)求是否能夠拿到Openid.

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

? ? ? ? 下面在服務(wù)端安裝一個(gè)在Vue中常講到的HTTP數(shù)據(jù)請(qǐng)求庫(kù)axios,使用這個(gè)可能大家會(huì)比較熟悉一些,使用如下命令安裝:

npm i axios -S

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

const express = require('express')
const app = express()
const axios = require('axios')

// 解析表單
// 用戶信息
// 模板ID - template_id

app.get('/',(req,res)=>{ ... })

// 獲取Openid請(qǐng)求接口
app.get('/getOpenId',(req,res)=>{ ... })

// 監(jiān)聽 3000 端口號(hào) | 127.0.0.1:3000
app.listen(3000,()=>{ ... })

// 獲取Openid處理函數(shù) - 通過code獲取openid
function getOpenid(data,success){
    axios({
        url:'https://api.weixin.qq.com/sns/jscode2session?appid=' + user.appid + '&secret=' + user.secret + '&js_code=' + data + '&grant_type=authorization_code',
        method: 'GET',
    })
    .then((res)=>{
        // 成功返回 openid 
        // console.log(res.data.openid)
        user.openid = res.data.openid
        success(res)
    })
    .catch((err)=>{ console.log(err) })
}

? ? ? ? 通過向微信API請(qǐng)求獲取登陸憑證校驗(yàn)返回Openid進(jìn)行保存。獲取Openid之后下面進(jìn)行發(fā)布訂閱消息。?


發(fā)布訂閱消息

????????客戶端請(qǐng)求 http://127.0.0.1:3000/getOpenId,請(qǐng)求成功之后返回 res.send({ 'request' : 'ok' }),客戶端可以進(jìn)行一個(gè)判斷成功之后將表單數(shù)據(jù)進(jìn)行一個(gè)提交。

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

// index.js - 客戶端
  ...
  // 表單提交
  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,
      // 成功后會(huì)返回code,將code提交給服務(wù)器
      success: res =>{
        // 獲取到code
        console.log('獲取到code:' + res.code)
        console.log(res)
        // 提交服務(wù)器
        wx.request({
            url: 'http://127.0.0.1:3000/getOpenId',
            method: 'POST',
            data: {
                code: res.code
            },
            success: res=>{
                if(res.data.request === 'ok'){
                    wx.request({
                        url: 'http://127.0.0.1:3000/sendTempMsg',
                        methods: 'POST',
                        data:{
                            formInfo : formInfo
                        },
                        success: res=>{
                            if(res.data.request === 'ok'){
                                wx.showToast({
                                    title: '訂閱消息發(fā)送成功',
                                    icon: 'success'
                                })
                            }
                        }
                    })
                }
            }
        })
      }
    })
  }  
... 

? ? ? ? 通過客戶端使用wx.login拿到code參數(shù)之后向后端發(fā)起請(qǐng)求http://127.0.0.1:3000/getOpenId,后端響應(yīng)請(qǐng)求后并發(fā)起請(qǐng)求微信API做登錄憑證校驗(yàn),請(qǐng)求成功后會(huì)返回session_key和openid,此時(shí)可以將拿到的openid進(jìn)行保存,同時(shí)響應(yīng)客戶端res.send({ 'request': 'ok'?}). 下面來編寫由服務(wù)器發(fā)送訂閱模板消息的接口。

const express = require('express')
const app = express()
const axios = require('axios')

// 解析表單
// 用戶信息
// 模板ID - template_id

app.get('/',(req,res)=>{ ... })

// 獲取Openid請(qǐng)求接口
app.get('/getOpenId',(req,res)=>{ ... })

// 發(fā)送訂閱消息接口
app.post('/sendTempMsg',(req,res)=>{
    //  待寫
})

// 監(jiān)聽 3000 端口號(hào) | 127.0.0.1:3000
app.listen(3000,()=>{ ... })

// 獲取Openid處理函數(shù) - 通過code獲取openid

? ? ? ? 客戶端提交表單數(shù)據(jù)信息,在服務(wù)器通過req.body.formInfo獲取

// 發(fā)送訂閱消息接口
app.post('/sendTempMsg',(req,res)=>{
    console.log("客戶端發(fā)來:" ,req.body)
    lef formInfo = req.body.formInfo
    sendTempMsg(formInfo,(result)=>{
        console.log('訂閱消息發(fā)送結(jié)果:', result.data)
        res.send({ 'request': 'ok' })
    })
})


// 發(fā)送訂閱消息函數(shù)處理
sendTempMsg(formInfo,success){
    // 待寫
}

? ? ? ? 發(fā)送訂閱消息模板還需要的參數(shù)有access_token,access_token是后臺(tái)接口調(diào)用憑據(jù),獲取之后可以通過發(fā)送訂閱消息API實(shí)現(xiàn)訂閱消息的發(fā)送。下面先來獲取access_token,這里附上官方文檔的獲取接口調(diào)用憑據(jù) | 微信開放文檔。

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

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

? ? ? ? 這里可以使用這個(gè)API接口測(cè)試工具進(jìn)行測(cè)試,測(cè)試是否可以拿到這個(gè)access_token.

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

// 發(fā)送訂閱消息函數(shù)處理
sendTempMsg(formInfo,success){
    // 獲取接口調(diào)用憑據(jù)
    getAccessToken((res)=>{
        // 待寫
    }
}

// 獲取access_token函數(shù)
function getAccessToken(success){
    let url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' +  user.appid + '&secret=' + user.secret
    axios({
        url,
        method: 'GET',
    }).then((res)=>{ 
        // console.log(res.data.access_token) // access_token
        success(res)
    }).catch((err)=>{
        console.log(err)
    })
}

? ? ? ? 拿到 access_token 之后,訂閱模板內(nèi)容信息,然后請(qǐng)求微信API接口發(fā)送訂閱消息。

// 發(fā)送訂閱消息函數(shù)處理
sendTempMsg(formInfo,success){
    // 獲取接口調(diào)用憑據(jù)
    getAccessToken((res)=>{
        // 訂閱模板
        var temp = {
            "touser": user.openid,
            "template_id": temp_id,
            "data": {
                "phrase1": { "value": formInfo.title },
                "date2": { "value": formInfo.date },
                "name3": {"value": formInfo.remind },
                "thing4": { "value": formInfo.tip }
            },
            "miniprogram_state": "developer",
            "lang": "zh_CN"
        }
        console.log("模板信息",temp)
        let token = res.data.access_token
        console.log('獲取到的access_token:',token)
        // 發(fā)送訂閱API
        let url = 'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=' + token
        axios({
            url,
            method: 'POST',
            data: temp
        }).then((res)=>{
            success(res) 
        }).catch((err)=>{ 
            console.log(err)
        })
    }
}

? ? ? ? 到這里已經(jīng)代碼已經(jīng)全部編寫完成了,下面來測(cè)試一下。


測(cè)試效果

1. 啟動(dòng)后臺(tái)服務(wù)器端

? ? ? ? 使用 node index.js 命令(安裝了 nodemon 可以使用命令 nodemon index.js)

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

2. 獲取用戶信息進(jìn)入界面

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

3. 填寫提醒人獲取訂閱消息權(quán)限??

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

4. 點(diǎn)擊發(fā)送,成功會(huì)返回提示

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

5. 查看服務(wù)器端信息(發(fā)送成功)

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

6. 查看手機(jī)或者電腦微信的服務(wù)通知

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)

? ? ? ? ?到這里我們就完成了對(duì)服務(wù)器端的編寫,如果你僅是對(duì)服務(wù)器端的內(nèi)容做了解的話到這里就已經(jīng)結(jié)束了,下面是對(duì)客戶端的一些內(nèi)容做調(diào)整。


客戶端接口封裝

? ? ? ? 可以看一下客戶端的請(qǐng)求方式,下面來將其進(jìn)行一個(gè)接口的封裝,這里可以結(jié)合之前關(guān)于封裝接口的文章 :?封裝小程序request請(qǐng)求[接口函數(shù)]

wx.request({
  url: 'http://127.0.0.1:3000/getOpenId',
  method: 'GET',
  data:{
    code:res.code
  },
  success: res=>{
    console.log(res)
    if(res.data.request === 'ok' && res.statusCode === 200){
      wx.request({
        url: 'http://127.0.0.1:3000/sendTempMsg',
        method:'POST',
        data:{
          formInfo : formInfo
        },
        success: res=>{
          if(res.data.request === 'ok'){
            wx.showToast({
              title: '訂閱消息發(fā)送成功',
              icon: 'success'
            })
          }
        }
      })
    }
  }
})

? ? ? ? ?下面來對(duì)接口進(jìn)行一個(gè)封裝,在util目錄下創(chuàng)建request.js文件來封裝request請(qǐng)求模塊,這里暫不對(duì)封裝內(nèi)容進(jìn)行修改,延用之前已經(jīng)封裝過的模塊。

// request.js
// 封裝數(shù)據(jù)請(qǐng)求request
const BASE_URL = 'http://127.0.0.1:3000';  // 基礎(chǔ)地址

export default function request(url,params={}){
  return new Promise((resolve,reject)=>{
  wx.showLoading({  // 請(qǐng)求提示
    title: '正在加載中...',
  })
  wx.request({
    url: BASE_URL + url,  // 請(qǐng)求url地址
    data: params.data || {},  // 請(qǐng)求參數(shù)
    header: params.header || {},  // 請(qǐng)求頭
    method: params.method || 'GET', // 請(qǐng)求方式
    dataType: 'json', // 返回?cái)?shù)據(jù)類型
    success: (res)=> { // 成功調(diào)用
      console.log(res)
      wx.hideLoading(); // 關(guān)閉請(qǐng)求提示
      resolve(res.data) // 成功處理res.data中的數(shù)據(jù)
    },
    fail: (err)=> { // 失敗調(diào)用
      wx.hideLoading(); // 關(guān)閉請(qǐng)求提示
      wx.showToast({  // 提示錯(cuò)誤信息
        title: err.errMsg || '請(qǐng)求錯(cuò)誤!',
      })
      reject(err) // 失敗處理err
    }
  })
})
}

? ? ? ? 封裝完成之后需要來在 util 目錄下來創(chuàng)建 wxApi.js 文件來封裝各個(gè)接口模塊:

// wxApi.js
import request from './request'

// 獲取OpenId
export const reqOpenId = (code)=> request('/getOpenId',{ data:{code} })
// 發(fā)送訂閱消息
export const reqSendTempMsg = (formInfo)=> request('/sendTempMsg',{data:{formInfo},method:'POST'})

? ? ? ? 在客戶端的 index.js 文件中來引入接口并使用:

const {reqOpenId,reqSendTempMsg } = require('../../utils/wxApi')

...
formSubmit(e){
    ...
        // 提交服務(wù)器
        reqOpenId(res.code).then((res)=>{
          if(res.request === 'ok'){
            reqSendTempMsg(formInfo).then((res)=>{
              if(res.request === 'ok'){
                wx.showToast({
                  title: '訂閱消息發(fā)送成功',
                  icon: 'success'
                })
              }
            })
          }
        })
}

? ? ? ? 當(dāng)然這里還可以更簡(jiǎn)潔一下,那么剩下就留給讀者來進(jìn)行發(fā)揮,感謝大家的支持!??!

微信小程序?qū)崿F(xiàn)訂閱消息功能(Node服務(wù)器篇)文章來源地址http://www.zghlxwxcb.cn/news/detail-436019.html

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

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 微信小程序訂閱消息功能的前后端配置

    微信小程序訂閱消息功能的前后端配置

    功能描述:用戶進(jìn)行彈窗訂閱授權(quán)后,給用戶下發(fā)消息通知提醒 使用場(chǎng)景:優(yōu)惠券過期,會(huì)員過期,活動(dòng)通知等等 前端 獲取模版ID 在微信公眾平臺(tái) 一 功能 一?訂閱消息 手動(dòng)配置獲取模板 ID:登錄?https://mp.weixin.qq.com?獲取模板,如果沒有合適的模板,可以申請(qǐng)?zhí)砑有履0澹?/p>

    2024年04月11日
    瀏覽(23)
  • uniapp - 微信小程序平臺(tái)模板消息訂閱功能,喚起訂閱模板消息彈框、微信公眾號(hào)向用戶發(fā)送 “服務(wù)通知“ 實(shí)現(xiàn)全過程示例代碼,支持一次性訂閱與永久性訂閱(注釋詳細(xì),一鍵復(fù)制開箱即用)

    uniapp - 微信小程序平臺(tái)模板消息訂閱功能,喚起訂閱模板消息彈框、微信公眾號(hào)向用戶發(fā)送 “服務(wù)通知“ 實(shí)現(xiàn)全過程示例代碼,支持一次性訂閱與永久性訂閱(注釋詳細(xì),一鍵復(fù)制開箱即用)

    本博客實(shí)現(xiàn)了uniapp微信小程序端,詳細(xì)實(shí)現(xiàn)公眾號(hào)訂閱通知模板消息完整示例源碼,一次性訂閱與永久訂閱均可,注釋詳細(xì)新手一看就懂! 效果如圖所示,uniapp編譯的微信小程序內(nèi)點(diǎn)擊按鈕后,喚起模板消息訂閱申請(qǐng)彈框,后續(xù)微信內(nèi)會(huì)收到通知。

    2024年02月13日
    瀏覽(27)
  • 如何為微信小程序添加訂閱消息和推送通知功能

    為微信小程序添加訂閱消息和推送通知功能是非常有用的,它可以讓用戶在重要的事件發(fā)生時(shí)及時(shí)地收到通知。在本文中,我們將詳細(xì)介紹如何為微信小程序添加這兩種功能。 一、訂閱消息 訂閱消息是一種新的消息類型,用戶可以選擇是否訂閱它們。訂閱消息一般用于向用

    2024年02月04日
    瀏覽(35)
  • 【微信小程序】使用 WebSocket 進(jìn)行訂閱操作、連接監(jiān)聽、接收到服務(wù)器的消息事件

    在微信小程序中使用 WebSocket 進(jìn)行訂閱操作,可以通過 wx.connectSocket 方法創(chuàng)建 WebSocket 連接,并通過相關(guān)事件處理函數(shù)進(jìn)行訂閱和數(shù)據(jù)處理。 以下是一個(gè)示例代碼,演示了在微信小程序中使用 WebSocket 進(jìn)行訂閱: 在上述代碼中,我們首先使用 wx.connectSocket 方法創(chuàng)建 WebSocket 連接

    2024年02月16日
    瀏覽(49)
  • uni-app中實(shí)現(xiàn)微信小程序/公眾號(hào)訂閱消息推送功能

    uni-app中實(shí)現(xiàn)微信小程序/公眾號(hào)訂閱消息推送功能

    ??????? 熱愛攝影的程序員 ??????? 喜歡編碼的設(shè)計(jì)師 ???? 擅長(zhǎng)設(shè)計(jì)的剪輯師 ??????? 一位高冷無情的編碼愛好者 大家好,我是全棧 IT 工程師摘星人 歡迎分享 / 收藏 / 贊 / 在看! 開發(fā)業(yè)務(wù)時(shí)時(shí)常遇到需要向用戶發(fā)送一些通知,如欠費(fèi)通知、會(huì)員到期通知等等。

    2024年02月02日
    瀏覽(97)
  • 微信小程序?qū)崿F(xiàn)訂閱消息推送的實(shí)現(xiàn)步驟

    微信小程序?qū)崿F(xiàn)訂閱消息推送的實(shí)現(xiàn)步驟

    1、準(zhǔn)備工作 ??準(zhǔn)備小程序賬號(hào)、開發(fā)環(huán)境,我小程序是基于uniapp開發(fā),后臺(tái)代碼基于SpringBoot開發(fā)。同時(shí)先閱讀官方文檔,了解小程序訂閱消息和后端如何發(fā)送訂閱消息等相關(guān)知識(shí),官方文檔地址如下: 《小程序訂閱消息》 《發(fā)送訂閱消息》 2、實(shí)現(xiàn)步驟 2.1、啟用并配置

    2024年02月15日
    瀏覽(29)
  • 使用Java實(shí)現(xiàn)微信小程序訂閱消息

    使用Java實(shí)現(xiàn)微信小程序訂閱消息

    首先到微信小程序的官網(wǎng),選擇合適自己的訂閱消息模板。 尋找到適合自己的模板之后,記住模板ID,點(diǎn)開詳情,記住每個(gè)字段id 微信小程序訂閱消息官網(wǎng)文檔介紹地址:小程序訂閱消息 | 微信開放文檔 (qq.com) 微信小程序訂閱消息接口:發(fā)送訂閱消息 | 微信開放文檔 (qq.com

    2024年02月03日
    瀏覽(26)
  • 手把手教你實(shí)現(xiàn)微信小程序向特定用戶推送一次性訂閱消息

    手把手教你實(shí)現(xiàn)微信小程序向特定用戶推送一次性訂閱消息

    目前有一個(gè)已 微信認(rèn)證 的 訂閱號(hào) 類型公眾號(hào),一個(gè) 微信認(rèn)證 小程序,小程序和公眾號(hào)互相關(guān)聯(lián)。尚不清楚是否必須微信認(rèn)證或特定類型,因?yàn)槟壳皼]遇到類型不匹配或相關(guān)的問題,發(fā)送微信小程序一次性訂閱消息的相關(guān)限制較少 1、功能介紹 訂閱消息推送位置:服務(wù)通知

    2024年02月08日
    瀏覽(27)
  • 微信小程序--訂閱消息

    微信小程序--訂閱消息

    關(guān)于小程序訂閱消息之一次性訂閱: 一次性訂閱是指授權(quán)一次方可接收一次消息;這個(gè)最好的應(yīng)用場(chǎng)景就是自己給自己發(fā)送消息,比如訂單,當(dāng)自己下單成功時(shí),調(diào)用此接口,會(huì)在微信服務(wù)消息收到下單成功通知等具體詳情。 如果是給別人發(fā),一次性訂閱就不適合,類似你

    2024年02月07日
    瀏覽(19)
  • 微信小程序訂閱消息

    subscribeMessage.send | 微信開放文檔 由于業(yè)務(wù)需求 , 需要實(shí)現(xiàn)小程序訂單狀態(tài)發(fā)送給用戶 , 于是微信小程序發(fā)送訂閱消息就被找到了 這里前端是使用了uniapp , 具體實(shí)現(xiàn)方式不清楚,就不瞎bb了 后端這里就是上面的接口文檔 , 總共需要是三個(gè)步驟 1. 獲取小程序 appid 和 密鑰 2. 訂閱消

    2024年02月09日
    瀏覽(28)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包