做小程序开发,函数是绕不开的核心知识点。不管你是刚入行的新手,还是想系统梳理一遍的老开发者,搞清楚小程序里各种函数的用途和写法,都能让开发效率提升一大截。这篇文章就用大白话,把小程序函数的那些事儿讲清楚。
什么是小程序函数
简单说,函数就是一段封装好的代码,你给它一个指令,它帮你完成一个任务。在小程序里,函数承担着页面逻辑处理、数据请求、事件响应等各种工作。比如用户点了某个按钮,背后其实就是触发了一个函数来处理这个点击行为。
小程序使用的是Javascript语言,所以函数的写法和前端开发基本一致。但小程序框架本身也提供了一套自己的函数体系,比如生命周期函数、事件处理函数这些,需要开发者按规范去写。
页面生命周期函数
每个小程序页面都有一套生命周期函数,它们会在特定时机自动执行,不需要你手动调用。最常用的几个包括:
onLoad:页面加载时触发,一个页面只执行一次。适合做一些初始化操作,比如接收上一个页面传来的参数、发起数据请求。
onShow:页面显示时触发。每次切换到这个页面都会执行,适合刷新数据、更新状态这类需要反复执行的操作。
onReady:页面初次渲染完成时触发,这时候可以操作页面元素了。
onHide:页面隐藏时触发,比如跳转到别的页面或者切到后台。
onUnload:页面卸载时触发,可以在这里清理定时器、取消监听,避免内存泄漏。
理解这些函数的执行顺序很重要,一般顺序是onLoad、onShow、onReady。掌握了这个规律,什么时候请求数据、什么时候更新界面,心里就有数了。
事件处理函数
小程序里用户的一切交互都靠事件函数来响应。在wxml文件里通过bindtap、bindinput这类属性绑定,然后在js文件里写对应的处理函数。
举个例子,给按钮绑定一个点击事件,页面里写bindtap等于handleClick,然后在js里定义handleClick函数,里面写上你想执行的逻辑,比如弹出提示、跳转页面、修改数据。这里有个细节要注意,如果要更新页面数据,必须用this.setData方法,直接给变量赋值页面是不会刷新的,这是很多新手容易踩的坑。
事件函数还能拿到一个event对象,里面包含触发事件的详细信息,比如点击的坐标、携带的自定义数据等。想传参数的话,一般用data开头的自定义属性,然后在event.currentTarget.dataset里取出来。
自定义函数的写法
除了框架规定的函数,大部分业务逻辑都写在自定义函数里。写法上有两种常见方式:一种是普通函数写法,用function关键字或者直接在Page对象里定义方法;另一种是箭头函数,写法更简洁,而且不会改变this的指向,在需要用到this的场景下特别实用。
写自定义函数时建议遵循几个原则:一个函数只做一件事,函数名要见名知意,重复的代码抽成公共函数。项目大了以后,可以把通用工具函数放到utils目录下统一管理,哪个页面需要就引入哪个,代码整洁又好维护。
云函数是什么
如果你的小程序用了云开发,那还会接触到云函数。云函数运行在云端服务器上,不需要自己搭建后端。它的好处很明显:前端直接调用就能完成数据库操作、存储管理等任务,而且天然具备微信鉴权能力,能直接拿到用户的openid。
创建云函数后,在云端写好逻辑,前端用wx.cloud.callFunction方法调用,传入函数名和参数就能拿到返回结果。像支付、敏感数据处理这类不适合放在前端的逻辑,都建议放到云函数里,安全性更高。
常见问题和使用技巧
第一,注意this指向问题。在回调函数、定时器里调用页面方法时,this可能不再指向页面实例,解决办法是提前用that变量保存this,或者改用箭头函数。
第二,异步操作用async和await。数据请求往往是异步的,用promise配合async语法,代码读起来更顺,避免了层层嵌套的回调地狱。
第三,函数别写太长。一个函数超过一百行就该考虑拆分了,拆成多个小函数,出问题时排查起来更快。
第四,善用防抖和节流。像搜索输入、滚动加载这类高频触发的场景,加上防抖节流处理,能明显减少不必要的请求,提升性能。
总结
小程序函数看似内容多,其实核心就三类:生命周期函数管页面的生老病死,事件函数管用户交互,自定义函数管业务逻辑。再加一个进阶的云函数,基本就覆盖了日常开发的全部场景。多动手写几个完整页面,把生命周期跑一遍看看打印结果,函数这块就真正吃透了。基础打牢之后,再去研究性能优化和架构设计,路会走得更稳。
