用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 資訊/觀點 查看內容

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

巴黎彩票计划 www.hknsi.icu Rolan 2019-5-21 00:01

前言遇到了一個需求,想要掃碼后,進入微信小程序的某一個頁面,這就要求二維碼攜帶參數。微信小程序開發文檔很簡單,但不太具體。經百度和折騰,在express中成功獲得了帶參數的二維碼。總結以下幾步,供參考。1.exp ...

前言

遇到了一個需求,想要掃碼后,進入微信巴黎彩票计划的某一個頁面,這就要求二維碼攜帶參數。

微信小程序開發文檔很簡單,但不太具體。

經百度和折騰,在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??楹蚿ath???。

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進行圖片繪制,也可以在后端生成圖片??篩菀滴裥棖笞孕醒≡?。

希望對有需要的朋友能夠有幫助。

分享至 : QQ空間
收藏
原作者: 專吃貓啲鼠 來自: 掘金
pk10技巧走势图技巧 靠谱的棋牌赢钱游戏 双色球精准预测6十1 二八杠棋牌 车pk10官网开奖记录 哪个手机炸金花能赢钱 时时彩稳赚不亏的注码法 时时彩平投1:1盈利技巧 赛车不定位八码技巧 重庆时时最新开奖结果 龙虎赌博押注猫腻 时时彩计划软件苹果手机版 电子游戏平台网址大全 浙江快乐彩技巧稳赚 北京pk10官网软件下载 彩票大小倍投方案