微信小程序 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来传递数据，点击不同作业，传输相应的数据 -->
          <!-- 传递作业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
    })
  },

最终效果

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