（微信小程序）二 ： 创建一个页面

首先先看一下pages的目录结构吧。

我创建了一个topics页面。3个文件全创建好了之后 我往topics.js添加数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/* ---topics.js----*/   Page({   data:{       topics: [       {title:"初始angular"},       {title:"初始ionic"},       {title:"初始wechat"},       ],   },    onLoad: function () {     this.data.topics.push({title:"初始 onload "})     console.log(this.data.topics)   } })    /* ---topics.js----*/

首先 page({})就不用说了吧 。可以把他看成一个 页面渲染的方法。里面承载我们整个数据与生命周期。这里只是用了onload

首先我 写了死数据 。这里要注意的一点就是 我们的数据一定要放在 data ：{ 数据 } 下。可能是为了工整吧。。如果不这样写的话 会在wxml {{ topics }} 中找不到数据。

然后为了测试 onload 是否为初始渲染页面。我让这个数组新增一条数据。

1 2 3 4 5 6 7

/* ---topics.wxml----*/   <view wx:for="{{topics}}" wx:for-item="topic" >   <text>{{index}}: {{topic.title}}</text> </view>    /* ---topics.wxml----*/

这里 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----*/   {   "pages":[     "pages/index/index",     "pages/logs/logs",     "pages/topics/topics"   ],   "window":{     "backgroundTextStyle":"light",     "navigationBarBackgroundColor": "#fff",     "navigationBarTitleText": "WeChat",     "navigationBarTextStyle":"black"   } }    /* ---app.json----*/

我们把这个路径配置到app.json中  这样就可以通过重定向的方式 来指向这个路径了。

这个时候我稍微修改一下index.wxml （注意这只是修改某一段）

1 2 3 4 5 6 7

/* ---page/index/index.wxml----*/   <view bindtap="onTopics" class="usermotto">     <text class="user-motto">{{motto}}</text> </view>   /* ---page/index/index.wxml----*/

可以看到我新添加了一个 onTopics 的方法 bindtap类似与click方法

然后我在修改 一下 index.js （注意这只是修改某一段） 在page({ }) 添加一个onTopics方法

1 2 3 4 5 6 7 8 9 10 11

/* ---page/index/index.js----*/   page({    onTopics : function(){       wx.navigateTo({         url: '../topics/topics'       })    } })   /* ---page/index/index.js----*/

以上的跳转方式还有 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

/* ---题外讲解----*/   wx.navigateTo({       url: 'String',       success: function(res){         // 成功后执行       },       fail: function() {         // 失败后执行       },       complete: function() {         // 无论成功或失败都执行       }     })   /* ---题外讲解----*/

然后。当我们点击 hello word 会跳转到页面 index.wxml上 这样也验证了 topics.js 的onload确实在数组里添加了一条数据

 

大功告成。接下来去熟悉熟悉 页面的一些 视图容器。