如果你已经会写 HTML、CSS 和 JavaScript,但一直没真正独立做完一个能上线的小程序,这门课值得认真看看。它讲的是 Vue3 加 Uni-app 这套组合,最后落到一个点餐类小程序项目上——注意,是「类」点餐,不是让你照抄一个美团。判断它适不适合你,关键看三点:你现在的 JS 底子够不够、你想不想碰 TypeScript、以及你是否需要走完「开发到发布审核」这整条链路。

它解决的是哪些实际工作场景

这门课覆盖的场景都挺具体:微信授权登录、微信支付、定位与地图取点、组件封装、性能优化、内存泄漏排查、多端兼容处理,最后还有小程序发布和审核。这些不是孤立的语法点,而是你接一个真实外包或进公司做业务时八成会撞上的东西。尤其是支付和授权登录,很多人看文档能看懂,自己写就卡在签名、回调、状态同步上,这类环节有完整演示会省很多试错时间。

换句话说,它瞄准的不是「让你多背几个 API」,而是让你能把一个带登录、下单、支付的闭环跑通。这比单纯刷组件库文档更接近工作实际。

学完能独立做到什么程度

按照课程设定,走完之后你应该能独立搭建一个多页面小程序:配置路由和 tabBar、封装可复用组件、对接后端接口、处理登录态、调起支付、获取定位、打包上传并提交审核。ES6 和 TypeScript 的引入意味着代码组织会更接近团队协作的写法,而不是一个人写到底的面条式代码。

但要泼一点冷水:课程宣传里「具备 3 年以上开发经验」这种说法别当真。一门课给不了三年经验,它能给的是「你知道一个完整项目长什么样、每个环节该用什么手段」。真正的经验来自你自己改需求、踩坑、重构。把它当成「第一次完整走通流程」的拐杖,心态会正很多。

什么基础的人适合,什么人不适合

  • 适合:已经能写基本页面和交互,想从「会写 JS」跨到「会用框架做项目」的人。
  • 适合:转行前端、需要一两个能讲清楚细节的项目撑简历的人——点餐类业务逻辑清晰,面试时好展开。
  • 适合:想顺带补 TypeScript 和 Uni-app 多端思路的开发者。
  • 不太适合:完全零基础、HTML 标签都还不熟的人。课程不会从「什么是 div」讲起,跟不上会挫败。
  • 不太适合:只想快速复制一个能跑的小程序交差、不打算理解原理的人。里面的封装和优化部分对这个目标来说是负担。

资料怎么用效率更高

配套的代码和 PPT 建议这样安排:先跟着视频把主流程过一遍,但不要边看边抄。每看完一个模块,关掉视频自己把这段重写一次,卡住了再回看——这一步最花时间,也最值钱。TypeScript 部分如果之前没接触,别急着全量上类型,先按视频写法走,等项目跑起来再回头补类型定义,不然很容易在配置阶段就放弃。

支付和审核这两块,建议单独留出时间做笔记,把每一步配置、需要的资质、常见报错记下来,这些是你以后接活时最常翻的内容。组件封装和性能优化可以放到第二遍再看,那时候你对项目结构有感觉了,吸收会明显更好。

整体判断:这是一门项目驱动的实操课,内容偏全,适合当作「第一个完整项目」的引导。它的价值不在于讲得多深,而在于把散落的知识点串成一条能落地的线。基础够、肯动手,收获会实在;指望它直接把你变成三年经验,那还是别买。

课程目录

