一个微信小程序（应用号）开发示例（豆瓣电影）
公开课上演示的代码我放到了backup分支上，当前版本包含一套自动化工作流，请仔细往下看。
如果你不了解Node和自动化工作，可以看看之前的版本：
- 微信小程序官方已经向没有资格的开发者开放了
微信Web开发者工具的使用 - 这里不需要再用之前的办法破解，破解了有问题！破解了有问题！破解了有问题！
- 完全卸载之前的版本(删除掉用户目录下与
微信Web开发者工具相关的目录) - 安装
0.9.092300或0.10.102800版本
0.10.102800版本
- 开发阶段与生产阶段分离。
- 自动化生成新页面所需文件并添加到配置中。
- 以
Standard Code Style校验全部的js和json文件。 - 开发阶段
json配置文件可以有注释，方便备注。 - 代码中集成部分文档内容，减少查文档的时间。
- 开发阶段可以使用
less完成样式编码，原因你懂得~ （如果你了解这些，当然可以支持sass等其他预处理样式）。 - 借助
babel自动进行ES2015特性转换，放心使用新特性。 - 开发阶段用
xml文件后缀取代wxml后缀，避免在开发工具中配置代码高亮。 - Source Map
- Travis CI
用到了GIT环境，没有环境的话请自行解决吧。
# 定位到任意目录
$ cd path/to/root
# 克隆仓库到指定的文件夹
$ git clone https://github.com/zce/weapp-demo.git [project-name] --depth 1
# 进入指定的文件夹
$ cd [project-name]用到了Node环境，没有环境的话也请自行解决吧。
$ npm install执行如下命令
# 启动监视
$ npm run watch通过微信Web开放者工具打开项目根目录下dist文件夹，预览~
- 打开
微信Web开放者工具，选择添加项目，填写或选择相应信息- AppID：点击右下角
无AppID（尚未开放申请） - 项目名称：随便填写，因为不涉及到部署，所以无所谓
- 项目目录：选择项目根目录下
dist文件夹 - 点击
添加项目
- AppID：点击右下角
- 可以通过任意开发工具完成
src下的编码，gulp会监视项目根目录下src文件夹，当文件变化自动编译
执行如下命令
# 启动生成器
$ npm run generate
? Input the page name (index) [page-name]
? Do you need a configuration file (y/N) N
? Select a style framework (Use arrow keys)
> less
# 自动生成...由于微信小程序的每一个页面有特定的结构，新建工作比较繁琐。可以通过此任务减少操作。
执行如下命令
# 启动编译
$ npm run build生产阶段的代码会经过压缩处理，最终输出到dist下。
同样可以通过微信Web开放者工具测试。
- 自动化生成新页面所需文件；
- 自动生成新页面时，自动添加配置到
app.json； - 加入
ES2015的Polyfill，支持类似Promise的新API； - 自动刷新
微信Web开放者工具中的预览； -
HTMLtoWXML转换器，让大家可以直接使用HTML元素开发；
for 新手同学
这段时间有很多人反映代码看不懂，没法看下去。
可能有很多刚入门的同学，刚开始学习没有接触太多，而我的这个仓库也旨在服务大众。
为此特地创建多个分支，每个分支的特点和复杂程度各不相同（计划，请持续关注）：
-
- 最基本的微信小程序项目结构
- 一个简单页面的工作
-
- 包含
NavigationBar和TabBar的设置 - 多标签页面切换
- 包含
-
- 划分程序中的各个页面
- 分别完成各个页面的结构和布局
-
- 页面与页面之间的跳转
-
- 使用假数据的方式完成数据绑定
-
- 改用
wx.request接口调用豆瓣API完成数据加载 - 增加加载过程界面体现（loading）
- 改用
-
- 封装操作
豆瓣API的模块 - 二次封装
微信API为Promise的实现
- 封装操作
-
- 上拉加载（数据分页）
-
- 其他
微信API的使用 - ..
- 其他
-
master
- 主线版本，包含全部功能和特性！
zce/weapp-boilerplate - 一个小程序的快速开发骨架
Welcome PR or Issue or WeChat！
