Back

【小程序记录】微信小程序分享太阳码Node.js实现版

2021-08-07

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">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
  <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>
小程序必须发布后才能获取二维码
获取二维码二进制数据时，一定要注意编码问题，本文演示使用的base64，实际工作中可能会用到别的编码方式。