首先先看一下pages的目录结构吧。
我创建了一个topics页面。3个文件全创建好了之后 我往topics.js添加数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
首先 page({})就不用说了吧 。可以把他看成一个 页面渲染的方法。里面承载我们整个数据与生命周期。这里只是用了onload
首先我 写了死数据 。这里要注意的一点就是 我们的数据一定要放在 data :{ 数据 } 下。可能是为了工整吧。。如果不这样写的话 会在wxml {{ topics }} 中找不到数据。
然后为了测试 onload 是否为初始渲染页面。我让这个数组新增一条数据。
1 2 3 4 5 6 7 |
|
这里 wx:for="{{topics}}" 循环我们data中的topics数据。 wx:for-item="topic"则是我们每个实例 。类似与forEach (如果没有wx:for-item 则默认为item.title)-
写到这里我们有了这个页面。但是毕竟没有把他映射到路由上 我们需要修改 app.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
我们把这个路径配置到app.json中 这样就可以通过重定向的方式 来指向这个路径了。
这个时候我稍微修改一下index.wxml (注意这只是修改某一段)
1 2 3 4 5 6 7 |
|
可以看到我新添加了一个 onTopics 的方法 bindtap类似与click方法
然后我在修改 一下 index.js (注意这只是修改某一段) 在page({ }) 添加一个onTopics方法
1 2 3 4 5 6 7 8 9 10 11 |
|
以上的跳转方式还有 wx.redirectTo 他会刷新本页面。而 wx.navigateTo 会跳转到另一个页面上是可以后退回去的。
当然 他们都是可以传值的 比如 wx.navigateTo({ url: test?id=1 })
甚至他们还有其他属性 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
然后。当我们点击 hello word 会跳转到页面 index.wxml上 这样也验证了 topics.js 的onload确实在数组里添加了一条数据
大功告成。接下来去熟悉熟悉 页面的一些 视图容器。