这门课解决什么问题
很多前端开发者或者已经学过 Vue 基础的人，在面对实际的小程序外包项目或者公司业务迁移时，往往会卡在“能写静态页面，但做不出完整业务闭环”的阶段。这门以仿旅游小程序为核心的 uni-app 实战课，针对的就是这种断层。它不带你泛泛地过 API，而是直接切入真实的旅游电商场景：从首页多模块组件拆分、滑动置顶交互，到商品列表渲染，再到微信支付的打通。如果你过去写惯了传统 Vue 单页应用，对小程序的底层逻辑、云开发模式以及支付链路不熟，这门课能帮你把这些散落的生产环节拼装起来，解决从页面切图到真正能上线收钱的功能闭环问题。
适合什么基础与建议观看顺序
这套资料不适合零基础新手。你需要掌握基本的 HTML/CSS 布局，熟悉 Vue 的常用指令和组件写法，了解基础的 ES6 语法。如果是纯转行且没写过 Vue 的人，直接跟这套实战会非常吃力。对于符合基础要求的读者，建议把学习重心放在三个板块：首先是开篇的 uni-app 起步与避坑部分，重点看小程序生成时的配置逻辑，这决定了你后续本地调试的顺畅度；其次是组件拆分模块，重点研究轮播、滑动置顶和列表布局的组件化思路，这是提升代码复用性的关键；最后是云开发与支付环节，这是整个项目最有价值的部分，务必跟着视频把前后端数据交互和支付接口跑通。遇到前端布局部分如果已经熟练，可以倍速观看，把精力留给业务逻辑层。
学完能独立做什么及资料配合方法
完整跟下这套实战后，你应该具备独立开发一款中大型微信小程序的能力。不仅能熟练使用 uni-app 进行跨端代码编写，还能独立完成组件化架构设计、云开发数据接口对接以及微信支付功能的业务接入。面对类似的电商、旅游或者本地生活类小程序需求，能够从零搭建项目并交付可运行的代码。在资料配合练习上，建议不要干看视频，一定要边看边敲。每学完一个独立组件（比如滑动置顶或攻略列表），暂停视频，自己尝试修改样式和数据结构，观察页面变化。在进入项目实战阶段前，先把 uni-app 生成小程序的避坑指南看一遍，配置好本地的运行环境。到了支付环节，务必自己注册一个小程序的测试号，跟着视频里的步骤真实走一遍下单和支付的流程，不要只看不动手，只有把支付链路亲自跑通，才算真正吃透了这门课的核心价值。
提高vue实战技术和学习uniapp开发，掌握常用的es6语法，学习微信支付
课程目录
* 01 什么是uniapp/
* 01 uniapp简介.mp4 07:30
* 02 启动一个测试dome来了解下（上）.mp4 28:44
* 03 启动一个测试dome来了解下（下）.mp4 15:47
* 04 Uniapp生成小程序以及要跳过的坑.mp4 35:28
* 02 什么是云开发/
* 01 云开发简介.mp4 07:28
* 03 开始项目实战飞猪小程序/
* 01 学习安排.mp4 02:28
* 02 初建项目，组件拆分.mp4 35:44
* 03 完成轮播组件布局.mp4 09:50
* 04 表格组件布局.mp4 15:16
* 05 滑动置顶组件（上）.mp4 16:21
* 06 滑动置顶组件（下）.mp4 18:02
* 07 攻略列表组件布局.mp4 15:43
* 08 课程资料获取
* 04 项目实战首页逻辑交互部分/
* 01 启动云开发设计轮播数据库.mp4 16:14
* 02 渲染轮播数据到页面.mp4 10:27
* 03 设计tab分类，攻略列表数据.mp4 18:00
* 04 请求tab数据.mp4 09:13
* 05 promise封装公用请求.mp4 20:12
* 06 批量并发请求数据.mp4 25:37
* 07 展示攻略景点数据.mp4 15:33
* 08 vuex传值实现tab切换展示数据（上.mp4 20:13
* 09 vuex传值实现tab切换展示数据（中）.mp4 26:28
* 10 vuex传值实现tab的loading加载（下）.mp4 21:36
* 05 项目实战首页逻辑交互部分（下）/
* 01 上拉加载（上）.mp4 34:24
* 02 上拉加载（中）.mp4 27:47
* 03 上拉加载（下）.mp4 25:19
* 04 没有数据的提示.mp4 17:14
* 05 进入页面的loading加载.mp4 10:18
* 06 小结.mp4 05:36
* 06 项目实战景点攻略部分/
* 01 开发流程.mp4 01:04
* 02 攻略页面布局（上）.mp4 26:43
* 03 攻略页面布局（下）.mp4 22:02
* 04 实现当前所在城市定位.mp4 18:48
* 05 封装公用定位.mp4 05:23
* 07 城市选择/
* 01 城市搜索页面布局.mp4 38:02
* 02 定位城市.mp4 03:53
* 03 选中城市回到攻略页面展示（上）.mp4 18:16
* 04 选中城市回到攻略页面展示（下）.mp4 19:05
* 05 实时触发搜索城市.mp4 35:33
* 06 补充（1）.mp4 05:53
* 07 补充（2）.mp4 03:17
* 08 用户上传发表攻略景点（一）/
* 01 开发介绍.mp4 07:42
* 02 页面布局.mp4 20:18
* 03 图片九宫格布局.mp4 15:54
* 04 上传图片.mp4 12:30
* 05 删除图片.mp4 08:04
* 06 全屏预览图片，封装公用预览图片.mp4 18:04
* 07 上传视频.mp4 25:04
* 08 定位城市和选择城市.mp4 39:11
* 09 用户上传发表攻略景点（二）/
* 01 取到用户填写数据.mp4 16:32
* 02 及时反馈提醒.mp4 22:27
* 03 登录功能.mp4 17:40
* 04 自定义封装模态框组件.mp4 39:03
* 05 补充.mp4 03:13
* 06 如何上传数据到数据库.mp4 11:37
* 07 深度讲解async，await，异步编程同步化.mp4 35:48
* 08 上传图片到云存储.mp4 20:17
* 09 上传图片到云存储（拼接图片文件名）.mp4 23:44
* 10 上传图片到云存储完毕.mp4 18:30
* 10 用户上传发表攻略景点（三）/
* 01 上传视频到云储存.mp4 17:56
* 02 提交用户填写的所有数据到数据库.mp4 28:58
* 03 及时反馈提示用户.mp4 18:26
* 11 攻略页面展示用户上传发布的景点/
* 01 请求用户上传的数据展示到页面.mp4 35:55
* 02 Tab切换分类筛选数据.mp4 42:17
* 03 选择城市取到该城市下的景点.mp4 09:00
* 04 Vuex传值发表景点实时更新数据.mp4 17:43
* 05 升序降序排列数据.mp4 08:01
* 12 景点详情页面/
* 01 详情页开发介绍.mp4 07:02
* 02 组件拆分，导航渐隐渐显.mp4 41:38
* 03 完成轮播组件部分.mp4 38:39
* 04 预览轮播图片.mp4 04:26
* 05 图片视频渲染.mp4 22:41
* 06 用户评论布局.mp4 31:01
* 07 AI评论分类实现好评差评步骤.mp4 27:10
* 08 云函数调用百度AI自然语言处理.mp4 31:43
* 09 提交用户评论给百度ai处理（上）.mp4 32:30
* 10 提交用户评价给百度ai处理（下）.mp4 48:48
* 13 景点详情页面（AI评价筛选部分接上一章）/
* 01 AI评价操作数组去重去空.mp4 36:00
* 02 AI评价分类筛选.mp4 27:46
* 03 描点链接滚动.mp4 31:00
* 04 优化整个页面（完结）.mp4 30:06
* 14 搜索功能/
* 01 搜索功能（上）.mp4 37:36
* 02 搜索功能（中）.mp4 27:06
* 03 搜索功能（下）.mp4 15:03
* 15 我的页面（用户信息展示）/
* 01 我的页面（用户信息展示）.mp4 24:44
* 16 课程完结，总结/
* 01 给你的作业.mp4 07:31
* 02 总结课程和后续补充——再见.mp4 22:50
* 17 商家端/
* 01 补录说明.mp4 13:15
* 02 商家端页面布局.mp4 24:56
* 03 商家认证页面（上）.mp4 25:18
* 04 商家认证页面（中）.mp4 28:42
* 05 商家认证页面（下）.mp4 38:43
* 06 解决一个bug.mp4 02:15
* 07 商家发布商品（一）.mp4 12:14
* 08 商家发布商品（二）.mp4 22:54
* 09 商家发布商品（三）.mp4 23:04
* 10 商家发布商品（四）.mp4 17:45
* 18 商家店铺商品/
* 01 商家店铺商品.mp4 20:17
* 19 用户端/
* 01 用户端说明.mp4 08:02
* 02 商品下单前的准备.mp4 24:10
* 03 商品下单页.mp4 20:30
* 04 计算总价.mp4 17:07
* 05 加入购物车（上）.mp4 31:50
* 06 加入购物车（下）.mp4 18:47
* 20 购物车/
* 01 购物车页面布局.mp4 23:05
* 02 获取购物车数据.mp4 30:11
* 03 编辑状态.mp4 06:07
* 04 选中和取消选中（上）.mp4 18:43
* 05 选中和取消选中（下）.mp4 07:31
* 06 删除选中的商品.mp4 10:17
* 07 合计总价.mp4 15:04
* 08 全选和取消全选.mp4 30:01
* 09 加减商品数量.mp4 22:59
* 10 未选中商品禁用按钮.mp4 18:20
* 21 微信支付（上）/
* 01 支付页面布局.mp4 09:29
* 02 获取将要支付的商品数据.mp4 28:27
* 03 支付前解决必填项.mp4 17:54
* 04 发起支付的必要条件（非常重要）.mp4 08:08
* 05 发起微信支付步骤.mp4 21:13
* 06 调起支付（1）准备统一下单所需数据.mp4 25:38
* 07 调起支付（2）调用统一下单接口.mp4 12:14
* 08 调起支付（3）再次签名.mp4 09:05
* 09 存储未支付的订单到数据库.mp4 13:24
* 10 前端传值统一下单.mp4 24:53
* 22 微信支付（下）/
* 01 正式发起支付付款.mp4 19:44
* 02 查询是否支付成功.mp4 27:18
* 03 支付页面优化.mp4 13:56
* 23 我的订单/
* 01 页面布局.mp4 11:17
* 02 获取我的订单数据.mp4 26:24
* 03 页面链接.mp4 09:00
