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

数据相关

修改数据

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: "王老五"    }},

渲染页面：

数据丢失

千万不要直接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("子元素的事件")}})

点击触发：

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

不冒泡事件

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

自定义属性

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

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

demo：

如何获取？ 答：通过e.currentTarget.dataset.xx

事件对象

查看:

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"})

后退方式：

组件：后退
代码: wx.navigateBack()

页面历史记录

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

堆栈：先进后出，后进先出

队列：先进先出，后进后出

情况1 跳转到tabBar页面

当前页面：隐藏

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

情况2 navigateTo到普通页面

当前页面：隐藏

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

情况3 redirectTo到普通页面

当前页面：卸载

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

情况4 navigateBack

当前页面：卸载

目标页面：显示

最后

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

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