使用NodeJs和JavaScript開發微信公眾號

語言: CN / TW / HK

時間 2021-11-23 20:01:21 前端紙飛機

主題: koa watermark shadow aoe openid wechat mongoose oauth ngrok

大家作為前端可能活多或少的都寫過結合微信jsdk開發的微信h5網頁，對授權登入這塊以及部分sdk可能都有通過後臺介面來呼叫，那麼大家有沒有想過，這些後臺介面都是怎麼寫的呢？那麼今天這篇文章就帶大家來了解下是如何寫的！

一、準備

註冊微信訂閱號
註冊小程式測試號
sunny-ngrok工具安裝及註冊賬號

注意：sunny-ngrok的原型是ngrok，不過ngrok是國外的，sunny-ngrok是國內的一個私服，速度更快了，主要作用是域名轉發，模擬公網ip和埠，甚至可以配置給客戶在公網上展示專案。地址：http://www.ngrok.cc/ ,進去後註冊開通隧道，有免費的。記住：一個微訊號只能註冊一種微信產品，但是可以管理多個。

這是我的隧道：(免費的如果啟動不了就直接用這個吧) 使用sunny-ngrok嘗試一次轉發：下載工具，啟動工具，輸入隧道id，回車說明127.0.0.1:3000已經被轉發到zhifieji.vipgz4.idcfengye.com的公網ip上了。

建個weixin目錄，npm初始化：

npm init -y

把下面的內容複製到package.json裡：

{
  "name": "weixin-lesson",
  "version": "1.0.0",
  "description": "微信開發",
  "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": "[email protected]: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:

<!DOCTYPE html>
<html>

<head>
    <title>全棧開發微信公眾號</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <script src="http://unpkg.com/[email protected]/dist/vue.min.js"></script>
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://unpkg.com/cube-ui/lib/cube.min.js"></script>
    <script src="http://cdn.bootcss.com/qs/6.6.0/qs.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <link rel="stylesheet" href="http://unpkg.com/cube-ui/lib/cube.min.css">
    <style>
        /* .cube-btn {
            margin: 10px 0;
        } */
    </style>
</head>

<body>
    <div id="app">
        <cube-input v-model="value"></cube-input>
        <cube-button @click='click'>Click</cube-button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                value: 'input'
            },

            methods: {
                click: function () {
                    console.log('click')
                }
            },
            mounted: function () {

            },
        });
    </script>
</body>

</html>

在seed目錄開啟終端，執行nodemon（需要安裝）, 3000埠開啟127.0.0.1

npm install -g nodemon
nodemon

在這裡插入圖片描述前面說通過ngrok把3000埠轉發到了zhifieji.vipgz4.idcfengye.com上，我們開啟這個網址試下：

二、使用訊息介面

微信自帶訊息自動回覆功能，可以在公眾平臺設定，但是很死板，無法動態回覆訊息

進入微信開發者工具，申請公眾平臺測試賬號有一些配置，填寫轉發的域名，token隨意，要和伺服器的用的一樣介面配置的URL就是轉發的網址加了/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-開頭的庫是代表著滿足非同步要求的庫

成功後，這個時候呢，可以關注下面的測試號二維碼

傳送1，會回覆Hello World 1（如果是設定的沒有這中獲取使用者傳送的資訊的方法，所以有時候也需要api），如下圖： ![](http://img-blog.csdnimg.cn/4426106b3d8841c086340b3b908ea3b9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv57q46aOe5py6,size_20,color_FFFFFF,t_70,g_se,x_16 =300x600)

三、微信一些api的呼叫

獲取token：

const axios = require('axios')
const tokenCache = {
    access_token:'',
    updateTime:Date.now(),
    expires_in:7200
}

router.get('/getTokens',async ctx => {//獲取token
    const wxDomain =  `http://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 = `http://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')//加上後會返回詳細資訊
    ctx.body = res
})

在這裡插入圖片描述

四、全域性票據

全域性票據需要基於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')//全域性票據來源
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中加上一個按鈕和一個按鈕點選方法：

<cube-button @click='getFollowers'>getFollowers</cube-button>

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

在這裡插入圖片描述動動小手點選一下：（這個getFollwers拿到了資料）

五、訊息推動

就類似於這個，手機微信掃碼微信公眾平臺前臺傳送1或者2，餅圖自動統計1和2傳送的次數。 ![](http://img-blog.csdnimg.cn/c25b0480ca824e13a6865de7b207b0c9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv57q46aOe5py6,size_20,color_FFFFFF,t_70,g_se,x_16 =400x400) 後臺（模擬器）會顯示前臺（手機微信在測試訂閱號）的推送，而且更新echart。程式碼為下面的vote部分，後面會放出程式碼。

六、Oauth2認證流程

首先要知道有三個端，瀏覽器，伺服器，微信伺服器。

1.瀏覽器向伺服器傳送認證請求

2.伺服器讓瀏覽器重定向微信認證介面

3.瀏覽器向微信伺服器請求第三方認證（微信認證）

4.微信伺服器毀掉給伺服器一個認證code

5.伺服器用code向微信伺服器申請認證令牌

6.微信伺服器返給伺服器一個令牌

最後當伺服器得到令牌認證成功後，發給瀏覽器一個指令，重新整理介面

重新整理後就會有一個使用者資訊

使用微信開發者工具，選擇公眾號網頁，用來預覽。

PS：以上程式碼中

訊息推動我放在vote目錄了

剩餘的api呼叫方法放在了seed目錄

七、實現一個微信認證登入

配置js介面安全域名，就是我們轉發的公網域名（不用帶協議）：zhifieji.vipgz4.idcfengye.com 再就是每個微信介面api那裡也要授權域名，即下圖的修改位置，修改的和上面一樣：（zhifieji.vipgz4.idcfengye.com）把前面的專案中seed目錄拷貝一份叫做seed_up，我們給予前面的在seed_up中繼續幹！ 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)
})
/**
 * 使用者回撥方法
 */
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：

