前言
遇到了一個需求，想要掃碼后，進入微信小程序的某一個頁面，這就要求二維碼攜帶參數。
微信小程序開發文檔很簡單，但不太具體。
經百度和折騰，在express中成功獲得了帶參數的二維碼。
總結以下幾步，供參考。
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 { ... //待寫接口內容區域 } catch (error) { throw error; }})export default qrcode;引入了庫，定義了路由，也定義了一個post接口。第一步準備完畢。
2.獲取access_token
找微信服務端拿access_token，需要用上剛剛引入的axios工具了。
通過官方文檔介紹，獲取access_token需要三個參數，一個常量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; //待繼續補充區域 }); } catch (error) { console.log(error) }})export default qrcode;拿到了access_token接口憑證了，繼續下一步。
3.獲取二維碼的二進制數據
閱讀文檔，得知需要進一步傳參，請求微信服務端獲取二維碼的buffer數據。
需要攜帶的參數可以寫在scene中。其他參數文檔中介紹的已經很具體。
然而，這里有兩個坑要注意！
第一個坑：access_token參數要寫在url中，不然請求后會報未傳access_token的錯。
第二個坑：要設置響應格式，否則請求回來的buffer數據總是被編譯成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;//開發者自己自定義的參數 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中 //待完善區域 }) }); } catch (error) { console.log(error) }})export default qrcode;第二次axios請求，用option配置的方式，設置了responseType，避開了第二個坑。二維碼的buffer數據就在res3中。
4.用buffer生成圖片
只要buffer數據是完整的，就能正確生成二維碼。
因為需要生成圖片，所以需要引用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進行圖片繪制，也可以在后端生成圖片。可根據業務需求自行選擇。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
