微信小程序 navigator组件传值，页面传值

微信小程序 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> 

在新页面下的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
    })
  },

最终效果

点击某一项作业，则跳转到了“作业详情”。在这，我们就可以查看所选作业的详细信息了！