<!DOCTYPE html>
<html>

<head>
    <title>全棧開發微信公眾號</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <script src="http://unpkg.com/[email protected]/dist/vue.min.js"></script>
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://unpkg.com/cube-ui/lib/cube.min.js"></script>
    <script src="http://cdn.bootcss.com/qs/6.6.0/qs.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <link rel="stylesheet" href="http://unpkg.com/cube-ui/lib/cube.min.css">
    <style>
        /* .cube-btn {
            margin: 10px 0;
        } */
    </style>
</head>

<body>
    <div id="app">
        <cube-input v-model="value"></cube-input>
        <cube-button @click='click'>Click</cube-button>
        <cube-button @click='getTokens'>getTokens</cube-button>
        <cube-button @click='getFollowers'>getFollowers</cube-button>
        <cube-button @click='auth'>微信登入</cube-button>
        <cube-button @click='getUser'>獲取使用者資訊</cube-button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                value: 'input'
            },

            methods: {
                click: function () {
                    console.log('click')
                },
                async getTokens(){
                    const res = await axios.get('/getTokens')
                    console.log('res:',res)
                },
                async getFollowers(){
                    const res = await axios.get('/getFollowers')
                    console.log('res',res)
                },
                async auth(){
                    window.location.href = '/wxAuthorize'
                },
                async getUser(){
                    const qs = Qs.parse(window.location.search.substr(1))
                    const openid= qs.openid
                    const res = await axios.get('/getUser',{
                        params:{
                            openid
                        }
                    })
                    console.log('res',res)
                }
            },
            mounted: function () {

            },
        });
    </script>
</body>

</html>

全域性票據（一樣用到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);

繼續改下index.js：

const { ServerToken,ClientToken } = require('./mongoose')//全域性票據來源
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-http://v.qq.com/txp/iframe/player.html?vid=e3278ajafl6)(image-http://puui.qpic.cn/vpic/0/e3278ajafl6.png/0)(title-)]

八、呼叫微信jssdk

準備：

1.獲取jsconfig

index.html：

<cube-button @click='getJSConfig'>獲取jsconfig</cube-button>
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.獲取網路狀態

在wx.ready()後加，當然在ready()里加最為合理：

//獲取網路狀態
wx.getNetworkType({
     success: function (res) {
         // 返回網路型別2g，3g，4g，wifi
         const networkType = res.networkType
         console.log('getNetworkType...', networkType)
     }
})

獲取到我是wifi環境，很完美！其餘的jssdk呼叫方法也是如此！

還有一點，通常我們十前後端分離的開發專案，所以我把專案改成了前後端分離。

九、前後端分離的開發

1、新建了個weixin_pro的專案 2、將weixin專案的package.json複製到weixin_pro 3、分一個cube-ui目錄為前端程式碼 4、分一個quiz目錄為後端程式碼 5、weixin_pro下安裝依賴，為後端依賴 6、cube-ui下安裝依賴為前端依賴 7、分別啟動前端程式碼後後端程式碼

執行效果如下：

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

十、程式碼地址

前後端分離前的程式碼：http://gitee.com/huqinggui/weixin.git 前後端分離後的程式碼：http://gitee.com/huqinggui/weixin_pro.git

「其他文章」