【连载】沪江Web前端技术团队打造【小程序实战文章+视频教程】登场啦!

2,758 阅读3分钟

小程序2017.08.31更新大版本,本系列文章暂停更新,正在制作最新版本内容,敬请期待吧

🇨🇳 微信小程序课程,面向所有具备前端基础知识的同学 🇨🇳

微信小程序自发布以来,广受大家关注。小程序发布初期,颠覆现有移动互联网格局,让很多开发者欣喜若狂。如今,随着小程序入口越来越多的开放,越来越多的开发者加入到小程序的开发大军中。沪江Web前端团队打造了【小程序实战文章+视频教程】是为初学者量身打造的一系列课程。

§ 核心人员





aximario







pavelShen







pangz1







tinyuen







roeis







sqzhuyi







longdiandian9







brucecham



§ 阅读要求

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

  • HTML
  • JavaScript es6更佳
  • CSS

一共四部分十五小节,适合七天的训练营。
从现在开始,我假装你已经掌握了 htmlcss以及 ES6 ☝️


§ 目标导向

本教程以实战项目驱动,最终实现一个完整的小程序

列表页面:请求接口,并展示列表页面数据

详情页面:以文章id为参数,获取文章详情

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

§ 教程大纲

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

§ 学习方式

教程以 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 随教程操作后的结果。


§ 教程完整代码

教程的完整代码在分支 完整代码 中,请自行查阅


§ 课后作业

整个教程学习过后,可以切换到 教程作业 分支,并完成作业,目录下有相应的作业答案,请自行完成练习

【下一章】【小程序实战文章+视频教程】第一章:小程序初级入门教程 - appID准备

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。