文章目錄

• • 一、微信公眾號簡介
  • 二、注冊/登錄微信公眾號
  • 三、功能介紹
  • • 1、編輯模式（個人開發(fā)者，無需服務(wù)器）
    • 2、開發(fā)模式
  • 四、實戰(zhàn)開發(fā)
  • • 1、配置服務(wù)器
    • 2、模塊化
  • 五、獲取 access_token
  • • 1、access_token 是什么？
    • 2、獲取 access_token 功能實現(xiàn)
  • 六、自動回復(fù)功能
  • • 1、準備工作
    • 2、代碼實現(xiàn)
  • 七、自定義菜單
  • 八、微信中的網(wǎng)頁開發(fā)
  • • 1、簡單實現(xiàn)
    • 2、JS-SDK
  • 九、vue 項目部署在公眾號上使用

一、微信公眾號簡介

1、微信公眾號是什么？
微信公眾號平臺是給個人、企業(yè)和組織提供業(yè)務(wù)服務(wù)與用戶管理能力的全新服務(wù)平臺；
2、微信公眾號分類

訂閱號：針對媒體和個人提供新的信息傳播方式，主要是在微信里給用戶傳達資訊（雜志、新聞、娛樂等），適用于個人和媒體，一天可群發(fā)消息一次；
服務(wù)號：為企業(yè)和組織提供更加強大的業(yè)務(wù)服務(wù)與用戶管理能力偏向于服務(wù)類交互（銀行），適用于企業(yè)、組織、政府，一個月可群發(fā)消息4次；
小程序：一種新的開放能力，開發(fā)者可以快速開發(fā)一個小程序，小程序可以在微信內(nèi)便捷的獲取和傳播；
企業(yè)微信：繼承企業(yè)號所有能力，同時為企業(yè)提供專業(yè)的通訊工具，豐富的辦公應(yīng)用與 api，助力企業(yè)高效溝通與辦公；

3、訂閱號和服務(wù)號區(qū)別

• 推送頻率：訂閱號一天一次，服務(wù)號一個月4次；
• 適用群體：訂閱號側(cè)重與媒體、個人，服務(wù)號側(cè)重企業(yè)、組織、政府；
• 提供功能：訂閱號包含大部分功能，認證的服務(wù)號包含全部功能；

二、注冊/登錄微信公眾號

1、注冊網(wǎng)址
官網(wǎng)：https://mp.weixin.qq.com/
2、注冊流程（注冊直接根據(jù)提示填寫相應(yīng)信息就可以了）

打開官網(wǎng)，點擊右上角“立即注冊”
選擇訂閱號注冊（服務(wù)號需要公司注冊信息，這里注冊訂閱號）
依次輸入信息點擊注冊（郵箱需要未注冊過微信相關(guān)東西的賬號）

3、注冊完成之后回到首頁，直接輸入賬號密碼登錄就可以了，也可以掃碼登錄；

4、登錄成功之后可以在左側(cè)帶單 基本功能 找到自己的 AppID 和 AppSecret ，這兩個參數(shù)在后面開發(fā)的時候會用到；

三、功能介紹

1、編輯模式（個人開發(fā)者，無需服務(wù)器）

草稿箱：查看草稿、新建圖文等消息；
素材庫：提前上傳圖片、音頻、視頻，方便寫文章的時候直接使用；
發(fā)表記錄：對已發(fā)布的文章進行管理，可編輯刪除；
原創(chuàng)：設(shè)置可轉(zhuǎn)載賬號；
消息：消息管理中心；
贊賞：文章贊賞回復(fù)設(shè)置以及數(shù)據(jù)的分析；
用戶管理：管理已關(guān)注、黑名單；
視頻彈幕：對視頻彈幕進行設(shè)置；
自動回復(fù)：對關(guān)鍵詞回復(fù)、收到消息回復(fù)、被關(guān)在回復(fù)信息進行設(shè)置；
自定義菜單：設(shè)置公眾號底部的菜單；
話題標簽：針對話題、頁面模板設(shè)置；
投票：可以新建和管理投票；
號內(nèi)搜索：設(shè)置公眾號搜索詞后，幫助用戶更快捷檢索號內(nèi)關(guān)聯(lián)內(nèi)容

