??十分鐘快速學(xué)會使用Nodejs全棧開發(fā)微信公眾號【建議收藏】

一、準(zhǔn)備

注冊微信訂閱號

注冊小程序測試號

sunny-ngrok工具安裝及注冊賬號

注意：sunny-ngrok的原型是ngrok，不過ngrok是國外的，sunny-ngrok是國內(nèi)的一個私服，速度更快了，主要作用是域名轉(zhuǎn)發(fā)，模擬公網(wǎng)ip和端口，甚至可以配置給客戶在公網(wǎng)上展示項目。地址：http://www.ngrok.cc/

,進去后注冊開通隧道，有免費的。

記住：一個微信號只能注冊一種微信產(chǎn)品，但是可以管理多個。

這是我的隧道：(免費的如果啟動不了就直接用這個吧)

使用sunny-ngrok嘗試一次轉(zhuǎn)發(fā)：

下載工具，啟動工具，輸入隧道id，回車

說明127.0.0.1:3000已經(jīng)被轉(zhuǎn)發(fā)到zhifieji.vipgz4.idcfengye.com的公網(wǎng)ip上了。

建個weixin目錄，npm初始化：

npm init -y

把下面的內(nèi)容復(fù)制到package.json里：

{ "name": "weixin-lesson", "version": "1.0.0", "description": "微信開發(fā)", "main": "index.js", "directories": { "doc": "doc" }, "scripts": { "sunny": "./bin/sunny clientid 62d16df91a118fd3", "ngrok": "./bin/ngrok http 3000", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git@gitlab.kaikeba.com:web_dev/weixin-lesson.git" }, "author": "", "license": "ISC", "dependencies": { "axios": "^0.18.0", "co-wechat": "^2.3.0", "co-wechat-oauth": "^2.0.1", "crypto": "^1.0.1", "express": "^4.16.4", "jsonwebtoken": "^8.4.0", "koa": "^2.6.2", "koa-bodyparser": "^4.2.1", "koa-compress": "^3.0.0", "koa-jwt": "^3.5.1", "koa-route": "^3.2.0", "koa-router": "^7.4.0", "koa-socket": "^4.4.0", "koa-static": "^5.0.0", "koa-views": "^6.1.5", "koa-websocket": "^5.0.1", "koa-xml-body": "^2.1.0", "moment": "^2.23.0", "mongoose": "^5.4.4", "promise-redis": "0.0.5", "pug": "^2.0.3", "redis": "^2.8.0", "request": "^2.88.0", "request-promise": "^4.2.2", "socket.io": "^2.2.0", "watch": "^1.0.2", "wechat": "^2.1.0", "wechat-oauth": "^1.5.0", "xml2js": "^0.4.19" } }

然后安裝依賴

npm install # 或 yarn

再在weixin目錄下建立seed目錄，seed目錄下建立index.js和index.html。

index.js:

const Koa = require('koa') const Router = require('koa-router') const static = require('koa-static') const bodyParser = require('koa-bodyparser'); const app = new Koa() app.use(bodyParser()) const router = new Router() app.use(static(__dirname + '/')) app.use(router.routes()); /*啟動路由*/ app.use(router.allowedMethods()); app.listen(3000);

index.html:

在seed目錄打開終端，執(zhí)行nodemon（需要安裝）, 3000端口打開127.0.0.1

npm install -g nodemon nodemon

前面說通過ngrok把3000端口轉(zhuǎn)發(fā)到了zhifieji.vipgz4.idcfengye.com上，我們打開這個網(wǎng)址試下：

二、使用消息接口

微信自帶消息自動回復(fù)功能，可以在公眾平臺設(shè)置，但是很死板，無法動態(tài)回復(fù)消息

進入微信開發(fā)者工具，申請公眾平臺測試賬號

有一些配置，填寫轉(zhuǎn)發(fā)的域名，token隨意，要和服務(wù)器的用的一樣

接口配置的URL就是轉(zhuǎn)發(fā)的網(wǎng)址加了/wechat，再去提交接口配置信息（要多試試，才能提交成功）。

再就是在項目seed目錄里配置，新建一個conf.js，把前面的appid、appsecret、token帶上：

module.exports={ appid: 'wx77f481fc8a9113a4', appsecret: '2b84470b9fb0f8166a8518c5b40edaf9', token: 'qweqwe' }

在index.js里引入，使用一個庫co-wechat，所以index.js將變成下面：

const Koa = require('koa') const Router = require('koa-router') const static = require('koa-static') const bodyParser = require('koa-bodyparser'); const app = new Koa() const conf = require('./conf')//引入conf app.use(bodyParser()) const router = new Router() app.use(static(__dirname + '/')) const wechat = require('co-wechat')//使用co-wechat庫 router.all('/wechat', wechat(conf).middleware( async message => { console.log('wechat:', message) return 'Hello World ' + message.Content } )) app.use(router.routes()); /*啟動路由*/ app.use(router.allowedMethods()); app.listen(3000);

知識點：co-開頭的庫是代表著滿足異步要求的庫

成功后，這個時候呢，可以關(guān)注下面的測試號二維碼

發(fā)送1，會回復(fù)Hello World 1（如果是設(shè)置的沒有這中獲取用戶發(fā)送的信息的方法，所以有時候也需要api），如下圖：


三、微信一些api的調(diào)用

相關(guān)文檔：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

獲取token：

const axios = require('axios') const tokenCache = { access_token:'', updateTime:Date.now(), expires_in:7200 } router.get('/getTokens',async ctx => {//獲取token const wxDomain = `https://api.weixin.qq.com` const path = `/cgi-bin/token` const param = `?grant_type=client_credential&appid={conf.appid}&secret={conf.appsecret}` const url = wxDomain + path + param const res = await axios.get(url) Object.assign(tokenCache,res.data,{ updateTime:Date.now() }) ctx.body = res.data })

獲取用戶信息

router.get('/getFollowers',async ctx => {//獲取用戶信息 const url = `https://api.weixin.qq.com/cgi-bin/user/get?access_token=${tokenCache.access_token}` const res = await axios.get(url) console.log('getFollowers:',res) ctx.body = res.data })

以上為原生的寫法，實際上我們十有庫可以用的。

使用 co-wechat-api

yarn add co-wechat-api

const WechatAPI = require('co-wechat-api') const api = new WechatAPI( conf.appid, conf.appsecret, // // 取Token // async () => await ServerToken.findOne(), // // 存Token // async token => await ServerToken.updateOne({}, token, { upsert: true }) ) router.get('/getFollowers', async ctx => { let res = await api.getFollowers() res = await api.batchGetUsers(res.data.openid, 'zh_CN')//加上后會返回詳細(xì)信息 ctx.body = res })

四、全局票據(jù)

全局票據(jù)需要基于mongodb或者redires，我們用mongodb。

新建個mongoose.js

const mongoose = require('mongoose') const { Schema } = mongoose mongoose.connect('mongodb://localhost:27017/weixin', { useNewUrlParser: true }, () => { console.log('Mongodb connected..') }) exports.ServerToken = mongoose.model('ServerToken', { accessToken: String });

index.js里改造上面用co-wechat-api的：

const { ServerToken } = require('./mongoose')//全局票據(jù)來源 const WechatAPI = require('co-wechat-api') const api = new WechatAPI( conf.appid, conf.appsecret, // 取Token async () => await ServerToken.findOne(), // 存Token async token => await ServerToken.updateOne({}, token, { upsert: true }) ) router.get('/getFollowers', async ctx => { let res = await api.getFollowers() res = await api.batchGetUsers(res.data.openid, 'zh_CN') ctx.body = res })

再在index.html中加上一個按鈕和一個按鈕點擊方法：

getFollowers

async getFollowers(){ const res = await axios.get('/getFollowers') console.log('res',res) },

動動小手點擊一下：（這個getFollwers拿到了數(shù)據(jù)）

五、消息推動

就類似于這個，手機微信掃碼微信公眾平臺前臺發(fā)送1或者2，餅圖自動統(tǒng)計1和2發(fā)送的次數(shù)。


后臺（模擬器）會顯示前臺（手機微信在測試訂閱號）的推送，而且更新echart。

代碼為下面的vote部分，后面會放出代碼。

六、Oauth2認(rèn)證流程

首先要知道有三個端，瀏覽器，服務(wù)器，微信服務(wù)器。

1.瀏覽器向服務(wù)器發(fā)送認(rèn)證請求

2.服務(wù)器讓瀏覽器重定向微信認(rèn)證界面

3.瀏覽器向微信服務(wù)器請求第三方認(rèn)證（微信認(rèn)證）

4.微信服務(wù)器毀掉給服務(wù)器一個認(rèn)證code

5.服務(wù)器用code向微信服務(wù)器申請認(rèn)證令牌

6.微信服務(wù)器返給服務(wù)器一個令牌

最后當(dāng)服務(wù)器得到令牌認(rèn)證成功后，發(fā)給瀏覽器一個指令，刷新界面

刷新后就會有一個用戶信息

使用微信開發(fā)者工具，選擇公眾號網(wǎng)頁，用來預(yù)覽。

PS：以上代碼中

消息推動我放在vote目錄了

剩余的api調(diào)用方法放在了seed目錄

七、實現(xiàn)一個微信認(rèn)證登錄

配置js接口安全域名，就是我們轉(zhuǎn)發(fā)的公網(wǎng)域名（不用帶協(xié)議）：zhifieji.vipgz4.idcfengye.com

再就是每個微信接口api那里也要授權(quán)域名，即下圖的修改位置，修改的和上面一樣：（zhifieji.vipgz4.idcfengye.com）

把前面的項目中seed目錄拷貝一份叫做seed_up，我們給予前面的在seed_up中繼續(xù)干！

index.js；

const OAuth = require('co-wechat-oauth')//引入一個oauth庫 const oauth = new OAuth(conf.appid,conf.appsecret) /** * 生成用戶URL */ router.get('/wxAuthorize', async (ctx, next) => { const state = ctx.query.id console.log('ctx...' + ctx.href) let redirectUrl = ctx.href redirectUrl = redirectUrl.replace('wxAuthorize', 'wxCallback') const scope = 'snsapi_userinfo' const url = oauth.getAuthorizeURL(redirectUrl, state, scope) console.log('url' + url) ctx.redirect(url) }) /** * 用戶回調(diào)方法 */ router.get('/wxCallback', async ctx => { const code = ctx.query.code console.log('wxCallback code', code) const token = await oauth.getAccessToken(code) const accessToken = token.data.access_token const openid = token.data.openid console.log('accessToken', accessToken) console.log('openid', openid) ctx.redirect('/?openid=' + openid) }) /** * 獲取用戶信息 */ router.get('/getUser', async ctx => { const openid = ctx.query.openid const userInfo = await oauth.getUser(openid) console.log('userInfo:', userInfo) ctx.body = userInfo })

index.html：

全局票據(jù)（一樣用到mongoose，從上次的修改）

mongoose.js：

const mongoose = require('mongoose') const { Schema } = mongoose mongoose.connect('mongodb://localhost:27017/weixin', { useNewUrlParser: true }, () => { console.log('Mongodb connected..') }) exports.ServerToken = mongoose.model('ServerToken', { accessToken: String }); //以下為seed_up新增 schema = new Schema({ access_token: String, expires_in: Number, refresh_token: String, openid: String, scope: String, create_at: String }); // 自定義getToken方法 schema.statics.getToken = async function (openid) { return await this.findOne({ openid: openid }); }; schema.statics.setToken = async function (openid, token) { // 有則更新，無則添加 const query = { openid: openid }; const options = { upsert: true }; return await this.updateOne(query, token, options); }; exports.ClientToken = mongoose.model('ClientToken', schema);

繼續(xù)改下index.js：

const { ServerToken,ClientToken } = require('./mongoose')//全局票據(jù)來源 const oauth = new OAuth(conf.appid, conf.appsecret, async function (openid) { return await ClientToken.getToken(openid) }, async function (openid, token) { return await ClientToken.setToken(openid, token) } )

寫出來效果如下：完美

[video(video-KTwIIMGP-1632587503822)(type-tencent)(url-https://v.qq.com/txp/iframe/player.html?vid=e3278ajafl6)(image-http://puui.qpic.cn/vpic/0/e3278ajafl6.png/0)(title-)]

八、調(diào)用微信jssdk

準(zhǔn)備：

1.獲取jsconfig

index.html：

獲取jsconfig async getJSConfig(){ console.log('wx',wx) const res = await axios.get('/getJSConfig',{ params:{ url:window.location.href } }) console.log('config',res) res.data.jsApiList = ['onMenuShareTimeline'] wx.config(res.data) wx.ready(function () { console.log('wx.ready......') }) }

index.js：

/** * 獲取JSConfig */ router.get('/getJsConfig',async ctx => { console.log('getJSSDK...',ctx.query) const res = await api.getJsConfig(ctx.query) ctx.body = res })

如果能走到wx.ready(),說明這個時候可以使用別的功能那個api了。

2.獲取網(wǎng)絡(luò)狀態(tài)

在wx.ready()后加，當(dāng)然在ready()里加最為合理：

//獲取網(wǎng)絡(luò)狀態(tài) wx.getNetworkType({ success: function (res) { // 返回網(wǎng)絡(luò)類型2g，3g，4g，wifi const networkType = res.networkType console.log('getNetworkType...', networkType) } })

獲取到我是wifi環(huán)境，很完美！其余的jssdk調(diào)用方法也是如此！

還有一點，通常我們十前后端分離的開發(fā)項目，所以我把項目改成了前后端分離。

九、前后端分離的開發(fā)

1、新建了個weixin_pro的項目

2、將weixin項目的package.json復(fù)制到weixin_pro

3、分一個cube-ui目錄為前端代碼

4、分一個quiz目錄為后端代碼

5、weixin_pro下安裝依賴，為后端依賴

6、cube-ui下安裝依賴為前端依賴

7、分別啟動前端代碼后后端代碼

運行效果如下：

[video(video-v2FEoxvx-1632588608459)(type-tencent)(url-https://v.qq.com/txp/iframe/player.html?vid=l3278ig1v72)(image-http://puui.qpic.cn/vpic/0/l3278ig1v72.png/0)(title-)]

十、代碼地址

前后端分離前的代碼：https://gitee.com/huqinggui/weixin.git

前后端分離后的代碼：https://gitee.com/huqinggui/weixin_pro.git

API JavaScript

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。