微信小程序中数据和事件以及路由

数据相关

修改数据

Page构造函数,接收一个对象,对象有data属性,该属性是页面中的数据的存储地点。

我们想要在页面运行一段时间之后,修改页面上的数据。因为是数据驱动,所以我们修改数据。

修改方式: 该对象的某一个方法内 调用this.setData来修改数据

this.setData(obj);

obj.key: 要修改的层级路径

obj.value: 层级路径对应的值

这样就可以在修改数据的同时,修改页面上的显示内容

demo:

原始页面:

<view>
<text>{{title}}</text>
</view>
<view>
<text>{{people.name}}</text>
</view>

原始数据:

data: {
title: "今天天气不错",
    people: {
        name: "王老五"
    }
},

渲染页面:

图片10.png

数据丢失

千万不要直接this.data.xxx = xxx;

因为此时只是修改了数据,但没有触发修改页面内容的机制。导致页面与数据不一致。

事件

在微信小程序中,事件分两类,一类是冒泡事件,用bind-*来添加 一类是不冒泡事件, 用catch-*来添加

冒泡事件

绑定冒泡事件,通过bind-*添加, 如下:给id是child的组件添加了一个tap事件,事件函数的名称是child。要求必须在对应的js文件中,添加child事件函数

wxml:

<view id="father">
父亲
<view id="child" bindtap='child'>儿子</view>
</view>

js:

Page({
/*** 页面的初始数据*/
data: {
},
 /*** 生命周期函数--监听页面加载*/
 onLoad: function (options) {
},
child: function() {
console.log("子元素的事件")
}
})

点击触发:

图片1.png

现在我们再去给父组件绑定一个同类型事件。

图片2.png

不冒泡事件

将绑定的方式从bind-修改为catch-即可

图片3.png

自定义属性

通过data-*给组件添加自定义属性。如何获取这些自定义属性呢?

答:通过事件获取 在事件函数中有一个事件对象 从它身上可以得到对应的自定义属性。

demo:

图片4.png

如何获取? 答:通过e.currentTarget.dataset.xx

事件对象

查看:

图片5.png

changedTouches: 手指的位置集合 里面的每一个成员代表一个手指

成员:手指信息

 clientX: 手指在视口中的x位置

 clientY: 手指在视口中的y位置

 pageX: 手指在页面中的x位置

 pageY: 手指在页面中的y位置

currentTarget: 绑定事件的组件对象 拥有各种属性

 id: 组件的id

 offsetLeft:距离父组件的left位置

 offsetTop: 距离付组件的top位置

 dataset:组件的自定义数据集合对象

detail:手指的位置

target:触发事件的组件 跟currentTarget结构一致

timeStamp:时间戳 表示页面加载开始,距离事件触发一共过了多久 毫秒值单位

touches:与changedTouches结构一致

type:事件类型

路由

微信小程序中的路由,指的就是页面之间的跳转

页面分类

微信小程序的所有页面都被配置在app.json中的pages数组里。

可是还有一部分是配置在tabBar的list中的。

tabBar页面:在pages中也在tabBar的list中的页面,我们叫做tabBar页面。

普通页面:在pages中,但不在tabBar中的页面,我们叫做普通页面。

跳转方式分类
  • 第一种:通过组件跳转

组件名称:navigator

属性:

url: 跳转的目标页面地址

open-type: 打开方式 这个值要根据目标页面的类型决定

如果目标页面是一个tabBar页面,那么要设置为 switchTab

如果目标页面是一个普通页面,那么要设置为navigateTo

  • 通过代码跳转
跳转方式
通过组件跳转tabBar页面
<navigator url="/pages/second/second" open-type="switchTab">跳转到第二个页面</navigator>
通过组件跳转普通页面
<navigator url="/pages/third/third" open-type="navigateTo">跳转到第三个页面</navigator>
通过代码跳转tabBar页面
wx.switchTab({
    url: '/pages/second/second'
})
通过代码跳转普通页面
wx.navigateTo({
   url: '/pages/third/third'
})
补充

以上是常规的跳转方式,都是打开目标页面,隐藏当前页面。还有一些方式,是会对当前页面进行操作的。

重定向方式

组件:

重定向到三页

代码:wx.redirectTo({url: "/pages/third/third"})

后退方式:

组件:<navigator open-type='navigateBack'>后退</navigator>
代码: wx.navigateBack()

页面历史记录

微信小程序中的历史记录是采用堆栈结构。

堆栈:先进后出,后进先出

队列:先进先出,后进后出

情况1 跳转到tabBar页面

当前页面:隐藏

目标页面:加载、显示、渲染

情况2 navigateTo到普通页面

当前页面:隐藏

目标页面:加载、显示、渲染

情况3 redirectTo到普通页面

当前页面:卸载

目标页面:加载、显示、渲染

情况4 navigateBack

当前页面:卸载

目标页面:显示

最后

作者每周都会发布不错的文章,供大家学习,欢迎大家关注。

微信搜索【前端每日技巧】关注公众号,写作不易,希望能点赞👍️加收藏❤️和转发。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值