微信小程序码如何生成 微信小程序码生成方法攻略教程大全

微信小程序码如何生成：攻略教程大全

微信小程序码是一种将小程序主页或特定页面整合到一张二维码中的方式。这种二维码能够通过扫描的方式访问你的小程序，非常便于推广和分享。

下面我们将详细介绍如何生成微信小程序码，并提供两条示例说明。

生成微信小程序码的方法

在生成小程序码之前，需要先确定你要生成哪一种类型的小程序码。微信小程序官方提供了三种小程序码：

1. 通过小程序页面 Path 生成二维码。
2. 通过小程序页面地址生成二维码。
3. 通过小程序参数生成二维码。

其中，通过小程序页面 Path 生成二维码是最常用的一种方式。

通过小程序页面 Path 生成二维码

在小程序内部，通过调用 wx.navigateTo 或 wx.switchTab 等页面跳转 API 时，可以在路径的参数中加入任意的参数，这些参数会被解析并传递到目标页面的 onLoad 方法中。

在生成小程序码时，只需要将小程序主页的路径加上参数，然后通过微信公众平台的小程序管理后台提供的“获取小程序码 API”接口，将该路径传递给接口即可生成小程序码。

具体步骤如下：

1. 通过下面的代码块引入微信官方的“获取小程序码 API”：

const request = require('request');

1. 通过以下代码块构建请求参数：

const appId = "小程序AppID";
const appSecret = "小程序AppSecret";
const pagePath = "小程序主页路径（带参数）";
const width = "小程序码宽度";
const autoColor = false; // 是否自动配置线条颜色
const lineColor = { "r": 0, "g": 0, "b": 0 }; // 自定义线条颜色

1. 通过以下代码块发送请求并获取小程序码二进制流：

const wxacodeUrl = `https://api.weixin.qq.com/wxa/getwxacode?access_token=${accessToken}`;
const requestData = {
    "path": pagePath,
    "width": width,
    "auto_color": autoColor,
    "line_color": lineColor
};

// 发送请求并获取小程序码二进制流
request({
        url: wxacodeUrl,
        method: "POST",
        json: true,
        body: requestData,
        encoding: null
    },
    (error, response, body) => {
        if (!error && response.statusCode === 200) {
            console.log("小程序码生成成功！");
        } else {
            console.log("小程序码生成失败！");
        }
    }
);

通过小程序页面地址生成二维码

在小程序页面中，可以通过调用 API wx.pageScrollTo 或 wx.createCanvasContext 等 API 获取当前页面的地址，然后通过 QRCode 等第三方库生成二维码。

具体步骤如下：

1. 通过以下代码块引入 QRCode 库：

import QRCode from "qrcode";

1. 通过以下代码块获取当前页面的地址并生成二维码：

wx.createSelectorQuery().selectViewport().fields({
    rect: true,
    size: true
}, (res) => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    const canvasWidth = res.width;
    const canvasHeight = res.height;

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    document.body.appendChild(canvas);

    QRCode.toCanvas(ctx, pageUrl, {
        width: canvasWidth,
        height: canvasHeight,
        margin: 0
    });
}).exec();

通过小程序参数生成二维码

在小程序页面 Path 中加入参数是最直接的一种方式，同时也是使用最多的方式。在实际使用时，可以根据场景需要为小程序定义不同的参数传递方式。

示例说明

示例 1： 通过小程序页面 Path 生成二维码

如下代码示例演示了如何通过小程序页面 Path 生成小程序码。

const request = require('request');

const appId = "小程序AppID";
const appSecret = "小程序AppSecret";
const pagePath = "pages/index/index?id=123"; // 小程序主页路径，带参数
const width = "280";
const autoColor = false; // 是否自动配置线条颜色
const lineColor = { "r": 0, "g": 0, "b": 0 }; // 自定义线条颜色

// 获取小程序 access_token
request.get(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`,
    (error, response, body) => {
        const token = JSON.parse(body).access_token;

        // 发送请求获取小程序码并保存二进制流到本地
        const wxacodeUrl = `https://api.weixin.qq.com/wxa/getwxacode?access_token=${token}`;
        const requestData = {
            "path": pagePath,
            "width": width,
            "auto_color": autoColor,
            "line_color": lineColor
        };

        request({
                url: wxacodeUrl,
                method: "POST",
                json: true,
                body: requestData,
                encoding: null
            },
            (error, response, body) => {
                if (!error && response.statusCode === 200) {
                    console.log("小程序码生成成功！");

                    // 将二进制流保存到本地
                    fs.writeFile("wxacode.jpg", body, function(err) {
                        if (err) {
                            console.log("保存小程序码失败！");
                            console.log(err);
                        } else {
                            console.log("小程序码已保存到本地！");
                        }
                    });
                } else {
                    console.log("小程序码生成失败！");
                }
            }
        );
    });

示例 2： 通过小程序页面地址生成二维码

如下代码示例演示了如何通过小程序页面地址生成小程序码。

import QRCode from "qrcode";

const pageUrl = "小程序页面地址，不带参数";

wx.createSelectorQuery().selectViewport().fields({
    rect: true,
    size: true
}, (res) => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    const canvasWidth = res.width;
    const canvasHeight = res.height;

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    document.body.appendChild(canvas);

    QRCode.toCanvas(ctx, pageUrl, {
        width: canvasWidth,
        height: canvasHeight,
        margin: 0
    });
}).exec();

结语

通过上述方法，你可以很容易地生成小程序码并进行推广。在实际使用时，根据需求和场景的不同，还可以采用更多的生成方式。