读者需要具备但不限于以下技能

  • HTML
  • JavaScript es6更佳
  • CSS

一共四部分十五小节，适合七天的训练营。

从现在开始，我假装你已经掌握了 html 、 css 以及 ES6 :point_up:

目标导向

本教程以实战项目驱动，以沪江英语微信小程序项目框架为基础，最终还原一个完整的小程序

列表页面：请求接口，并展示列表页面数据

详情页面：以文章id为参数，获取文章详情

详情页面，点击图片，展示大图

教程大纲 -完整视频地址

  • 先进章：小程序初级入门教程
    • appID准备
      • 文章视频： camp.qianduan.group/xcx/1/1/1
    • 工具安装
      • 文章视频： camp.qianduan.group/xcx/1/1/2
    • 目录说明
      • 文章视频： camp.qianduan.group/xcx/1/1/3
    • 小试牛刀
      • 文章视频： camp.qianduan.group/xcx/1/1/4
    • 发布流程
      • 文章视频： camp.qianduan.group/xcx/1/1/5
  • 第二章：小程序中级实战教程：预备篇
    • 项目结构设计
      • 文章视频： camp.qianduan.group/xcx/1/2/1
    • 提取 util 公用方法
      • 文章视频： camp.qianduan.group/xcx/1/2/2
    • 封装网络请求及 mock 数据
      • 文章视频： camp.qianduan.group/xcx/1/2/3
  • 第三章：小程序中级实战教程：列表篇
    • 列表-静态页面制作
      • 文章视频： camp.qianduan.group/xcx/1/3/1
    • 列表-页面逻辑处理
      • 文章视频： camp.qianduan.group/xcx/1/3/2
    • 列表-视图与数据关联
      • 文章视频： camp.qianduan.group/xcx/1/3/3
    • 列表-阅读标识
      • 文章视频： camp.qianduan.group/xcx/1/3/4
  • 第四章：小程序中级实战教程：详情篇
    • 详情-页面制作
      • 文章视频： camp.qianduan.group/xcx/1/4/1
    • 详情-视图渲染
      • 文章视频： camp.qianduan.group/xcx/1/4/2
    • 详情-功能完善
      • 文章视频： camp.qianduan.group/xcx/1/4/3
  • 第五章： 课后作业练习

学习方式

教程以 git 分支的方式管理，比如学习第三章先进节 列表-静态页面制作 时候，需要切换到 ch3-1 分支，然后把分支目录 code/ 导入到微信开发工具编辑器，跟随教程进行实战代码操作。操作如下：

  1. 通过 git 把项目复制到本地 

    git clone https://github.com/ikcamp/wechat-xcx-tutorial

  2. 切换目录

    cd wechat-xcx-tutorial

  3. 在当前目录下切换分支

    git checkout ch3-1

注意：每一分支的 code/ 内容，皆是上一节内容操作完成后的结果。比如 ch3-2/code 就是上一节课程 ch3-1/code 随教程操作后的结果。