一个为微信小程序开发准备的基础骨架。A boilerplate application for wechat weapp runtime.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 82b2d39 Dec 2, 2016
Permalink
Failed to load latest commit information.
src + bluebird Dec 2, 2016
.babelrc Initial commit Oct 12, 2016
.eslintrc.js Initial commit Oct 12, 2016
.gitignore Initial commit Oct 12, 2016
.travis.yml Initial commit Oct 12, 2016
LICENSE Initial commit Sep 26, 2016
README.en.md Initial commit Oct 12, 2016
README.md README Oct 12, 2016
gulpfile.js + bluebird Dec 2, 2016
package.json package update Oct 28, 2016

README.md

微信小程序骨架

一个为微信小程序开发准备的基础骨架

Build Status Dependency Status devDependency Status js-standard-style

For English

English

骨架特点

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

将项目克隆到本地

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

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

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

安装项目NPM依赖

$ npm install

使用

开发阶段

执行如下命令

# 启动监视
$ npm run watch

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

可以通过任意开发工具完成src下的编码,gulp会监视项目根目录下src文件夹,当文件变化自动编译

创建新页面

执行如下命令

# 启动生成器
$ npm run generate
# 完成每一个问题
# 自动生成...

由于微信小程序的每一个页面有特定的结构,新建工作比较繁琐。可以通过此任务减少操作。

生产阶段

执行如下命令

# 启动编译
$ npm run build

生产阶段的代码会经过压缩处理,最终输出到dist下。

同样可以通过微信Web开放者工具测试。

开发计划

  • 自动化生成新页面所需文件;
  • 自动生成新页面时,自动添加配置到app.json
  • 加入ES2015Polyfill,支持类似Promise的新API
  • 自动刷新微信Web开放者工具中的预览;
  • HTML to WXML 转换器,让大家可以直接使用HTML元素开发;

相关项目

zce/weapp-demo

有问题?

Welcome PR or Issue!

许可

MIT © 汪磊