上面這一部分的功能可以讓開發(fā)者直接在頁面中配置我們的公眾號，而不需要任何的代碼開發(fā)，這種模式只能配置：自動回復(fù)、自定義菜單、話題標簽、投票、號內(nèi)搜索等比較通用的功能；如果你的項目里有需要引入第三方頁面或者一些通用之外的定制化功能則需要通過開發(fā)模式來實現(xiàn)；

2、開發(fā)模式

基本配置：公眾號基本信息查看，服務(wù)器配置；
開發(fā)者工具：開發(fā)這工具（開發(fā)者文檔、在線調(diào)試工具、we開發(fā)工具、公眾平臺測試賬號等）入口；
運維中心：數(shù)據(jù)監(jiān)控、日志查詢、接口報警等信息；
接口權(quán)限：查看當前用賬戶接口權(quán)限，接口代表的就是頁面功能；

開發(fā)模式需要配置服務(wù)器，服務(wù)器一旦開啟配置之后，編輯模式的相關(guān)配置將會失效；

四、實戰(zhàn)開發(fā)

開發(fā)之前請先打開開發(fā)者工具，仔細閱讀開發(fā)者文檔；

開發(fā)模式整體流程圖：

1、配置服務(wù)器

開發(fā)者文檔中打開“接口測試號申請” => “進入微信公眾帳號測試號申請系統(tǒng)”，這里需要填寫接口配置信息和JS接口安全域名；
1.1、創(chuàng)建服務(wù) express
這里是簡單的構(gòu)建一個express 服務(wù)，也可以使用 express 提供的項目生成器來構(gòu)建；

1、新建文件夾 wechat_test
2、控制臺執(zhí)行 npm init，創(chuàng)建一個 package.json 文件
3、安裝 express ：npm i express
4、在 package.json 同級新建文件 app.js
5、控制臺運行 app.js 服務(wù)，node app.js

//引入express模塊 const express = require('express'); //創(chuàng)建app對象 const app = express(); //監(jiān)聽端口號 app.listen(3000,()=>{console.log('服務(wù)器運行成功了') })

運行成功，控制臺會輸出：服務(wù)器運行成功了；

1.2、配置測試號-接口配置信息
url：微信服務(wù)器訪問不到局域網(wǎng)的網(wǎng)址，這里需要對我們的服務(wù)器域名做一下映射，將本地域名映射為外網(wǎng)網(wǎng)址；我們可以借助 花生殼 - 內(nèi)網(wǎng)穿透 來實現(xiàn)；
token：是參與服務(wù)器返回參數(shù) signature 加密的，這里面可以隨意填寫，越復(fù)雜越好；signature 下面會說到用途；

配置成功之后控制臺會輸出如下參數(shù)：

