微信小程序学习笔记2.2实现详情页的访问

2018/5/26继上 2.2实现了 swiper 功能后，访问详细页肯定也是我们所需要的。本章将涉及 页面间的数据传递 和 事件相应相关内容1.前期准备创建 detial 详情页 并在 app.json 中注册1）扩增上一节的页面内容 太少了不好显示 testList: [      {        name: “测试1”,        element: “测试1的相关内容”,        isHighLighted: true,        des:’这是用来显示的内容—-测试1′,        id: 1      },      {        name: “测试2”,        element: “测试2的相关内容”,        des: ‘这是用来显示的内容—-测试2′,        isHighLighted: false,        id: 2      }],随便加点就行了2）写 detail.wxml 用来显示view  textid:{{id}}/text  text标题:{{name}}/text  text元素:{{element}}/text  text描述:{{des}}/text/view3）了解一下 微信切换页面的三个函数。因为和之前讲的 navigation 那一块极为类似，在此不重复。我们用最后一个。wx.switchTabwx.redirectwx.navigateTo2.绑定事件和数据在上一笔记的 swiper-item 中的 view 添加至如下 view class=’container’ bindtap=’f0′ data-id='{{item.id}}’ data-name='{{item.name}}’ data-des='{{item.des}}’data- 自定义的数据。会在事件中被封装在对象里。具体可以通过 event.getCurrentTarget.dataset来获取数据3.传递数据1）main.js 书写函数 f0: function (event) {    var id = event.currentTarget.dataset.id    var name = event.currentTarget.dataset.name    var des = event.currentTarget.dataset.des    wx.navigateTo({      url: ‘../detail/detail?id=’ + id + ‘&des=’ + des + ‘&name=’ + name,    })  },切记：这边的 url 应是上述写法。否则会因为层级关系默认寻找 pages/main/ 目录下的文件navigateTo 中的 url 会根据页面 url 定向跳转 后面可以通过 “?” 带参2) detail.js onLoad 函数获取传入的信息 并赋值给 dataonLoad: function (options) {    var id = options.id    var name = options.name    var des = options.des    this.setData({      id:id,      name:name,      des:des,    })      },4.显示