147 lines
3.7 KiB
Markdown
147 lines
3.7 KiB
Markdown
# 小程序二维码Scene参数说明
|
|
|
|
## 概述
|
|
小程序通过扫描二维码进入时，参数通过 `scene` 字段传递，格式为URL编码的键值对字符串。
|
|
|
|
## 后端生成
|
|
|
|
### DiagnosisLogic.php
|
|
```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 解析逻辑
|
|
|
|
```javascript
|
|
// 解析页面参数（支持普通参数和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;
|
|
};
|
|
```
|
|
|
|
### 使用示例
|
|
|
|
```javascript
|
|
// 在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参数）
|
|
```javascript
|
|
// currentPage.options
|
|
{
|
|
scene: "id%3D4%26share_user%3D1"
|
|
}
|
|
|
|
// 解析后
|
|
{
|
|
id: "4",
|
|
share_user: "1"
|
|
}
|
|
```
|
|
|
|
### 2. 普通跳转进入（直接参数）
|
|
```javascript
|
|
// 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参数和普通参数，确保两种进入方式都能正常工作
|
|
|
|
## 调试方法
|
|
|
|
### 查看原始参数
|
|
```javascript
|
|
const pages = getCurrentPages();
|
|
const currentPage = pages[pages.length - 1];
|
|
console.log('原始options:', currentPage.options);
|
|
```
|
|
|
|
### 查看解析结果
|
|
```javascript
|
|
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. **加载数据**: 使用解析后的参数加载诊单详情
|