getfromcode

微信小程序入门与实战 常用组件API开发技巧项目实战

后端开发
课程简介

这门课解决什么问题 “微信小程序入门与实战”这门课,解决的是“从零开始把一个小程序真正跑起来”的问题。很多人学小程序容易卡在两个地方:一是环境配置和文件结构没搞懂,对着官方文档不知道怎么下手;二是看完 API 却不知道在真实页面里怎么组合使用。这门课以“ReaderMovie”这个项目为线索,从新建项目、配置 app.json、写启动页,一路做到新闻阅读列…

已有 22 人浏览 发布 2026-01-12 更新 2026-10-05

这门课解决什么问题

“微信小程序入门与实战”这门课,解决的是“从零开始把一个小程序真正跑起来”的问题。很多人学小程序容易卡在两个地方:一是环境配置和文件结构没搞懂,对着官方文档不知道怎么下手;二是看完 API 却不知道在真实页面里怎么组合使用。这门课以“ReaderMovie”这个项目为线索,从新建项目、配置 app.json、写启动页,一路做到新闻阅读列表页,把开发工具、项目结构、样式布局、组件和接口挨个过一遍,属于“跟着做就能做出来”的实战型内容。

另外提醒一下,虽然资料平台把课程归类到“后端开发”,但课程实际内容完全是前端方向,不涉及服务端接口开发。如果你是想学后端,这门课不适合;如果你是想做小程序前端页面,那内容正好对口。

适合什么基础,建议先看哪几块

课程基础门槛不高。如果你写过 HTML 和 CSS,知道 JavaScript 的基本语法(比如变量、函数、数组),就能直接跟着做;如果完全没写过代码,建议先花几天补一下 HTML 和 Flex 布局,否则第3章做启动页时弹性盒子模型那部分会比较吃力。

建议按以下顺序看,效率最高:

  • 先看第1章的“学习基础”和“小程序适合做什么样的应用”两节,明确小程序的能力边界,避免后期做超出平台限制的功能。
  • 然后看第2章,重点是开发工具的介绍和“小程序目前情况及限制”。这两节决定你后面能不能顺利调试,也避免踩上架审核、包体积这些坑。
  • 第3章是核心基础,不能跳。官方种子项目的文件结构、app.json 的基础配置、RPX 自适应单位、Flex 布局这四个知识点,是所有小程序页面的地基。建议在“制作项目启动页”这三节上多花时间,边看边改代码,把每个配置项的作用都试一遍。
  • 第4章的新闻阅读列表节适合看完第3章后立刻看。这里涉及真实项目里最常用的“数据怎么渲染到页面上”“列表怎么展示”的思路,是后面做任何功能都要用的套路。

学完能独立做什么,资料怎么配合练

学完这门课,你能独立写出一个完整的信息展示类小程序:启动页、列表页、数据绑定、页面跳转、真机预览这些基本能力都具备。更具体的说,你可以自己做出一个带多个页面、能传递参数、能适配不同手机屏幕的小程序,比如一个简易的博客阅读器、产品展示页、个人作品集之类。课程用的是“ReaderMovie”这个案例,课后可以自己换一个主题,比如把电影换成图书、食谱、景点介绍,所有代码逻辑直接复用。

配合练习的方法很关键。建议不要只看视频,要做到三步:第一步,每看完一个小节,关掉视频,凭记忆把代码重写一遍;第二步,改掉课程里的一些参数,比如换一套颜色、改文案、调整布局,看界面如何变化

课程目录

第1章:什么是微信小程序?
1 开篇及课程特色介绍
2 直观感受一下微信小程序
3 小程序适合做什么样的应用
4 对开发者的影响
5 学习基础
6 小作业
第2章:小程序环境大件与开发工具介绍
1 开篇介绍及下载工具
2 小程序目前情况及限制
3 小程序开发工具介绍
第3章:从一个简单的“欢迎”页面开始小程序之旅
1 本章内容简介
2 官方种子项目介绍与小程序的文件结构
3 新建我们自己的项目:ReaderMovie
4 开始制作项目启动页
5 制作项目启动页(上)之自适应单位:RPX
6 制作项目启动页(中)之样式与弹性盒子模型
7 制作项目启动页(下)之小程序app.json基础配置
8 9 10 扩展。有时间整理上传
第4章:第二个页面:新闻阅读列表
1 第四章课程简介
2 真机运行小程序及小程序开发者后台简介
3 使用Swiper组件构建轮播图
4 构建新闻列表 上
5 构建新闻列表 下
6 js文件结构与Page页面的生命周期
7 {数据绑定}基础
8 {数据绑定}扩展
9 使用列表渲染wx-for改写新闻列表
10 小程序的事件机制(冒泡与非冒泡) 上
11 小程序的事件机制(冒泡与非冒泡) 下
第五章:小程序的模版化与模块儿化
1 将业务中的数据分离到单独的数据文件中
2 使用require方法加载js模块儿文件
3 template模块的使用
第六章:构建新闻详情页面
1 从文章列表跳转到新闻详情页面、
2 先静后动,构建新闻详情页面样式
3 配置全局导航栏颜色
4 使用数据填充新闻详情页面
5 缓存Storage的基本用法
6 使用缓存实现文章收藏功能
7 交互反馈
8 操作反馈
9 交互反馈
10 同步异步方法对比
11 palyBackgroundAudio音乐播放基本实现
12 加入不同的音乐,个性化音乐播放
13 监听播放事件完善音乐播放
14 应用程序生命周期
15 继续完善音乐播放
16 音乐播放最终章
17 真机如何清楚缓存与template内路问题
第七章:开始制作电影资讯页面
1 Banner轮播图跳转文章详情
2 补充内容:tap选项卡课前准备
3 给项目加入tap选项卡
4 完善tap选项卡
5 补充:为什么redirectTo不出现选项卡
6 电影页面嵌套template分析
7 3个嵌套template标签实现
8 stars template的样式实现
9 movie template 的样式实现
10 movie-list template的样式实现
11 RESTful API简介及调用豆瓣API
12 获取正在热映、即将上映和top250的数据
13 电影页面数据绑定 上
14 电影页面数据绑定 下
15 星星评分组件的实现
16 更换电影分类标题
第八章:更多电影及电影搜索页面的实现
1 更多电影页面的编写思路
2 动态设置导航栏标题
3 更多电影页面加载数据
4 实现movie-grid template
5 实现上滑加载更多数据
6 设置loading状态
7 实现下拉刷新数据
8 backgroundColor
第九章 构建电影详情页面
1 电影搜索页面构建 上
2 电影搜索页面构建 下
3 tabbar的图片路径不要使用绝对路径
4 修复音乐播放完成后图标状态
5 编写电影详情页面 上
6 编写电影详情页面 下
7 图片的缩放与裁剪
8 新版本更新后的补充章节
9 编写电影详情页面骨架
10 完成电影详情页面 上
11 完成电影详情页面 下
12 小程序Q&A
第十章: Form表单类组件与Map地图组件
1 form之switch组件
2 form之slider组件
3 form之radio组件
4 form之checkbox组件
5 form表单提交
6 map组件

课程购买
课程价格
金币29
290金币限时优惠会员免费
销量:0
💎 开通会员每日免费下载,比单买更划算 →
支付成功后会自动显示下载资源云盘的链接!点击链接即可下载到本地。