溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用express獲取微信小程序二維碼小記

發(fā)布時(shí)間：2020-10-14 07:08:41 來(lái)源：腳本之家 閱讀：210 作者：專吃貓啲鼠 欄目：web開發(fā)

前言

遇到了一個(gè)需求，想要掃碼后，進(jìn)入微信小程序的某一個(gè)頁(yè)面，這就要求二維碼攜帶參數(shù)。

微信小程序開發(fā)文檔很簡(jiǎn)單，但不太具體。

經(jīng)百度和折騰，在express中成功獲得了帶參數(shù)的二維碼。

總結(jié)以下幾步，供參考。

1.express項(xiàng)目中引入http請(qǐng)求工具

為什么要在服務(wù)端引入這個(gè)工具？因?yàn)檫€需要用這個(gè)工具去找微信服務(wù)端拿access_token接口憑證，來(lái)保證安全。

筆者用的是axios。cmd進(jìn)入根目錄，npm安裝。

# npm i axios --save

肯定需要寫一個(gè)獲得二維碼的接口。在寫這個(gè)接口的文件中引入axios即可，接口路由的寫法不具體展開介紹。

import express from 'express';
import axios from 'axios'; //引入axios庫(kù)
let qrcode= express.Router();
qrcode.post('/getQrode',async (req,res)=>{
  try {
    ...
    //待寫接口內(nèi)容區(qū)域
  } catch (error) {
    throw error;
  }
})
export default qrcode;

引入了庫(kù)，定義了路由，也定義了一個(gè)post接口。第一步準(zhǔn)備完畢。

2.獲取access_token

找微信服務(wù)端拿access_token，需要用上剛剛引入的axios工具了。

通過(guò)官方文檔介紹，獲取access_token需要三個(gè)參數(shù)，一個(gè)常量grant_type，兩個(gè)變量分別是appid和secret（注冊(cè)小程序的時(shí)候就會(huì)獲得）

修改接口即可獲得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ù)補(bǔ)充區(qū)域
    });
  } catch (error) {
    console.log(error)
  }
})
export default qrcode;

拿到了access_token接口憑證了，繼續(xù)下一步。

3.獲取二維碼的二進(jìn)制數(shù)據(jù)

閱讀文檔，得知需要進(jìn)一步傳參，請(qǐng)求微信服務(wù)端獲取二維碼的buffer數(shù)據(jù)。

需要攜帶的參數(shù)可以寫在scene中。其他參數(shù)文檔中介紹的已經(jīng)很具體。

然而，這里有兩個(gè)坑要注意！

第一個(gè)坑：access_token參數(shù)要寫在url中，不然請(qǐng)求后會(huì)報(bào)未傳access_token的錯(cuò)。

第二個(gè)坑：要設(shè)置響應(yīng)格式，否則請(qǐng)求回來(lái)的buffer數(shù)據(jù)總是被編譯成String字符串，造成文件損壞，就無(wú)法轉(zhuǎn)化為正常圖片（這個(gè)折磨了我好久）

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=>{
        //請(qǐng)求到的二維碼buffer就在res3中
        //待完善區(qū)域
      })
    });
  } catch (error) {
    console.log(error)
  }
})
export default qrcode;

第二次axios請(qǐng)求，用option配置的方式，設(shè)置了responseType，避開了第二個(gè)坑。二維碼的buffer數(shù)據(jù)就在res3中。

4.用buffer生成圖片

只要buffer數(shù)據(jù)是完整的，就能正確生成二維碼。

因?yàn)樾枰蓤D片，所以需要引用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;

就會(huì)在根目錄下的public/photo文件夾中生成制定名稱的二維碼圖片。供小程序訪問調(diào)用。

后記

獲取二維碼后，可以在前端利用canvas進(jìn)行圖片繪制，也可以在后端生成圖片?？筛鶕?jù)業(yè)務(wù)需求自行選擇。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手