<block wx:if="{{periodList.length > 0}}"> <i-cell wx:for="{{periodList}}" wx:key="{{item.id}}" data-item="item" title="{{item.name}}" label="{{item.subjectName}}" is-link url="/pages/periodExamNew/index?subjectName={{item.subjectName}}&periodName={{item.name}}"></i-cell> </block> 是什么意思？
这段代码是微信小程序框架（WXML）中的一段模板语法，主要包含条件渲染和列表渲染。让我详细解释：
1. 整体结构
<block wx:if="{{periodList.length > 0}}">
<!-- 列表内容 -->
</block>
<block>：一个包装元素，本身不会渲染成真实DOM，只用于包裹代码块wx:if：条件渲染指令- 判断
periodList数组的长度是否大于0 - 只有数组不为空时，才渲染内部内容
- 判断
2. 列表渲染部分
<i-cell wx:for="{{periodList}}"
wx:key="{{item.id}}"
data-item="item"
title="{{item.name}}"
label="{{item.subjectName}}"
is-link
url="/pages/periodExamNew/index?subjectName={{item.subjectName}}&periodName={{item.name}}">
</i-cell>
关键属性解析：
| 属性 | 说明 |
|---|---|
wx:for="{{periodList}}" |
循环遍历 periodList 数组 |
wx:key="{{item.id}}" |
使用 item.id 作为列表项唯一标识，优化渲染性能 |
data-item="item" |
绑定当前项数据，用于事件处理 |
title="{{item.name}}" |
显示主标题（如：学期名称） |
label="{{item.subjectName}}" |
显示副标题/标签（如：科目名称） |
is-link |
显示右侧箭头，表示可点击 |
url="..." |
点击跳转的页面路径，携带两个参数：<br>subjectName（科目名）<br>periodName（学期名） |
3. 数据流向示例
假设 periodList 数据为：
[
{ id: 1, name: "2023上学期", subjectName: "数学" },
{ id: 2, name: "2023下学期", subjectName: "英语" }
]
渲染结果相当于：
<!-- 第一个单元格 -->
<i-cell title="2023上学期"
label="数学"
is-link
url="/pages/periodExamNew/index?subjectName=数学&periodName=2023上学期">
</i-cell>
<!-- 第二个单元格 -->
<i-cell title="2023下学期"
label="英语"
is-link
url="/pages/periodExamNew/index?subjectName=英语&periodName=2023下学期">
</i-cell>
4. 功能总结
这段代码实现了一个学期/科目列表，当用户点击某个学期时，会跳转到考试页面，并携带相应的科目和学期信息。
这是一种典型的微信小程序列表渲染模式，常用于展示可点击的列表项。
url="/pages/periodExamNew/index?subjectName={{item.subjectName}}&periodName={{item.name}}"> subjectName和periodName 这两个参数，另外页面怎么接收处理？
在微信小程序中，目标页面（/pages/periodExamNew/index）接收URL参数的方式如下：
1. 在目标页面的JS中获取参数
在目标页面的"code-container">
// pages/periodExamNew/index.js
Page({
data: {
subjectName: '',
periodName: ''
},
options
console.log('科目名称:', subjectName)
console.log('学期名称:', periodName)
// 将参数存储到data中，供页面使用
this.setData({
subjectName: subjectName,
periodName: periodName
})
// 可以继续做其他处理，比如根据参数请求数据
this.loadExamData(subjectName, periodName)
},
loadExamData: function(subject, period) {
// 根据科目和学期获取考试数据
wx.request({
url: 'https://api.example.com/exams',
data: {
subject: subject,
period: period
},
success: (res) => {
// 处理返回的数据
console.log('考试数据:', res.data)
}
})
}
})
2. 在WXML中使用参数
<!-- pages/periodExamNew/index.wxml -->
<view>
<!-- 直接显示参数 -->
<view>当前科目：{{subjectName}}</view>
<view>当前学期：{{periodName}}</view>
<!-- 或者用作其他组件的参数 -->
<view class="exam-title">{{periodName}} - {{subjectName}} 考试</view>
</view>
3. 完整的处理流程示例
页面A（列表页）- 传递参数：
<!-- 传递参数 -->
<i-cell
title="{{item.name}}"
label="{{item.subjectName}}"
is-link
url="/pages/periodExamNew/index?subjectName={{item.subjectName}}&periodName={{item.name}}">
</i-cell>
页面B（详情页）- 接收并使用参数：
// pages/periodExamNew/index.js
Page({
data: {
subjectName: '',
periodName: '',
examList: [] // 考试列表
},
options
// 2. 设置到data
this.setData({
subjectName: subjectName || '未知科目',
periodName: periodName || '未知学期'
})
// 3. 设置页面标题
wx.setNavigationBarTitle({
title: `${periodName} - ${subjectName}考试`
})
// 4. 根据参数加载数据
this.fetchExamList()
},
// 根据科目和学期获取考试列表
fetchExamList: function() {
const { subjectName, periodName } = this.data
wx.showLoading({
title: '加载中...',
})
wx.request({
url: 'https://api.example.com/exam/list',
method: 'GET',
data: {
subject: subjectName,
period: periodName
},
success: (res) => {
this.setData({
examList: res.data.list || []
})
},
complete: () => {
wx.hideLoading()
}
})
}
})
4. 注意事项
参数处理技巧：
decodeURIComponent(options.subjectName || '')
const periodName = decodeURIComponent(options.periodName || '')
// 2. 设置默认值
this.setData({
subjectName: subjectName || '默认科目',
periodName: periodName || '默认学期'
})
// 3. 参数验证
if (!subjectName || !periodName) {
wx.showToast({
title: '参数不完整',
icon: 'error'
})
return
}
}
特殊字符处理：
如果参数中可能包含特殊字符（如空格、&、=等），需要编码和解码：
// 传递时自动编码（小程序会自动处理）
// url="/pages/periodExamNew/index?subjectName={{item.subjectName}}&periodName={{item.name}}"
// 接收时解码
decodeURIComponent(options.subjectName || '')
const periodName = decodeURIComponent(options.periodName || '')
}
5. 调试技巧
在开发过程中，可以在控制台查看参数是否正确传递：
"toolbar">
6. 参数传递的其他方式
如果需要传递复杂对象或大量数据，可以考虑：
// 方法1：通过全局变量
wx.setStorageSync('examParams', {
subjectName: '数学',
periodName: '2023上学期',
otherData: {...}
})
// 方法2：通过EventBus
// 方法3：通过页面栈获取前一个页面的数据
总结：URL参数通过onLoad(options)接收，然后存储在data中供页面使用，同时可以根据参数进行数据请求等后续操作。
