zyt/MINI_PROGRAM_SCENE_PARAMS.md

小程序二维码Scene参数说明

概述

小程序通过扫描二维码进入时，参数通过 scene 字段传递，格式为URL编码的键值对字符串。

后端生成

DiagnosisLogic.php

// 构建scene参数
$scene = "id={$diagnosisId}&share_user={$shareUserId}";

// 调用微信接口
$data = [
    'scene' => $scene,  // 例如: "id=4&share_user=1"
    'page' => 'pages/order/monad/monad',
    'check_path' => false,
    'env_version' => 'release',
    'width' => 280
];

微信返回的scene格式

微信会自动对scene进行URL编码，小程序接收到的格式为：

scene: "id%3D4%26share_user%3D1"

前端解析

monad.vue 解析逻辑

// 解析页面参数（支持普通参数和scene参数）
const parsePageParams = (options) => {
    const params = {};
    
    // 如果有scene参数（扫码进入），解析scene
    if (options.scene) {
        try {
            // URL解码scene参数: "id%3D4%26share_user%3D1" -> "id=4&share_user=1"
            const decodedScene = decodeURIComponent(options.scene);
            
            // 解析键值对
            decodedScene.split('&').forEach(item => {
                const [key, value] = item.split('=');
                if (key && value) {
                    params[key] = value;
                }
            });
        } catch (error) {
            console.error('解析scene参数失败:', error);
        }
    }
    
    // 合并普通参数（普通跳转进入）
    Object.keys(options).forEach(key => {
        if (key !== 'scene' && options[key]) {
            params[key] = options[key];
        }
    });
    
    return params;
};

使用示例

// 在onMounted或需要的地方调用
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const params = parsePageParams(currentPage.options);

console.log('解析后的参数:', params);
// 输出: { id: "4", share_user: "1" }

// 使用参数
const diagnosisId = params.id;
const shareUserId = params.share_user;

两种进入方式

1. 扫码进入（scene参数）

// currentPage.options
{
    scene: "id%3D4%26share_user%3D1"
}

// 解析后
{
    id: "4",
    share_user: "1"
}

2. 普通跳转进入（直接参数）

// currentPage.options
{
    id: "4",
    share_user: "1"
}

// 解析后
{
    id: "4",
    share_user: "1"
}

注意事项

1. scene长度限制: 微信小程序scene参数最大长度为32个字符（编码前）
2. URL编码: 微信会自动对scene进行URL编码，前端需要使用 decodeURIComponent 解码
3. 参数格式: 使用 key=value&key2=value2 格式，不要使用JSON
4. 兼容性: 解析函数同时支持scene参数和普通参数，确保两种进入方式都能正常工作

调试方法

查看原始参数

const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
console.log('原始options:', currentPage.options);

查看解析结果

const params = parsePageParams(currentPage.options);
console.log('解析后的参数:', params);
console.log('诊单ID:', params.id);
console.log('分享用户ID:', params.share_user);

完整流程

1. 管理后台: 点击"小程序二维码"按钮
2. 后端生成: 调用 generateMiniProgramQrcode 接口
3. 构建scene: id=4&share_user=1
4. 微信编码: 微信自动编码为 id%3D4%26share_user%3D1
5. 用户扫码: 小程序接收到 options.scene = "id%3D4%26share_user%3D1"
6. 前端解析: 使用 parsePageParams 解析为 { id: "4", share_user: "1" }
7. 加载数据: 使用解析后的参数加载诊单详情