首先先看一下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----*/
|
写到这里我们有了这个页面。但是毕竟没有把他映射到路由上 我们需要修改 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----*/
|
然后我在修改 一下 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
() {
// 无论成功或失败都执行
}
})
/* ---题外讲解----*/
|
大功告成。接下来去熟悉熟悉 页面的一些 视图容器。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
