微信小程序 navigator组件传值,页面传值
近期我参与一个微信小程序项目的开发,需要将一个页面下某个模块的信息传输到另外一个页面去。通过查资料了解到,可以用navigator组件来完成。写此文记录,希望能帮到有需要的朋友。
需求具体描述
这是一个提供给学生浏览作业/考试,提交作业/考试的页面。
在这里,学生可以看到所有的作业,包括还没提交的,已经提交的作业。当然,每项作业以单独一个盒子渲染出来。
一个作业(盒子)就包括许多信息。如,哪个老师布置的,第几章作业,起止时间是什么,作业内容是什么等等。
产品设计需要有一个新的“作业详情”页面。那需要将每个盒子的信息传输到一个新的页面。
代码实现
url是新页面的链接;
?后面接要传输的数据,有多个数据用 & 连接。
<navigator class="background"
url='../studyHomeworkDetails/studyHomeworkDetails?homeworkId={
{homeworklist.homeworkId}}&teacherName={
{homeworklist.teacherName}}&hasBeenSubmit={
{homeworklist.hasBeenSubmit}}&homeworkChapter={
{homeworklist.homeworkChapter}}&homeworkTitle={
{homeworklist.homeworkTitle}}&homeworkContent={
{homeworklist.homeworkContent}}&homeworkPicture={
{homeworklist.homeworkPicture}}&homeworkSubmitContent={
{homeworklist.homeworkSubmitContent}}&homeworkSubmitPicture={
{homeworklist.homeworkSubmitPicture}}&homeworkStartTime={
{homeworklist.homeworkStartTime}}&homeworkEndTime={
{homeworklist.homeworkEndTime}}'>
<!-- 用navigator来传递数据,点击不同作业,传输相应的数据 -->
<!-- 传递作业id,老师名称,提交情况,作业章节,作业题目,作业内容,作业图片,提交内容,提交图片,开始时间,截至时间 -->
</navigator>
在新页面下的onLoad函数,通过setData,将options.data赋给新页面的值。
/**
* 生命周期函数--监听页面加载
*/
// 从上级页面获取作业的详细信息,学生可以浏览阅读
// 学生提交作业,通过表单,修改homeworkSubmitContent,homeworkSubmitPicture和hasBeenSubmit
onLoad: function (options) {
this.setData({
homeworkId: options.homeworkId,
teacherName: options.teacherName,
hasBeenSubmit: options.hasBeenSubmit,
homeworkChapter: options.homeworkChapter,
homeworkTitle: options.homeworkTitle,
homeworkContent: options.homeworkContent,
homeworkPicture: options.homeworkPicture,
homeworkSubmitContent: options.homeworkSubmitContent,
homeworkSubmitPicture: options.homeworkSubmitPicture,
homeworkStartTime: options.homeworkStartTime,
homeworkEndTime: options.homeworkEndTime
})
},
最终效果
点击某一项作业,则跳转到了“作业详情”。在这,我们就可以查看所选作业的详细信息了!