{signature: '51631893d3f7711b6bf547090f65389a41a6c4b0', // 微信加密簽名echostr: '3846949982007385053', //微信隨機字符串timestamp: '1647073868', // 微信發(fā)送請求時間戳nonce: '1150241684' // 微信隨機數(shù)字 }

1.3、驗證服務(wù)器的有效性

將 [token,nonce,timestamp] 按照字典排序，然后轉(zhuǎn)字符串進行sha1加密；
得到數(shù)據(jù)和微信傳遞過來的 signature 進行對比，相等說明消息是來自于微信服務(wù)器，否則就不是；

需要安裝sha1：npm i sha1

//引入express模塊 const express = require('express'); //引入sha1加密工具 const sha1 = require('sha1') //創(chuàng)建app對象 const app = express(); const config = {token:'xxxx' } //中間件，判斷服務(wù)器的有效性 app.use((req,res,next) =>{const { signature, echostr, timestamp, nonce } = req.query;const { token } = config;const sha1Str = sha1([timestamp,nonce,token].sort().join(''));//sha1需要手動安裝引入if(sha1Str === signature){res.send(echostr);}else{res.send('error');} }) //監(jiān)聽端口號 app.listen(3000,()=>{console.log('服務(wù)器運行成功了') })

token 配置在 config 文件中，和上一步設(shè)置的 token 相同；

2、模塊化

模塊復(fù)用，針對上面的代碼進行模塊化拆分，首先文件改造

將 config 配置和中間件函數(shù)提出出來
1、app.js

//引入express模塊 const express = require('express'); //引入auth中間件函數(shù) const auth = require('./wechat/auth'); //創(chuàng)建app對象 const app = express(); //中間件函數(shù) app.use(auth()); //監(jiān)聽端口號 app.listen(3000,()=>{console.log('服務(wù)器運行成功了') })

2、config.js

module.exports={token: "xxs520!!",appID: "wx5e6b8daad9eba98f",appsecret: "8bf76bbeeddf977ef5b3a73cca0b831b" }

3、auth.js

//引入配置對象 const config = require('config'); //引入sha1加密工具 const sha1 = require('sha1') module.exports = () =>{return (req,res,next) =>{const { signature, echostr, timestamp, nonce } = req.query;const { token } = config;const sha1Str = sha1([timestamp,nonce,token].sort().join(''));//sha1需要手動安裝引入if(sha1Str === signature){res.send(echostr);}else{res.send('error');}} }

模塊化更多的是一種思想，目的是為例復(fù)用項目里面的功能或者方法；

五、獲取 access_token

在開發(fā)者文檔中-開始開發(fā)里有個獲取 access_token 的功能，這里面有對 access_token 的介紹，可以先去了解一下；

1、access_token 是什么？

access_token 是微信公眾號的全局唯一的接口調(diào)用憑據(jù)，公眾號的所有接口都需要使用 access_token ；
特點：

access_token 的有效期是 2 個小時，過期之后需要重新獲取（提前5分鐘請求）；
重復(fù)獲取將會導(dǎo)致上一次的 access_token 失效；
日調(diào)用量 2000次；

2、獲取 access_token 功能實現(xiàn)

1、設(shè)計思路

初次調(diào)用：發(fā)送請求獲取 access_token ，然后保存在本地；
再次調(diào)用：去本地讀取文件，判斷是否過期；過期了重新獲取并更新本地保存的 access_token ，沒過期則跳過；

整理：獲取 access_token 時判斷本地是否有access_token ，沒有則獲取并保存在本地；有則判斷是否過去；

2、代碼實現(xiàn)
安裝 request、request-promise-native：npm i request，npm i request-promise-native

//引入require-promise-native，返回值是一個promise 對象 const rp = require('request-promise-native'); //引入fs,讀寫文件 const { writeFile, readFile } = require('fs'); //引入配置對象 const { appID, appsecret } = require('../config'); //定義類，獲取access_token class Wechat {constructor(){}//獲取access_tokengetAccessToken(){//定義請求地址const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appID}&secret=${appsecret}`;//返回一個promise，保證接口所有的狀態(tài)都能正常返回return new Promise((resolve, reject)=>{//使用request、request-promise-native //發(fā)送請求rp({method:'GET', url, json:true}).then(res=>{//重寫過期時間res.expires_in = Date.now() + (res.expires_in -300)*1000;resolve(res);}).catch(err=>{reject('getAccessToken:'+ err);})})}//保存access_token，將入?yún)⒈４鏋槲募?/span>saveAccessToken(accessToken){accessToken = JSON.stringify(accessToken);return new Promise((resolve, reject)=>{//寫入的文件，希寫入的內(nèi)容writeFile('./accessToken.txt', accessToken, err=>{if(!err){resolve();}else{reject('saveAccessToken:'+err);}});}) }//讀取access_tokenreadAccessToken(){return new Promise((resolve, reject)=>{//寫入的文件，希寫入的內(nèi)容readFile('./accessToken.txt', (err, data)=>{if(!err){data = JSON.parse(data);resolve(data);}else{reject('readAccessToken:'+err);}});}) }//判斷access_token是否有效isVaildAccessToken(data){if(!data && !data.access_token && !data.expires_in){return false;}return data.expires_in > Date.now();}//獲取access_tokenfetchAccessToken(){return new Promise((resolve, reject)=>{this.readAccessToken().then(async res=>{//判斷是否存在，存在直接讀取，不存在則重新請求并保存然后暴露出來if(this.isVaildAccessToken(res)){resolve(res);}else{const res = await this.getAccessToken();await this.saveAccessToken(res);resolve(res);}}).catch(async err=>{const res = await this.getAccessToken();await this.saveAccessToken(res);resolve(res);})})} } //模擬測試 const wx = new Wechat(); wx.fetchAccessToken();

然后在控制臺執(zhí)行這個 js 文件；

六、自動回復(fù)功能

1、準備工作

關(guān)注自己的測試號：在測試號管理里面掃描 “測試號二維碼” 來關(guān)注自己的測試號；
然后在測試號發(fā)送消息，消息會由微信公眾號平臺轉(zhuǎn)發(fā)到自己的服務(wù)器上；

微信服務(wù)器會發(fā)送兩種請求的數(shù)據(jù)給開發(fā)者服務(wù)器：
1.1、GET：驗證服務(wù)器的有效性；
1.2、POST：微信服務(wù)器會將用戶的消息以 POST 的方式發(fā)送給開發(fā)者服務(wù)器；
1.3、微信服務(wù)器發(fā)送 POST 的消息是 XML 類型的數(shù)據(jù)，我們需要進一步操作：將數(shù)據(jù)接收、xml轉(zhuǎn)譯成 js 對象，格式化；
1.4、如果開發(fā)者服務(wù)器沒有回復(fù)消息給微信服務(wù)器，微信服務(wù)器回發(fā)送3次消息，所以我們需要在接收到消息之后進行回復(fù)；

2、代碼實現(xiàn)

2.1、直接在 auth.js 文件中修改，改造服務(wù)器的有效性方法；

//引入配置對象 const config = require('../config'); const { getUserData, parseXml, formatMsg } = require('../utils/tool'); const msgTemp = require('./msgTemp'); const replay = require('./replay'); //引入sha1加密工具 const sha1 = require('sha1') module.exports = () =>{return async (req,res,next) =>{const { signature, echostr, timestamp, nonce } = req.query;const { token } = config;const sha1Str = sha1([timestamp,nonce,token].sort().join(''));//sha1需要手動安裝引入if(req.method == 'GET'){//當前是驗證服務(wù)器有效性消息if(sha1Str === signature){res.send(echostr);}else{res.end('error');}} else if(req.method == 'POST'){if(sha1Str !== signature){res.end('error');}//接收請求體中數(shù)據(jù)（用戶在客戶端發(fā)送的消息）let xmlData = await getUserData(req);//將xml解析成js對象let jsData = await parseXml(xmlData);//格式化數(shù)據(jù)let msg = formatMsg(jsData);//實現(xiàn)自動回復(fù)let options = replay(msg);let replayMsg = msgTemp(options);//發(fā)送數(shù)據(jù)給微信服務(wù)器res.send(replayMsg);} else {res.end('error');}} }

2.2、utils/tool.js：接收到微信服務(wù)器后對數(shù)據(jù)處理的一些常規(guī)方法；
安裝 xml2js：npm i xml2js

const { parseString } = require('xml2js'); module.exports = {//獲取用戶發(fā)送的消息getUserData(req){return new Promise((resolve, reject)=>{let xmlData = '';//當流式數(shù)據(jù)傳遞過來時會觸發(fā)該事件req.on('data', ()=>{//讀取的數(shù)據(jù)是buffer，需要轉(zhuǎn)換成字符串xmlData += data.tostring();})//數(shù)據(jù)傳遞結(jié)束時觸發(fā)，將最終數(shù)據(jù)返回.on('end', ()=>{resolve(xmlData);})})},//解析xml為js，借助插件parseXml(data){return new Promis((resolve, reject)=>{parseString(data, {trim:true}, (err,data)=>{if(!err){resolve(data);}else{reject(err);}})})},//格式化，去除無用數(shù)據(jù)，去除空數(shù)據(jù)，數(shù)組轉(zhuǎn)化為key-valueformatMsg(msg){let message = {};msg = msg.xml;if(typeof msg === 'object'){for(let i in msg){let value = msg[i];if(Array.isArray(value) && value.length != 0){message[i] = value[0]; }}}return message;} }

2.3、replay.js：對所有收到的消息、事件進行統(tǒng)一處理，這里只是寫了一部分；

//處理接收到的消息 //處理接收普通消息、接收事件推送 module.exports = (msg) => {//接收人和發(fā)送人需要互換角色let options = {ToUserName:msg.FromUserName,FromUserName:msg.ToUserName,CreateTime:Date.now(),MsgType:msg.MsgType}let content = '初始消息';//普通消息if(msg.MsgType == 'text'){if(msg.Content == '1'){//全匹配content = `測試使用數(shù)據(jù)1`;}else if(msg.Content.match('2')){//半匹配content = `測試使用數(shù)據(jù)2`;}}else if(msg.MsgType == 'image' || msg.MsgType == 'voice'){options.MediaId = msg.MediaId;}else if(msg.MsgType == 'video'){...}else if(msg.MsgType == 'shortvideo'){...}else if(msg.MsgType == 'location'){...}//事件推送....options.content = content;return options; }

2.4、msgTemp.js：用戶服務(wù)器回復(fù)微信服務(wù)器消息的模板封裝；

//回復(fù)消息的模板 module.exports = options =>{//消息模板在官網(wǎng)上獲取，由于上一步發(fā)送和接收人已經(jīng)替換，這里不需要再次替換let str = `<xml><ToUserName><![CDATA[${options.ToUserName}]]></ToUserName><FromUserName><![CDATA[${options.FromUserName}]]></FromUserName><CreateTime>${options.CreateTime}</CreateTime><MsgType><![CDATA[${options.MsgType}]]></MsgType>`;if(options.MsgType == 'text'){str += `<Content><![CDATA[${options.content}]]></Content>`;}else if(options.MsgType == 'image'){str += `<Image><MediaId><![CDATA[${options.MediaId}]]></MediaId></Image>`;}else if(options.MsgType == 'voice'){str += `<Voice><MediaId><![CDATA[${options.MediaId}]]></MediaId></Voice>`;}else if(options.MsgType == 'video'){str += `<Video><MediaId><![CDATA[${options.MediaId}]]></MediaId><Title><![CDATA[${options.title}]]></Title><Description><![CDATA[${options.description}]]></Description></Video>`;}else if(options.MsgType == 'music'){str += `<Music><Title><![CDATA[${options.title}]]></Title><Description><![CDATA[${options.description}]]></Description><MusicUrl><![CDATA[${options.musicUrl}]]></MusicUrl><HQMusicUrl><![CDATA[${options.hqMusicUrl}]]></HQMusicUrl><ThumbMediaId><![CDATA[${options.MediaId}]]></ThumbMediaId></Music>`;}else if(options.MsgType == 'news'){str += `<ArticleCount>${options.content.length+1}</ArticleCount><Articles>`options.content.forEach(item=>{str += `<item><Title><![CDATA[${item.title}]]></Title><Description><![CDATA[${item.description}]]></Description><PicUrl><![CDATA[${item.picUrl}]]></PicUrl><Url><![CDATA[${item.url}]]></Url></item>`})str += `</Articles>`;}str += '</xml>';return str; }

這里對接收到的普通消息、事件推送進行統(tǒng)一的處理，對回復(fù)消息時的模板也進行了封裝；最終可以關(guān)注自己的測試號，然后手機上發(fā)送消息，然后在控制臺查看輸出信息；

七、自定義菜單

請熟讀自定義菜單的文檔：https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html；
注意：

1、自定義菜單最多包括3個一級菜單，每個一級菜單最多包含5個二級菜單。
2、一級菜單最多4個漢字，二級菜單最多8個漢字，多出來的部分將會以“…”代替。
3、菜單必須先刪除才能再次創(chuàng)建，不能直接覆蓋；

在 accress_token 模塊新增兩個方法：新增菜單、刪除菜單；也就是為 Wechat 類新增兩個方法：

//自定義菜單 createMenu(menu){return new Promise(async (resolve, reject) => {try{//獲取access_tokenlet data = await this.fetchAccessToken();let url = `https://api.weixin.qq.com/cgi-bin/menu/create?access_token=${data.access_token}`;//發(fā)送請求const res = await rp({method:'POST', url, json:true, body:menu});resolve(res);}catch(e){console.log(e);}}) } //刪除菜單 deleteMenu(){return new Promise(async (resolve, reject) => {try{//獲取access_tokenlet data = await this.fetchAccessToken();let url = `https://api.weixin.qq.com/cgi-bin/menu/delete?access_token=${data.access_token}`;let res = await rp({method:'GET', url, json:true});resolve(res);}catch(e){console.log(e);}}) }

先執(zhí)行刪除，在執(zhí)行新增：

(async ()=>{//模擬測試const wx = new Wechat();await wx.deleteMenu();await wx.createMenu(menu); })()

菜單配置：

module.exports = {"button":[{ "type":"click","name":"今日歌曲","key":"V1001_TODAY_MUSIC" //隨意設(shè)置，在點擊事件中會在eventKey獲取到},{"name":"菜單","sub_button":[{ "type":"view","name":"搜索","url":"http://www.soso.com/" //跳轉(zhuǎn)的網(wǎng)址},{"type":"click","name":"贊一下我們","key":"V1001_GOOD"}]}] }

可以參考官網(wǎng)上的類型來設(shè)置菜單的數(shù)據(jù)；

八、微信中的網(wǎng)頁開發(fā)

1、簡單實現(xiàn)

借助 ejs 模板引擎來實現(xiàn)在微信中網(wǎng)頁的開發(fā)，安裝 ejs 插件：npm i ejs，在 app.js 同級新建 views 文件夾，然后在文件夾里新建 link.ejs 文件；在app.js 里面使用路由：

//引入express模塊 const express = require('express'); //引入auth中間件函數(shù) const auth = require('./wechat/auth'); //創(chuàng)建app對象 const app = express(); //配置模板引擎目錄 app.set('views','./views'); //配置模板引擎，可以將數(shù)據(jù)和模板合并然后生成 HTML 文本 app.set('view engine','ejs'); //頁面路由 app.get('/link',(req,res)=>{//渲染頁面，將渲染好的頁面返回給用戶res.render('link'); }) //中間件函數(shù) app.use(auth()); //監(jiān)聽端口號 app.listen(3000,()=>{console.log('服務(wù)器運行成功了') })

link.ejs ：跟 html 一樣

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>test</title></head><body><div>sasasasas</div></body> </html>

然后運行 app.js ,就可以在瀏覽器打開 localhost:3000/link 查看 link 頁面的內(nèi)容了；

2、JS-SDK

微信JS-SDK是微信公眾平臺 面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包；通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機系統(tǒng)的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗；

2.1、獲取 ticket
jsapi_ticket 是公眾號用于調(diào)用微信 JS 接口的臨時票據(jù)。正常情況下，jsapi_ticket 的有效期為7200秒，通過 access_token 來獲取。由于獲取 jsapi_ticket 的 api 調(diào)用次數(shù)非常有限，頻繁刷新 jsapi_ticket 會導(dǎo)致 api 調(diào)用受限，影響自身業(yè)務(wù)，開發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket ；

獲取 ticket 跟獲取 access_token 的方法基本一致，我將代碼放到獲取 access_token 文件中：

//將文件固定在一個位置創(chuàng)建，防止不同位置調(diào)用方法文件創(chuàng)建位置變動 var path = require('path'); //獲取ticketgetTicket(){return new Promise(async (resolve, reject)=>{//獲取access_tokenlet data = await this.fetchAccessToken();//定義請求地址const url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${data.access_token}&type=jsapi`;//返回一個promise，保證接口所有的狀態(tài)都能正常返回//使用request、request-promise-native //發(fā)送請求rp({method:'GET', url, json:true}).then(res=>{//重寫過期時間resolve({ticket:res.ticket,expires_in:Date.now() + (res.expires_in -300)*1000});}).catch(err=>{reject('getTicket:'+ err);})})}//保存ticket，將入?yún)⒈４鏋槲募?/span>saveTicket(ticket){ticket = JSON.stringify(ticket);let file = "./ticket.txt";let fileName = path.resolve(__dirname,file );return new Promise((resolve, reject)=>{//寫入的文件，希寫入的內(nèi)容writeFile(fileName , ticket, err=>{if(!err){resolve();}else{reject('saveTicket:'+err);}});}) }//讀取ticketreadTicket(){let file = "./ticket.txt";let fileName = path.resolve(__dirname,file );return new Promise((resolve, reject)=>{//寫入的文件，希寫入的內(nèi)容readFile(fileName , (err, data)=>{if(!err){data = JSON.parse(data);resolve(data);}else{reject('readTicket:'+err);}});}) }//判斷ticket是否有效isVaildTicket(data){if(!data && !data.ticket && !data.expires_in){return false;}return data.expires_in > Date.now();}//獲取ticketfetchTicket(){return new Promise((resolve, reject)=>{this.readTicket().then(async res=>{//判斷是否存在，存在直接讀取，不存在則重新請求并保存然后暴露出來if(this.isVaildTicket(res)){resolve(res);}else{const res = await this.getTicket();await this.saveTicket(res);resolve(res);}}).catch(async err=>{const res = await this.getTicket();await this.saveTicket(res);resolve(res);})})}

有些方法跟獲取 access_token 的方法基本一樣，這里可以將方法改造一下，統(tǒng)一調(diào)用；

2.2、驗證 JS-SDK
規(guī)則：
1、組合參與簽名的四個參數(shù):jsapi-tacket臨時票據(jù)、noncestr隨機字符串、timestamp時間戳、url當前服務(wù)器地址；
2、排序、以&拼接，sha1加密；

let arr = [`jsapi-tacket=${tacket}`,`noncestr=${noncestr}`,`timestamp=${timestamp}`,`url=${uel}/link` //拼接上當前頁面的路徑 ] let sha1Str = sha1(arr.sort().join('&'));

2.3、使用 JS-SDK（參考官網(wǎng)）
1、登錄微信公眾平臺進入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”，也就是用戶服務(wù)器的域名（不帶協(xié)議名）；
2、引入 js 文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js，引入之后就有一個 wx 對象可以全局使用；
3、通過 config 接口注入權(quán)限驗證配置；
4、通過 ready 接口處理成功驗證；
5、通過 error 接口處理失敗驗證；
6、在頁面上使用：

//配置tacket //頁面路由 app.get('/link',(req,res)=>{//生成js-sdk//組合參與簽名的四個參數(shù):jsapi-tacket臨時票據(jù)、noncestr隨機字符串、timestamp時間戳、url當前服務(wù)器地址//排序、以&拼接，sha1加密let arr = [`jsapi-tacket=${tacket}`,`noncestr=${noncestr}`,`timestamp=${timestamp}`,`url=${uel}/link` //拼接上當前頁面的路徑]let sha1Str = sha1(arr.sort().join('&'))；//渲染頁面，將渲染好的頁面返回給用戶res.render('link'); })

link.ejs

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>test</title></head><body><div id="link">語音識別</div><div class="content"></div><script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>//引入zepto 方便操作元素<script type="text/javascript" src="http://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script><script type="text/javascript">wx.config({debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。appId: 'wx5e6b8daad9eba98f', // 必填，公眾號的唯一標識timestamp: <%= timestamp %>, // 必填，生成簽名的時間戳nonceStr: <%= noncestr %>, // 必填，生成簽名的隨機串signature: <%= signature %>,// 必填，簽名jsApiList: ['startRecord', 'stopRecord', 'translateVoice'] // 必填，需要使用的JS接口列表});//js-sdk相關(guān)功能接口一般在這這里使用wx.ready(function(){// config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作，//所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。//對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。//驗證接口是否有權(quán)限，測試階段使用wx.checkJsApi({jsApiList: ['chooseImage'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,success: function(res) {// 以鍵值對的形式返回，可用的api值true，不可用為false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}}});//語音識別let isLink = false;//點擊操作$('#link').tap(function(){if(!isLink){//開始錄音wx.startRecord();isLink = true;}else{wx.stopRecord({success: function (res) {//結(jié)束錄音后會自動上傳到微信服務(wù)器，并返回一個對應(yīng)idvar localId = res.localId;isLink = false;//轉(zhuǎn)化為文字wx.translateVoice({localId: localId, // 需要識別的音頻的本地Id，由錄音相關(guān)接口獲得isShowProgressTips: 1, // 默認為1，顯示進度提示success: function (res) {$('.content').html(res.translateResult)}});}});}})});wx.error(function(res){// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開config的debug模式查看，//也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。});</script></body> </html>

九、vue 項目部署在公眾號上使用

1、在vue項目 index.html 文件中引入 http://res.wx.qq.com/open/js/jweixin-1.6.0.js，引入之后就可以全局使用 wx 對象；
2、配置 wx.config ,這里是使用 JS-SDK 的一下基礎(chǔ)配置項，在項目初始化的時候調(diào)用一次；
3、然后在wx.ready 里面處理 JS-SDK 提供的一些調(diào)用接口；
4、代碼打包，發(fā)布到線上，由公眾號服務(wù)端調(diào)用對應(yīng)的頁面就可以了；

以上就是微信公眾號開發(fā)的內(nèi)容了，根據(jù)視頻學習；這里只是借助視頻資料大致的了解和實現(xiàn)部分功能；

總結(jié)

以上是生活随笔為你收集整理的微信公众号开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。