微信小程序开发学习文档（2025 万字总结 · 一篇搞定前端开发）
这篇文档浓缩了 2025 年最新、最全、最实战的微信小程序开发精华，专为想快速上手、独立开发上线、甚至接单赚钱的小伙伴准备！
看完这篇 + 敲完示例代码，你就能从 0 到 1 开发一个完整的小程序项目！
一、小程序核心概念（5 分钟记住）
| 概念 | 作用 | 关键文件/语法 |
|---|---|---|
| App() | 小程序全局逻辑（生命周期、全局数据） | app.js |
| Page() | 单个页面逻辑 | pages/xxx/xxx.js |
| Component() | 自定义组件（复用） | components/xxx/xxx.js |
| WXML | 类似 HTML（用 view、text、image） | .wxml |
| WXSS | 类似 CSS（支持 rpx 响应式单位） | .wxss |
| JSON | 页面/组件/全局配置 | .json |
| setData() | 修改数据 → 触发视图更新（核心！） | this.setData({key: value}) |
| 生命周期 | onLoad → onReady → onShow → onHide → onUnload | 页面生命周期函数 |
二、项目结构（2025 标准）
my-mini-program/
├── app.js ← 全局逻辑
├── app.json ← 全局配置（页面路由、tabBar、窗口样式）
├── app.wxss ← 全局样式
├── project.config.json ← 开发者工具配置
├── pages/
│ ├── index/ ← 首页
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs/
├── components/ ← 自定义组件
├── utils/ ← 工具函数
└── static/ ← 图片、图标三、15 分钟写一个完整页面（带倒计时 + 列表）
<!-- pages/index/index.wxml -->
<view class="container">
<view class="header">
<text class="title">欢迎使用小程序</text>
<text class="countdown">倒计时：{{countdown}}秒</text>
</view>
<view class="list">
<block wx:for="{{list}}" wx:key="id">
<view class="item" bindtap="goDetail" data-id="{{item.id}}">
<image src="{{item.cover}}" mode="aspectFill" />
<text class="name">{{item.name}}</text>
<text class="price">¥{{item.price}}</text>
</view>
</block>
</view>
<button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">授权登录</button>
</view>/* pages/index/index.wxss */
.container { padding: 20rpx; }
.header { text-align: center; padding: 40rpx 0; }
.title { font-size: 48rpx; color: #07c160; }
.countdown { margin-top: 20rpx; font-size: 36rpx; color: #ff5000; }
.list { display: flex; flex-wrap: wrap; }
.item { width: 48%; margin: 2%; background: #fff; border-radius: 16rpx; overflow: hidden; }
.item image { width: 100%; height: 300rpx; }
.name { display: block; padding: 20rpx; font-weight: bold; }
.price { display: block; padding: 0 20rpx 20rpx; color: #ff5000; font-size: 32rpx; }// pages/index/index.js
Page({
data: {
countdown: 60,
list: [
{ id: 1, name: "iPhone 16", price: 5999, cover: "/static/1.jpg" },
{ id: 2, name: "MacBook Pro", price: 12999, cover: "/static/2.jpg" }
]
},
onLoad() {
// 倒计时
this.timer = setInterval(() => {
if (this.data.countdown > 0) {
this.setData({
countdown: this.data.countdown - 1
})
} else {
clearInterval(this.timer)
}
}, 1000)
},
goDetail(e) {
const id = e.currentTarget.dataset.id
wx.navigateTo({
url: `/pages/detail/detail?id=${id}`
})
},
handleGetUserInfo(e) {
const userInfo = e.detail.userInfo
if (userInfo) {
wx.showToast({ title: '授权成功' })
}
},
onUnload() {
clearInterval(this.timer)
}
})四、核心功能速成（直接抄）
| 功能 | 代码示例 |
|---|---|
| 页面跳转 | wx.navigateTo({ url: '/pages/logs/logs' }) |
| 传参 | url: '/pages/detail/detail?id=1&name=iphone' |
| 获取参数 | options.id 在 onLoad(options) 中 |
| 网络请求 | wx.request({ url, data, success(res) }) |
| 登录（code2session） | 见下文完整代码 |
| 全局数据 | App() 中定义 globalData |
| 自定义组件 | Component({ properties, data, methods }) |
| 上拉加载下拉刷新 | onReachBottom + onPullDownRefresh |
五、微信登录完整流程（2025 最新）
// 1. 前端获取 code
wx.login({
success: res => {
const code = res.code
wx.request({
url: 'https://yourdomain.com/api/wx/login',
method: 'POST',
data: { code },
success: res => {
const token = res.data.data.token
wx.setStorageSync('token', token)
}
})
}
})
// 2. 后端 Django 换取 openid + 生成 JWT（见上一篇文章）六、2025 年最强组件库 + 工具
| 类型 | 推荐工具 | 链接 |
|---|---|---|
| UI 组件库 | Vant Weapp（2025 最新版） | https://vant-ui.github.io/vant-weapp/ |
| 状态管理 | Pinia（小程序版）/ 全局 App.globalData | – |
| 网络请求 | wx.request + Promise 封装 | 见 utils/request.js |
| 图标 | iconfont.cn 生成小程序字体图标 | https://www.iconfont.cn |
| 调试神器 | 微信开发者工具 + vConsole | npm i vconsole-weapp |
七、7 天学习路线（保姆级）
| 天数 | 目标 | 输出 |
|---|---|---|
| Day1 | 环境 + 项目结构 + 第一个页面 | 能跑通倒计时 + 列表页 |
| Day2 | 页面跳转 + 传参 + 事件 + 组件 | 实现详情页 + 自定义卡片组件 |
| Day3 | 网络请求 + 登录 + 全局数据 | 实现微信登录 + 保存用户信息 |
| Day4 | 上拉加载 + 下拉刷新 + 分页 | 实现商品列表无限加载 |
| Day5 | 自定义组件 + Vant 组件库 | 封装 Button、Dialog、Toast |
| Day6 | 发布上线 + 体验版 + 真机调试 | 提交审核，扫码在手机上运行 |
| Day7 | 完整项目实战（商城/外卖/后台） | 独立开发一个完整小程序 |
八、我直接给你准备了 2025 年最强小程序开发大礼包
想要我立刻发你（全免费）：
- 5 个完整项目源码：商城、外卖、后台管理系统、微信登录模板、短视频
- Vant Weapp 最佳实践模板（已集成）
- 小程序面试 100 题（含答案 + 真题解析）
- 上线全流程文档（从注册到发布审核）
- 2025 年学习路线图 + 思维导图（PDF）
直接回复：要小程序大礼包
我立刻打包发你（GitHub + 百度网盘），
跟着敲完这套资料，7 天能独立开发，30 天能接单，日薪 500-2000！
要不要？现在就回我“要小程序大礼包”，我秒发给你！
2025 年最香的小程序开发机会，就是现在！
