一、先给你一张「小程序全景认知图」
4
一句话理解小程序：
小程序 = 前端壳 + 平台 API + 你自己的后端
它不是网页，也不是 App，是一个被平台强管控的运行环境。
二、小程序开发四大核心模块（99%项目都绕不开）
三、视图层（WXML / WXSS）——别小看
1️⃣ WXML 核心知识点
🔹 数据绑定
<view>{{title}}</view>
特点：
单向数据流
不支持任意 JS 表达式
逻辑要写在 JS 里
🔹 条件渲染
<view wx:if="{{show}}"></view>
<view wx:else></view>
⚠️ 细节：
wx:if会销毁 / 重建节点hidden只是显示隐藏
👉 频繁切换用 hidden
🔹 列表渲染（高频）
<view wx:for="{{list}}" wx:key="id">
{{item.name}}
</view>
⚠️ 必须有 wx:key
否则性能直接拉胯
2️⃣ WXSS 常用重点
不支持部分 CSS（如 position: fixed 在早期）
支持 rpx（自适应单位）
样式是 作用域隔离的
👉 全局样式写在 app.wxss
四、逻辑层（JS / TS）——小程序的灵魂
1️⃣ Page / App 结构
Page({
data: {},
onLoad() {},
onShow() {},
})
2️⃣ 生命周期（非常重要）
页面生命周期
⚠️ 数据刷新通常放 onShow，不放 onLoad
App 生命周期
App({
onLaunch() {},
onShow() {},
})
常用来：
初始化登录
读取本地缓存
设置全局状态
3️⃣ setData 的大坑（重点）
this.setData({
list: newList
})
❌ 常见错误
setData 太频繁
setData 大对象
setData 深层嵌套
👉 原则：
合并 setData
只更新必要字段
五、平台 API（wx.*）——生产力核心
1️⃣ 网络请求（必会）
wx.request({
url,
method: 'POST',
data,
header
})
⚠️ 注意：
必须配置 合法域名
不支持任意 header
HTTPS 强制
2️⃣ 本地存储
wx.setStorageSync('token', value)
wx.getStorageSync('token')
用途：
token
用户信息
配置缓存
⚠️ 不要存大数据
3️⃣ 常用系统能力
六、登录体系（小程序最关键一环）
标准登录流程（你后端一定要配合）
流程：
前端：
wx.login()→ code后端：
code2session后端返回：openid / unionid / token
前端缓存 token
⚠️ 小程序没有 Cookie，全靠 token
常见坑
code 只能用一次
session 会过期
前端不要信任用户身份
七、组件与复用（项目复杂度分水岭）
1️⃣ 自定义组件
Component({
properties: {},
data: {},
methods: {}
})
使用场景
弹窗
列表项
表单块
2️⃣ 组件通信
八、页面路由与状态管理
页面跳转
wx.navigateTo()
wx.redirectTo()
wx.switchTab()
⚠️ 页面栈最多 10 层
全局状态（轻量）
getApp().globalData
⚠️ 只放：
登录态
基础配置
九、性能优化（上线后一定会遇到）
1️⃣ 常见性能杀手
setData 太多
图片过大
长列表无分页
首屏请求过多
2️⃣ 优化策略
分页加载
懒加载图片
合并请求
本地缓存
十、审核 & 上线必须知道的坑
常见被拒原因
未声明隐私
收集信息未说明
虚假功能
接口未备案
审核建议
提前写隐私协议
关闭测试入口
不要留 console.log
十一、你这种技术背景，建议的进阶方向（很重要）
结合你后端 + 架构 + 产品能力，小程序不要只当“前端”。
强烈建议你关注：
小程序 + Flask / FastAPI
token / 配额 / 计费体系
小程序作为 下单入口
后端才是核心壁垒
十二、典型商业小程序结构（给你一个模板）
小程序
├── 登录
├── 下单
├── 查询结果
├── 余额 / 次数
├── 历史记录
└── 客服 / 反馈
评论