微信小程序凭借轻量、即用即走的特性,成为移动开发的重要选择。本文梳理几个核心知识点,助你快速入门。
1. 项目结构:清晰的文件规范
小程序有固定的文件结构,核心包括:
- .json:配置文件(如页面路径、窗口表现)
- .wxml:模板文件(类似 HTML,定义页面结构)
- .wxss:样式文件(类似 CSS,支持 rpx 自适应单位)
- .js:逻辑脚本(处理数据和交互)
全局配置在app.json
中定义,页面配置在各自目录的.json
中,可覆盖全局设置。
2. 数据绑定与渲染:声明式开发
小程序采用数据驱动视图,通过{``{ }}
绑定数据:
<!-- 页面.wxml -->
<view>{{ message }}</view>
<text wx:if="{{ isShow }}">条件渲染</text>
<view wx:for="{{ list }}" wx:key="index">
{{ index }}: {{ item.name }}
</view>
// 页面.js
Page({
data: {
message: "Hello 小程序",
isShow: true,
list: [{ name: "商品1" }, { name: "商品2" }]
}
})
修改数据需用this.setData({ ... })
,小程序会自动更新视图。
3. 事件处理:交互的核心
通过bindtap
等指令绑定事件,处理用户交互:
<button bindtap="handleClick">点击我</button>
Page({
handleClick() {
wx.showToast({ title: "点击成功" });
}
})
事件传参需用data-*
属性:
<button bindtap="deleteItem" data-id="1">删除</button>
deleteItem(e) {
const id = e.currentTarget.dataset.id; // 获取参数
}
4. 页面路由:页面跳转与传参
小程序通过wx.navigateTo
等 API 实现页面跳转:
// 跳转到新页面(保留当前页)
wx.navigateTo({
url: '/pages/detail/detail?id=1'
})
// 关闭当前页,跳转到目标页
wx.redirectTo({ url: '/pages/home/home' })
目标页面在onLoad
中接收参数:
Page({
onLoad(options) {
console.log(options.id); // 获取跳转携带的id
}
})
5. 生命周期:页面的 "一生"
页面生命周期函数控制页面状态:
onLoad
:页面加载时触发(只执行一次)onShow
:页面显示时触发(每次切换到该页都执行)onReady
:页面初次渲染完成时触发onUnload
:页面卸载时触发(如跳转并关闭当前页)
合理利用生命周期,可实现数据初始化、资源释放等操作。
6. API 能力:丰富的原生接口
小程序提供大量 API,覆盖设备、网络、支付等场景:
- 网络请求:
wx.request
(需配置合法域名) - 本地存储:
wx.setStorageSync
/wx.getStorageSync
- 设备信息:
wx.getSystemInfoSync
- 交互反馈:
wx.showToast
/wx.showModal
示例:发起网络请求
wx.request({
url: 'https://api.example.com/data',
method: 'GET',
success(res) {
console.log(res.data);
}
})
总结
小程序开发的核心是遵循其框架规范,利用数据绑定、组件化(自定义组件)、API 能力快速构建应用。掌握上述知识点后,可进一步学习自定义组件、分包加载、性能优化等进阶内容,打造更优质的小程序体验。