原生微信小程序基础语法--快速总结

没错换工作了 他们小程序竟然用的原生qaq总结复习一波

数据操作

数据初始值

Page({
    data: {
        milktea: [
            { _id: 1,  name: '生打椰' },
            { _id: 2,  name: '生打椰' },
            { _id: 3,  name: '生打椰' },
        ] 
    },
}

列表渲染

<view wx:for="{{milktea}}" wx:key="_id"></view>

1. 在 wx:for 中，item 默认来接收数组项，index 默认来接收数组下标；
2. 可以通过 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>

事件传参

小程序中不能通过小括号的方式来实现事件传参。

小程序中提供了两种传参的方式：

1. 自定义属性
2. 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);
    }
})

生命周期

全局生命周期

1. onLaunch(options)

• • 小程序初始化时触发（仅触发一次）。
  • 通常用来初始化全局数据、登录、检查更新等操作。

1. onShow(options)

• • 小程序启动，或从后台进入前台时触发。
  • 常用于页面数据更新、统计用户访问等场景。

1. onHide()

• • 小程序从前台进入后台时触发。
  • 可用来保存数据或暂停任务。

1. onError(error)

• • 小程序发生脚本错误或 API 调用失败时触发。
  • 适合用来做错误上报。

1. onPageNotFound(res)

• • 当跳转到不存在的页面时触发（仅首次打开时有效）。
  • 可以用来引导用户到其他页面。

页面生命周期

1. onLoad(options)

• • 页面初始化时触发（只触发一次）。
  • 常用来接收页面跳转的参数或初始化数据。

1. onShow()

• • 页面显示时触发（每次进入页面都会触发）。
  • 适合做页面刷新或数据重新加载。

1. onReady()

• • 页面初次渲染完成时触发（只触发一次）。
  • 一般用于获取页面元素节点或初始化第三方组件。

1. onHide()

• • 页面隐藏时触发（切换到其他页面或返回上一页时触发）。
  • 可用来保存页面状态或暂停任务。

1. onUnload()

• • 页面卸载时触发（如用户返回或关闭小程序时）。
  • 适合做资源释放或页面清理工作。

1. onPullDownRefresh()

• • 用户下拉页面时触发（需在 json****文件中开启 enablePullDownRefresh**）。**
  • 常用于刷新页面数据。

1. onReachBottom()

• • 页面滚动到底部时触发。
  • 适合做分页加载数据。

1. onShareAppMessage()

• • 用户点击右上角分享时触发。
  • 可自定义分享内容。

1. onPageScroll()

• • 页面滚动时触发，返回滚动距离。
  • 可用来做滚动动画或返回顶部按钮的显示与隐藏。

1. onResize()

• 页面尺寸变化时触发（如横竖屏切换）。

1. onTabItemTap(item)

• 点击 tab 切换时触发（仅对 tabBar 页面生效）。