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

没错换工作了 他们小程序竟然用的原生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-itemwx:for-index 来修改默认的 itemindex 变量名;

条件渲染

小程序中提供了 wx:ifwx:elifwx: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 页面生效)。
相关推荐
流***陌7 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
Tencent_TCB7 小时前
云开发CloudBase AI+实战:快速搭建AI小程序全流程指南
人工智能·ai·小程序·ai编程·云开发
说私域10 小时前
“开源AI大模型AI智能名片S2B2C商城小程序”视角下的教育用户策略研究
人工智能·小程序
2501_9160074713 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
一匹电信狗15 小时前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
2501_9159214318 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手18 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
Q_Q196328847519 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
ZHOU_WUYI20 小时前
Apache Spark 集群部署与使用指南
大数据·spark·apache
韩立学长21 小时前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序