【小程序记录】微信小程序分享太阳码Node.js实现版
1.引言
扫码已经成为一种常见又方便的进入移动应用的途径，可以把线上线下的用户流量带入你的移动应用中来。微信小程序也提供了扫码进入的功能，可以通过扫描二维码或者微信小程序专有的小程序码，进入到相应的小程序页面。
微信官方提供了用于生成带参数的小程序码或者二维码，可在扫码后进入指定的小程序页面。
总体的思路是：在我们的后端开发一个API，在其中调用微信的二维码接口，调用成功后会得到二维码图片的二进制流，最后将这个二进制流输出到前台，本文采用的是base64格式。
以下步骤中的后端代码是基于Node.js进行编写，并使用了express框架。
2.基础知识及准备工作
在开始之前，希望你对下面两个工具的知识有一定的了解
express;request;
3.获取微信小程序二维码
获取微信小程序二维码的方式主要有三个，具体详情请参考微信小程序官方文档；这里我们选用getWXACodeUnlimit接口: https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN。
关于微信二维码的获取有几点需要特别注意：
- POST 参数需要转成 JSON 字符串，不支持 form 表单提交；
- 只能生成已发布的小程序的二维码。
3.1获取ACCESS_TOKEN
由于该接口请求需携带ACCESS_TOKEN参数，所以第一步得先获取它， 代码如下：
const express = require('express')
const app = express()
const request = require('request');
// 定义小程序appid和secret
const config = {
appid: '******,
secret: '******',
}
// 定义get获取太阳码请求路由
app.get('/getQr', (req, res) => {
// 根据appid和secret调用微信api获取access_token
/**
* [获取ACCESS_TOKEN]
* @param {[String]} appid [你的小程序appid]
* @param {[String]} secret [你的小程序secretKey]
*/
request(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appid}&secret=${config.secret}`, function (err, result, body) {
if (result.statusCode === 200) {
res.json(JSON.parse(body))
} else {
res.json(body)
}
})
})
// 托管index.html静态资源
app.use(express.static('./'))
// 启动端口为3000的服务器
app.listen('3000', () => {
console.log('服务已启动 http://localhost:3000')
})
3.2获取小程序二维码
获取小程序二维码的注意事项：
如果调用成功，会直接返回图片二进制内容，如果请求失败，会返回 JSON 格式的数据。
由于二维码获取成功后返回的是图片二进制数据，可能了解node.js都会第一时间想到是用node.js的Buffer来处理二进制数据。如果转为base64则需要把编码方式转为base64位。：
const express = require('express')
const app = express()
const request = require('request');
// 定义小程序appid和secret
const config = {
appid: '*****',
secret: '*****',
}
// 定义get获取太阳码请求路由
app.get('/getQr', (req, res) => {
// 根据appid和secret调用微信api获取access_token
/**
* [获取ACCESS_TOKEN]
* @param {[String]} appid [你的小程序appid]
* @param {[String]} secret [你的小程序secretKey]
*/
request(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appid}&secret=${config.secret}`, function (err, result, body) {
if (result.statusCode === 200) {
// 请求成功后，根据access_token获取小程序太阳码，参数使用前端传过来的query参数
const params = {
url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' +JSON.parse(body).access_token,
method: "POST", //post请求
json: true, //转为json
encoding: 'base64', // 编码方式为base64
headers: {
"content-type": "application/json",
},
body: req.query //body为前端传过来的参数
}
request(params, function (error, result1, body) {
if (result1.statusCode == 200) {
res.json({
code: 200,
msg: '请求成功',
data: {
url: `data:image/png;base64,${body}`, // 请求成功把数据返回给前端
}
})
} else {
res.json(body)
}
})
} else {
res.json(body)
}
})
})
// 托管index.html静态资源
app.use(express.static('./'))
// 启动端口为3000的服务器
app.listen('3000', () => {
console.log('服务已启动 http://localhost:3000')
})
结果运行成功！
至此，所有功能已全部完成！ 下面是简单的前端模拟请求获取太阳码地址代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="img" src="" alt="">
<script>
fetch('/getQr?scene=111').then(res => res.json()).then(res => {
console.log(res)
img.src = res.data.url
})
</script>
</body>
</html>
4.总结
- 小程序必须发布后才能获取二维码
- 获取二维码二进制数据时，一定要注意编码问题，本文演示使用的base64，实际工作中可能会用到别的编码方式。