微信小程序核心知识点速览

微信小程序凭借轻量、即用即走的特性,成为移动开发的重要选择。本文梳理几个核心知识点,助你快速入门。

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 能力快速构建应用。掌握上述知识点后,可进一步学习自定义组件、分包加载、性能优化等进阶内容,打造更优质的小程序体验。

相关推荐
00后程序员张7 分钟前
iOS软件性能监控实战指南 开发到上线的完整流程解析
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld3 小时前
剧本杀小程序系统开发:构建数字化剧本杀生态圈
大数据·小程序·剧本杀
落雪小轩韩15 小时前
微信小程序性能优化与内存管理
微信小程序
徐礼昭|商派软件市场负责人1 天前
从“多、老、旧”到“4i焕新”:品牌官方商城(小程序/官网/APP···)的范式跃迁与增长再想象
小程序·商城系统·零售
胡西风_foxww2 天前
微信小程序转Vue2组件智能提示词
微信小程序·小程序·提示词·智能体·vue2组件
七七软件开发2 天前
一对一交友小程序 / APP 系统架构分析
java·python·小程序·系统架构·php
2501_916007472 天前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
说私域2 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量拉新策略研究
人工智能·小程序·开源
2501_915918412 天前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
七七软件开发2 天前
团购商城 app 系统架构分析
java·python·小程序·eclipse·系统架构·php