课程目录305 集
  • 01 课程介绍 01 课程介绍.mp4
  • 02 《课程福利》赠送价值10000元的电商系统和点餐系统源码下载 01 赠送价值10000元电商系统和点餐系统源码下载.mp4
  • 03 ES6新特性 01 let与var的区别.mp4
  • 02 const常量的声明.mp4
  • 03 模板字面量之多行字符串.mp4
  • 04 模板字面量之变量占位符.mp4
  • 05 默认参数.mp4
  • 06 扩展运算符三个点的使用.mp4
  • 07 Object.assign对象的拷贝与合并.mp4
  • 08 对象字面量语法扩展.mp4
  • 09 解构赋值.mp4
  • 10 模块化.mp4
  • 11 箭头函数.mp4
  • 12 promise.mp4
  • 13 async/await/promise让异步变成“同步”.mp4
  • 14 class类的使用.mp4
  • 04 Vue2基础 01 安装Vue.mp4
  • 02 创建Vue实例.mp4
  • 03 数据与方法.mp4
  • 04 生命周期.mp4
  • 05 模板语法插值.mp4
  • 06 模板语法指令.mp4
  • 07 条件渲染v-if的使用.mp4
  • 08 条件渲染v-show的使用.mp4
  • 09 列表渲染v-for的使用.mp4
  • 10 列表渲染v-for循环嵌套.mp4
  • 11 v-for与v-if一同使用性能优化技巧.mp4
  • 12 v-on监听事件.mp4
  • 13 事件修饰符与按键修饰符.mp4
  • 14 系统修饰键.mp4
  • 15 css样式class的多种用法.mp4
  • 16 内联style.mp4
  • 17 v-model表单输入绑定.mp4
  • 18 v-model值的绑定.mp4
  • 19 v-model修饰符.mp4
  • 20 双向绑定原理.mp4
  • 21 todolist案例开发.mp4
  • 22 computed计算属性.mp4
  • 23 watch监听.mp4
  • 24 ref获取DOM.mp4
  • 05 Vue2组件 01 全局组件.mp4
  • 02 局部组件.mp4
  • 03 父组件给子组件传值.mp4
  • 04 子组件给父组件传值.mp4
  • 05 兄弟组件之间传值.mp4
  • 06 父组件与子组件实现双向绑定.mp4
  • 07 父组件调用子组件的方法.mp4
  • 08 动态组件.mp4
  • 09 异步组件.mp4
  • 10 组件的递归.mp4
  • 11 slot插槽基本用法.mp4
  • 12 slot插槽后备内容.mp4
  • 13 命名(具名)插槽.mp4
  • 14 作用域插槽.mp4
  • 15 解构插槽属性.mp4
  • 16 动态插槽名.mp4
  • 06 Vue2过渡与动画 01 CSS过渡与动画.mp4
  • 02 多个元素的过渡.mp4
  • 03 多个组件的过渡.mp4
  • 04 配合animate.css实现动画效果.mp4
  • 05 JavaScript钩子.mp4
  • 06 配合Velocity.js实现动画效果.mp4
  • 07 transition-group列表过渡.mp4
  • 08 做一个仿天猫商城轮播图效果的案例.mp4
  • 09 使用TweenMax实现动画效果.mp4
  • 10 实现一个加入购物车抛物线动画效果.mp4
  • 07 Mixin混入 01 mixin混入的使用.mp4
  • 02 选项合并.mp4
  • 03 全局混入.mp4
  • 08 自定义指令 01 注册自定义指令.mp4
  • 02 钩子函数和参数.mp4
  • 03 函数简写.mp4
  • 04 动态指令参数.mp4
  • 05 对象字面量.mp4
  • 09 过滤器 01 全局过滤器与局部过滤器.mp4
  • 02 过滤器参数.mp4
  • 03 过滤器串联.mp4
  • 10 VUE-CLI脚手架的安装 01 安装vue-cli.mp4
  • 02 创建项目.mp4
  • 03 项目结构.mp4
  • 04 安装serve运行生产环境时使用.mp4
  • 05 package.json的介绍.mp4
  • 11 VUE-CLI脚手架的配置 01 .env配置用于区分生产环境和开发环境.mp4
  • 02 多环境配置.mp4
  • 03 vue.config.js的配置.mp4
  • 12 Vue2插件 01 插件的使用.mp4
  • 02 开发toast插件.mp4
  • 03 开发alert、confirm插件.mp4
  • 04 开发仿天猫首页轮播图插件.mp4
  • 13 Vue全家桶之路由 01 路由的安装与配置.mp4
  • 02 router-link组件的使用.mp4
  • 03 动态路由匹配.mp4
  • 04 编程式的导航.mp4
  • 05 命名视图.mp4
  • 06 重定向和别名.mp4
  • 07 路由嵌套(主子路由).mp4
  • 08 beforeEach全局前置守卫.mp4
  • 09 beforeEnter路由独享守卫.mp4
  • 10 组件内的守卫beforeRouteEnter.mp4
  • 11 组件内的守卫beforeRouteUpdate.mp4
  • 12 组件内的守卫beforeRouteLeave.mp4
  • 13 history模式.mp4
  • 14 Vue全家桶之Axios 01 postman的使用.mp4
  • 02 Axios的基本用法.mp4
  • 03 Axios请求配置.mp4
  • 04 Axios创建实例.mp4
  • 05 Axios拦截器.mp4
  • 06 带进度条上传文件.mp4
  • 07 解决跨域问题.mp4
  • 08 封装axios工作中开发项目用.mp4
  • 15 Fetch服务端通信 01 Fetch的get和post请求.mp4
  • 02 Fetch上传文件.mp4
  • 03 封装fetch工作中开发项目用.mp4
  • 16 Vue全家桶之Vuex 01 Vuex的安装与配置.mp4
  • 02 state.mp4
  • 03 getter.mp4
  • 04 mutation.mp4
  • 05 action.mp4
  • 06 module模块化和命名空间.mp4
  • 07 使用Vuex做会员注册与登录功能.mp4
  • 17 Vue常用插件与异步队列 01 nextTick异步更新队列.mp4
  • 02 Swiper滑动特效插件.mp4
  • 03 better-scroll实现下拉刷新上拉加载.mp4
  • 04 VUE-i18n多语言国际化.mp4
  • 18 Vue常用UI库 01 Element-ui开发pc端后台管理系统必备.mp4
  • 02 移动端UI库之mint-ui.mp4
  • 03 移动端UI库之cube-ui.mp4
  • 04 移动端UI库之vant.mp4
  • 19 《课程福利》赠送Vue前后端架构模板,工作无忧 01 搭建项目架构,开发项目用,工作无忧.mp4
  • 02 赠送VUE后台管理系统架构模板,工作必备.mp4
  • 20 VUE企业级项目实战京东电商(异步数据流) 01 项目架构初始化,底部导航页面切换.mp4
  • 02 首页静态布局.mp4
  • 03 首页动态js效果.mp4
  • 04 异步数据流对接首页数据.mp4
  • 05 商品分类解决内容溢出滚动卡顿问题.mp4
  • 06 商品分类数据对接深度理解异步回调函数.mp4
  • 07 搜索组件开发实现历史记录和热门搜索.mp4
  • 08 搜索页面js配合vuex实现动态效果.mp4
  • 09 完成搜索页面实现数据对接.mp4
  • 10 商品详情页面开发js实现抛物线动画效果.mp4
  • 11 对接商品详情页面数据.mp4
  • 12 商品评价数据对接实现上拉加载数据.mp4
  • 13 使用vuex开发购物车.mp4
  • 14 会员登录.mp4
  • 15 会员注册图文验证码的安全作用.mp4
  • 16 个人中心.mp4
  • 17 对接登录验证让订单确认页面更安全.mp4
  • 18 收货地址管理.mp4
  • 19 添加收货地址.mp4
  • 20 修改收货地址.mp4
  • 21 选择收货地址.mp4
  • 22 下单成功页面.mp4
  • 23 查看订单操作订单状态组件封装.mp4
  • 24 订单详情页面.mp4
  • 25 待评价订单列表.mp4
  • 26 评价提交.mp4
  • 27 修改个人资料给组件绑定事件.mp4
  • 28 我的收货地址增、删、改、查.mp4
  • 29 绑定手机号.mp4
  • 30 修改密码.mp4
  • 31 我的收藏.mp4
  • 32 最终上线测试.mp4
  • 21 TypeScript教程 01 安装TypeScript.mp4
  • 02 数据类型与推断.mp4
  • 03 接口与联合类型.mp4
  • 04 数组与元组.mp4
  • 05 函数类型.mp4
  • 06 类型断言.mp4
  • 07 类型别名.mp4
  • 08 枚举.mp4
  • 09 类的修饰符.mp4
  • 10 接口约束类.mp4
  • 11 泛型.mp4
  • 12 多个泛型参数的函数.mp4
  • 13 泛型接口.mp4
  • 14 泛型类.mp4
  • 15 泛型约束.mp4
  • 16 命名空间.mp4
  • 22 初识VUE3 01 Vue3介绍和创建项目.mp4
  • 02 Vue3项目结构.mp4
  • 23 VUE3新特性Composition API 01 setup函数初体验.mp4
  • 02 ref函数的使用.mp4
  • 03 reactive函数的使用.mp4
  • 04 Vue3的响应式原理.mp4
  • 05 setup中的参数.mp4
  • 06 toRefs函数的使用.mp4
  • 07 computed计算属性.mp4
  • 08 watch与watchEffect.mp4
  • 09 Vue3的生命周期.mp4
  • 10 获取DOM与nextTick.mp4
  • 11 自定义hook.mp4
  • 12 shallowReactive与shallowRef.mp4
  • 13 readonly与shallowReadonly.mp4
  • 14 toRaw与markRaw.mp4
  • 15 toRef的特点与作用.mp4
  • 16 customRef在实战中的使用.mp4
  • 17 provide和inject组件通讯.mp4
  • 18 响应式数据的判断.mp4
  • 19 teleport传送api的使用.mp4
  • 20 组件之间的双向绑定.mp4
  • 21 在setup函数中实现路由跳转.mp4
  • 22 在setup函数中使用Vuex.mp4
  • 23 todoList案例.mp4
  • 24 Vue3开发插件与第三方UI库 01 开发toast插件.mp4
  • 02 开发confirm、alert插件.mp4
  • 03 vant-ui库的使用.mp4
  • 04 Element Plus UI库的使用.mp4
  • 25 初识uni-app 01 uni-app的介绍.mp4
  • 02 创建项目与运行项目.mp4
  • 03 uni-app生命周期.mp4
  • 04 尺寸单位、Flex布局与背景图片.mp4
  • 26 pages.json和manifest.json的配置 01 globalStyle和pages.mp4
  • 02 自定义导航栏注意事项.mp4
  • 03 easycom“超级组件”.mp4
  • 04 tabBar的配置.mp4
  • 05 subPackages分包加载.mp4
  • 06 manifest.json配置.mp4
  • 27 uni-app路由 01 组件路由跳转.mp4
  • 02 API路由跳转.mp4
  • 03 接收参数与获取当前页栈.mp4
  • 04 小程序跳转10层限制解决方案.mp4
  • 05 解决tabBar不能传参的问题.mp4
  • 06 自定义tabBar及封装tabBar组件.mp4
  • 28 uni-app运行环境判断和平台判断 01 判断运行环境.mp4
  • 02 判断平台.mp4
  • 29 uni-app常用组件 01 view组件的使用.mp4
  • 02 scroll-view组件的使用.mp4
  • 03 解决scroll-view中内嵌input真机卡顿问题.mp4
  • 04 swiper组件的使用.mp4
  • 05 可拖动区域和可移动视图.mp4
  • 06 text组件的使用.mp4
  • 07 rich-text组件.mp4
  • 08 button组件的使用.mp4
  • 09 获取手机号.mp4
  • 10 分享小程序.mp4
  • 11 checkbox组件的使用.mp4
  • 12 radio组件的使用.mp4
  • 13 input组件的使用.mp4
  • 14 picker组件之普通选择器.mp4
  • 15 picker组件之多列选择器.mp4
  • 16 picker组件之时间选择器.mp4
  • 17 picker组件之日期选择器.mp4
  • 18 picker组件之省市区选择器.mp4
  • 19 simpleAddress三级省市区联动.mp4
  • 20 switch组件的使用.mp4
  • 21 textarea组件的使用.mp4
  • 22 web-view浏览器组件.mp4
  • 23 image组件的使用.mp4
  • 24 audio组件的使用.mp4
  • 25 createInnerAudioContext代替audio.mp4
  • 26 video组件的使用.mp4
  • 30 uni-app常用api 01 request发起请求.mp4
  • 02 Promise方式请求数据.mp4
  • 03 uploadFile文件上传.mp4
  • 04 批量上传文件.mp4
  • 05 数据缓存.mp4
  • 06 getLocation获取位置.mp4
  • 07 配合map组件定位我的位置显示到地图上.mp4
  • 08 微信小程序获取地址详情.mp4
  • 09 获取系统信息,解决iPhoneX“刘海”兼容性.mp4
  • 10 toast和loading提示框.mp4
  • 11 模态弹窗alert、confirm.mp4
  • 12 操作菜单.mp4
  • 13 动态设置导航条.mp4
  • 14 动态设置tabBar.mp4
  • 15 录音管理.mp4
  • 16 视频组件控制.mp4
  • 17 网络状态.mp4
  • 18 剪贴板.mp4
  • 19 动画.mp4
  • 20 下拉刷新.mp4
  • 21 微信授权登录.mp4
  • 22 微信支付.mp4
  • 23 获取节点信息.mp4
  • 24 真机调试.mp4
  • 31 仿美团点餐小程序客户端开发 01 首页布局.mp4
  • 02 异步数据流对接配合地图定位显示附近的商铺.mp4
  • 03 实现下拉刷新.mp4
  • 04 上拉加载数据.mp4
  • 05 最近搜索.mp4
  • 06 热门搜索.mp4
  • 07 菜品搜索页面.mp4
  • 08 点餐页面的开发.mp4
  • 09 菜品展示组件的开发.mp4
  • 10 菜品详情组件.mp4
  • 11 套餐页面.mp4
  • 12 商家信息组件的开发.mp4
  • 13 查看商家位置.mp4
  • 14 在小程序中关注公众号.mp4
  • 15 微信授权实现一站式登录.mp4
  • 16 获取用户手机号进行绑定.mp4
  • 17 会员token认证.mp4
  • 18 将菜品存放到购物车.mp4
  • 19 开发购物车组件.mp4
  • 20 提交订单页面.mp4
  • 21 实现微信支付.mp4
  • 22 支付成功页面.mp4
  • 23 个人中心页面.mp4
  • 24 已付款订单页面.mp4
  • 25 订单详情页面.mp4
  • 26 申请退款组件.mp4
  • 27 查看已退款的订单.mp4
  • 28 修改个人资料页面的开发.mp4
  • 29 绑定并验证手机号.mp4
  • 30 发布小程序.mp4