没错换工作了 他们小程序竟然用的原生qaq总结复习一波
数据操作
数据初始值
Page({
data: {
milktea: [
{ _id: 1, name: '生打椰' },
{ _id: 2, name: '生打椰' },
{ _id: 3, name: '生打椰' },
]
},
}列表渲染
<view wx:for="{{milktea}}" wx:key="_id"></view>- 在
wx:for中，item默认来接收数组项，index默认来接收数组下标； - 可以通过
wx:for-item和wx:for-index来修改默认的item和index变量名；
条件渲染
小程序中提供了 wx:if、wx:elif、wx:else 来实现条件渲染：
<view wx:if="{{num > 0}}"></view>文本渲染
<text>{{name}}</text>修改数据
this.setData({
currentId: 2,
// ... 其他要修改的数据
})获取数据
//在 .js 中如果需要获取 data 中的数据，必须通过 this.data.属性名 来获取：
console.log(this.data.currentId);小程序事件和方法
页面的方法
Page({
data: {},
// 定义自己的方法
changeCategory() {
// 调用其他方法
this.getData();
},
getData() {
}
})事件
小程序事件系统的官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
|-------------|-------------------------------------------------|
| 类型 | 触发条件 |
| touchstart | 手指触摸动作开始 |
| touchmove | 手指触摸后移动 |
| touchcancel | 手指触摸动作被打断，如来电提醒，弹窗 |
| touchend | 手指触摸动作结束 |
| tap | 手指触摸后马上离开 |
| longpress | 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 |
绑定事件
小程序中是通过 bind 来绑定事件：
<button bindtap="changeCategory">切换分类</button>
<button bind:tap="changeCategory">切换分类</button>事件传参
小程序中不能通过小括号的方式来实现事件传参。
小程序中提供了两种传参的方式：
- 自定义属性
- mark
这两种传参方式的思路是一样的，都是将要传递的数据绑定在元素的某一个属性上，然后在事件中来获取属性的值。
1.自定义属性
通过 data-xx 将数据添加为元素的自定义属性：
<view data-id="{{item._id}}"></view>在事件方法中，通过 event 事件对象来获取数据：
Page({
changeCategory(event) {
console.log(event.currentTarget.dataset.id);
}
})2.mark
通过 mark:xx 将数据绑定在元素身上：
<view mark:id="{{item._id}}"></view>在事件方法中，通过 event 事件对象来获取数据：
Page({
changeCategory(event) {
console.log(event.mark.id);
}
})生命周期
全局生命周期
- onLaunch(options)
-
- 小程序初始化时触发（仅触发一次）。
- 通常用来初始化全局数据、登录、检查更新等操作。
- onShow(options)
-
- 小程序启动，或从后台进入前台时触发。
- 常用于页面数据更新、统计用户访问等场景。
- onHide()
-
- 小程序从前台进入后台时触发。
- 可用来保存数据或暂停任务。
- onError(error)
-
- 小程序发生脚本错误或 API 调用失败时触发。
- 适合用来做错误上报。
- onPageNotFound(res)
-
- 当跳转到不存在的页面时触发（仅首次打开时有效）。
- 可以用来引导用户到其他页面。
页面生命周期
- onLoad(options)
-
- 页面初始化时触发（只触发一次）。
- 常用来接收页面跳转的参数或初始化数据。
- onShow()
-
- 页面显示时触发（每次进入页面都会触发）。
- 适合做页面刷新或数据重新加载。
- onReady()
-
- 页面初次渲染完成时触发（只触发一次）。
- 一般用于获取页面元素节点或初始化第三方组件。
- onHide()
-
- 页面隐藏时触发（切换到其他页面或返回上一页时触发）。
- 可用来保存页面状态或暂停任务。
- onUnload()
-
- 页面卸载时触发（如用户返回或关闭小程序时）。
- 适合做资源释放或页面清理工作。
- onPullDownRefresh()
-
- 用户下拉页面时触发（需在 json****文件中开启 enablePullDownRefresh**）。**
- 常用于刷新页面数据。
- onReachBottom()
-
- 页面滚动到底部时触发。
- 适合做分页加载数据。
- onShareAppMessage()
-
- 用户点击右上角分享时触发。
- 可自定义分享内容。
- onPageScroll()
-
- 页面滚动时触发，返回滚动距离。
- 可用来做滚动动画或返回顶部按钮的显示与隐藏。
- onResize()
- 页面尺寸变化时触发（如横竖屏切换）。
- onTabItemTap(item)
- 点击 tab 切换时触发（仅对 tabBar 页面生效）。