微信小程序(应用号)示例教程(豆瓣电影), awesome wechat weixin weapp demo, wxapp demo
JavaScript CSS
Latest commit 5cc7a83 Jan 10, 2017 @zce committed on GitHub Update README.md

README.md

微信小程序开发教程示例

一个微信小程序(应用号)开发示例(豆瓣电影)

Build Status Dependency Status devDependency Status js-standard-style

微信小程序开发教程

如果你是看公开课视频来的,请注意

公开课上演示的代码我放到了backup分支上,当前版本包含一套自动化工作流,请仔细往下看。

如果你不了解Node和自动化工作,可以看看之前的版本:

视频演示如何运行当前项目

豆瓣电影小程序真机测试

有问题

Welcome PR or Issue or WeChat!

交流群(一个个的拉,拉不过来)

微信交流群

如果你不喜欢热闹,或者加不进去,可以告诉我

我的微信

目录

预览

豆瓣电影演示

视频演示

重要申明

  • 微信小程序官方已经向没有资格的开发者开放了微信Web开发者工具的使用
  • 这里不需要再用之前的办法破解,破解了有问题!破解了有问题!破解了有问题!

解决办法

  • 完全卸载之前的版本(删除掉用户目录下与微信Web开发者工具相关的目录)
  • 安装0.9.0923000.10.102800版本

下载链接

0.10.102800版本

完整示例特点

  • 开发阶段与生产阶段分离。
  • 自动化生成新页面所需文件并添加到配置中。
  • Standard Code Style校验全部的jsjson文件。
  • 开发阶段json配置文件可以有注释,方便备注。
  • 代码中集成部分文档内容,减少查文档的时间。
  • 开发阶段可以使用less完成样式编码,原因你懂得~ (如果你了解这些,当然可以支持sass等其他预处理样式)。
  • 借助babel自动进行ES2015特性转换,放心使用新特性。
  • 开发阶段用xml文件后缀取代wxml后缀,避免在开发工具中配置代码高亮。
  • Source Map
  • Travis CI

操作步骤

for English

README.en.md

将项目克隆到本地

用到了GIT环境,没有环境的话请自行解决吧。

# 定位到任意目录
$ cd path/to/root

# 克隆仓库到指定的文件夹
$ git clone https://github.com/zce/weapp-demo.git [project-name] --depth 1

# 进入指定的文件夹
$ cd [project-name]

安装项目NPM依赖

用到了Node环境,没有环境的话也请自行解决吧。

$ npm install

使用说明

for English

README.en.md

开发阶段

执行如下命令

# 启动监视
$ npm run watch

通过微信Web开放者工具打开项目根目录下dist文件夹,预览~

  • 打开微信Web开放者工具,选择添加项目,填写或选择相应信息
    • AppID:点击右下角无AppID(尚未开放申请)
    • 项目名称:随便填写,因为不涉及到部署,所以无所谓
    • 项目目录:选择项目根目录下dist文件夹
    • 点击添加项目
  • 可以通过任意开发工具完成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
  • 加入ES2015Polyfill,支持类似Promise的新API
  • 自动刷新微信Web开放者工具中的预览;
  • HTML to WXML 转换器,让大家可以直接使用HTML元素开发;

分支说明

for 新手同学

这段时间有很多人反映代码看不懂,没法看下去。

可能有很多刚入门的同学,刚开始学习没有接触太多,而我的这个仓库也旨在服务大众。

为此特地创建多个分支,每个分支的特点和复杂程度各不相同(计划,请持续关注):

  • level-00

  • 最基本的微信小程序项目结构

  • 一个简单页面的工作

  • level-01

  • 包含NavigationBarTabBar的设置

  • 多标签页面切换

  • level-02

  • 划分程序中的各个页面

  • 分别完成各个页面的结构和布局

  • level-03

  • 页面与页面之间的跳转

  • level-04

  • 使用假数据的方式完成数据绑定

  • level-05

  • 改用wx.request接口调用豆瓣API完成数据加载

  • 增加加载过程界面体现(loading)

  • level-06

  • 封装操作豆瓣API的模块

  • 二次封装微信APIPromise的实现

  • level-07

  • 上拉加载(数据分页)

  • level-08

  • 其他微信API的使用

  • ..

  • master

  • 主线版本,包含全部功能和特性!

相关项目

许可

MIT © 汪磊