使用express獲取微信小程序二維碼小記
前言
遇到了一個需求，想要掃碼后，進入微信小程序的某一個頁面，這就要求二維碼攜帶參數(shù)。
微信小程序開發(fā)文檔很簡單，但不太具體。
經百度和折騰，在express中成功獲得了帶參數(shù)的二維碼。
總結以下幾步，供參考。
1.express項目中引入http請求工具
為什么要在服務端引入這個工具？因為還需要用這個工具去找微信服務端拿access_token接口憑證，來保證安全。
筆者用的是axios。cmd進入根目錄，npm安裝。
# npm i axios --save
肯定需要寫一個獲得二維碼的接口。在寫這個接口的文件中引入axios即可，接口路由的寫法不具體展開介紹。
import express from 'express';
import axios from 'axios'; //引入axios庫
let qrcode= express.Router();
qrcode.post('/getQrode',async (req,res)=>{
try {
...
//待寫接口內容區(qū)域
} catch (error) {
throw error;
}
})
export default qrcode;
引入了庫，定義了路由，也定義了一個post接口。第一步準備完畢。
2.獲取access_token
找微信服務端拿access_token，需要用上剛剛引入的axios工具了。
通過官方文檔介紹，獲取access_token需要三個參數(shù)，一個常量grant_type，兩個變量分別是appid和secret（注冊小程序的時候就會獲得）
修改接口即可獲得access_token
import express from 'express';
import axios from 'axios';
let qrcode= express.Router();
qrcode.post('/share',async (req,res)=>{
try {
let appid = 'wxc********b7a';
let secret = '2bfa**************e8682';
let url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`
axios.get(url).then(res2=>{
//access_token就在res2中
let access_token = res2.data.access_token;
//待繼續(xù)補充區(qū)域
});
} catch (error) {
console.log(error)
}
})
export default qrcode;
拿到了access_token接口憑證了，繼續(xù)下一步。
3.獲取二維碼的二進制數(shù)據
閱讀文檔，得知需要進一步傳參，請求微信服務端獲取二維碼的buffer數(shù)據。
需要攜帶的參數(shù)可以寫在scene中。其他參數(shù)文檔中介紹的已經很具體。
然而，這里有兩個坑要注意！
第一個坑：access_token參數(shù)要寫在url中，不然請求后會報未傳access_token的錯。
第二個坑：要設置響應格式，否則請求回來的buffer數(shù)據總是被編譯成String字符串，造成文件損壞，就無法轉化為正常圖片（這個折磨了我好久）
import express from 'express';
import axios from 'axios';
let qrcode = express.Router();
qrcode.post('/share',async (req,res)=>{
try {
let appid = 'wxc********b7a';
let secret = '2bfa**************e8682';
let url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`
axios.get(url).then(res2=>{
let scene = req.body._id;//開發(fā)者自己自定義的參數(shù)
axios(
{
headers:{"Content-type":"application/json"},
method: 'post',
responseType: 'arraybuffer',
url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token='+access_token+'',
data:{
scene:scene,
page:'pages/infor/main',
width: 280
}
}
).then(res3=>{
//請求到的二維碼buffer就在res3中
//待完善區(qū)域
})
});
} catch (error) {
console.log(error)
}
})
export default qrcode;
第二次axios請求，用option配置的方式，設置了responseType，避開了第二個坑。二維碼的buffer數(shù)據就在res3中。
4.用buffer生成圖片
只要buffer數(shù)據是完整的，就能正確生成二維碼。
因為需要生成圖片，所以需要引用fs模塊和path模塊。
import express from 'express';
import axios from 'axios';
import path from 'path';
import fs from 'fs';
let qrcode= express.Router();
qrcode.post('/share',async (req,res)=>{
try {
let appid = 'wxc********b7a';
let secret = '2bfa**************e8682';
let url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
axios.get(url).then(res2=>{
let access_token = res2.data.access_token;
let scene = req.body._id;
axios(
{
headers:{"Content-type":"application/json"},
method: 'post',
responseType: 'arraybuffer',
url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token='+access_token+'',
data:{
scene:scene,
page:'pages/infor/main',
width: 280
}
}
).then(res3=>{
let src = path.dirname(__dirname).replace(/\\/g,'/')+`/public/photo/${req.body._id}.png`;
fs.writeFile(src, res3.data, function(err) {
if(err) {console.log(err);}
res.json({msg:ok});
});
})
});
} catch (error) {
console.log(error);
res.json({error})
}
})
export default qrcode;
就會在根目錄下的public/photo文件夾中生成制定名稱的二維碼圖片。供小程序訪問調用。
后記
獲取二維碼后，可以在前端利用canvas進行圖片繪制，也可以在后端生成圖片?？筛鶕I(yè)務需求自行選擇。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
MongoDB 是一個基于分布式文件存儲的數(shù)據庫，由 C++ 語言編寫。這篇文章主要介紹了NodeJS中的MongoDB快速入門詳細教程的相關資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Nodejs極簡入門教程（二）：定時器,本文講解了setTimeout、setInterval、setImmediate及process.nextTick等內容,需要的朋友可以參考下2014-10-10
這篇文章主要介紹了詳解nodejs 文本操作模塊-fs模塊（二）,主要包括文件的讀寫操作，有興趣的可以了解一下。2016-12-12
這篇文章主要介紹了基于Node.js的WebSocket通信實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
在本篇文章里小編給大家整理的是關于node創(chuàng)建Vue項目步驟詳解內容，需要的朋友們可以學習下。2020-03-03
本篇文章給大家分享了Nodejs內存處理相關的知識點以及實例代碼分享，有興趣的朋友跟著學習下。2018-05-05
這篇文章主要為大家介紹了node.js接口的復習及使用案例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
Node.js中console.log()輸出彩色字體的方法示例
這篇文章主要給大家介紹了關于Node.js中console.log()輸出彩色字體的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Node.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
這篇文章主要介紹了一下什么是node，以及node環(huán)境配置，之后我們就將開始深入去學習node了，感興趣的小伙伴可以深入了解閱讀一下2023-03-03
下面小編就為大家?guī)硪黄猲odejs之get/post請求的幾種方式小結。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07