2024年了,小程序开发环境有了不少变化。今天给想入门的朋友整理一篇最新教程,尽量说得直白点,让新手能少走弯路。
首先,准备工作要做好。你需要一台电脑,Windows和Mac都行。电脑上要装Node.js,不用太新,14以上的版本都可以。装完Node.js,命令行里跑一下node -v,能显示版本号就说明装好了。然后去微信公众平台,注册一个小程序账号。这个账号既可以用来开发调试,也可以后期提交审核上线。
接下来装微信开发者工具。这个是官方出的IDE,专门用来开发小程序的。直接去微信开放文档官网下载就行。装完登录,用微信扫码。新建项目的时候会让你填AppID,这个在你小程序账号的后台能找到。没有账号的话先用测试号,功能基本够用。
项目创建好,你会看到几个默认文件。app.js是全局逻辑,app.json是全局配置,app.wxss是全局样式。这三个是整个小程序的入口。pages文件夹里放各个页面,每个页面有自己独立的js、json、wxml、wxss四个文件。新增页面要在app.json的pages数组里声明,不然会报错。这个细节很多人刚开始会忘。
写页面的基本逻辑是这样的。用户看到的是wxml文件,控制样式的是wxss文件,处理交互的是js文件。比如你想做一个点击按钮弹出提示的功能,在wxml里写一个
网络请求是大多数小程序都要用到的功能。微信提供了wx.request这个API,用来向后端发请求。请求必须是HTTPS,而且域名要已在后台配置好。开发阶段可以先开调试模式,不校验域名。真正上线前一定要切换到正式域名,这个不能偷懒。
本地存储也经常用到。wx.setStorage和wx.getStorage这一对API,用来存简单数据。比如记住用户的登录状态、保存搜索历史,都靠它们。数据量大的话要注意,小程序本地缓存上限是10MB,超了会存不进去。
组件化是这两年官方在强推的方向。以前写页面,所有代码都堆在一起,维护起来很麻烦。现在可以把重复的部分抽成组件。定义一个components文件夹,创建组件文件,写好props和events,在需要的页面引入就行。这个写法值得早点学,对后期维护帮助很大。
最后说说调试。开发者工具左下角有console控制台,能看到JS报错和网络请求情况。手机端预览的话,用真机调试更准,模拟器有时候会跟真机表现不一样。遇到样式问题,工具里的编译器和调试器都可以单独看,方便定位。
入门阶段最难的不是写代码,而是熟悉整套开发流程。多动手做比多看书有效。找个小目标,比如做一个记事本、做一个天气查询,先做出来再说。做着做着就会了。