小程序开发之组件事件处理函数、route及setData介绍

最新推荐文章于 2025-05-21 23:45:20 发布

M.Siebel

最新推荐文章于 2025-05-21 23:45:20 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ONE PIECE--小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/JackJia2015/article/details/85708435

ONE PIECE--小程序专栏收录该内容

134 篇文章

订阅专栏

本文介绍了小程序开发中组件事件处理函数的使用，当组件触发事件时，对应的Page函数会被执行。同时，讲解了Page.route用于获取当前页面路径的方法，以及Page.prototype.setData方法，用于更新页面数据，支持数据路径形式的修改，并强调了不使用setData直接修改data可能导致的问题和限制。

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

组件事件处理函数

Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。
.wxml

<view bindtap="viewTap">click me</view>

.js

Page({
  viewTap() {
    console.log('view tap')
  }
})

Page.route

到当前页面的路径，类型为String。
例如

onShow: function () {
    console.log(this.route)
},

打印结果
pages/index/index

Page.prototype.setData(Object data, Function callback)

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

在这里插入图片描述
Object 以 key: value 键值对形式表示，将 this.data 中的 key 对应的值改变成 value。
其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

注意：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
仅支持设置可 JSON 化的数据。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

例如
.wxml

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText">改变数据1</button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray">改变数据2</button>

.js

// index.js

data: {
    text: '数据1',
    array: [{ text: '数据2' }],
  },
  changeText() {
    // this.data.text = 'changed data' // 不要直接修改 this.data
    // 应该使用 setData
    this.setData({
      text: '数据改变'
    })
  },
  changeItemInArray() {
    // 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
    this.setData({
      'array[0].text': '数据改变'
    })
  },