(微信小程序)二 : 创建一个页面

本文详细介绍了如何在小程序中设置页面加载数据,并实现页面间的跳转功能。通过具体实例,展示了topics页面的数据加载过程及使用wx.navigateTo进行页面跳转的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先先看一下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确实在数组里添加了一条数据

 

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

转载于:https://www.cnblogs.com/dandingjun/p/6088202.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值