weapp

搭建适合前端开发的小程序架构！

让你远离微信那个辣鸡IDE，直接用你的编辑器来开发！

ES6，Promise...嗯，统统都用上吧！

很惭愧，就做了一点微小的工作，谢谢大家。

安装项目依赖

$ npm install

使用

开发阶段

执行如下命令

# 启动监视
$ npm run dev
# 选择需要 watch 的模块
# 开始编译并 watch 修改的文件

通过微信Web开发者工具打开项目模块根目录下dist文件夹，预览

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

创建新模块

我们可能需要开发多个小程序，多个小程序就需要创建多个项目。现在，我们把多个小程序整合在一个项目里，通过模块的方式来管理。

所有模块名可在 config/config.json 文件中管理。新增或者删除模块后，请修改该文件的 modules 字段。

执行如下命令

# 启动生成器
$ npm run module
# 输入模块名
# 自动生成...

新建的模块内置了小程序的部分通用配置，以及一个 index 页面。这样我们就不需要每次都得执行一大堆复制粘贴删除操作了。

模板内容请参考：generate-weapp-module

创建新页面

执行如下命令

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

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

生产阶段

执行如下命令

# 启动编译
$ npm run build

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

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

文件编译方式

我们可以直接在模块页面中写支持编辑器语法高亮的 xml、css、sass 文件，通过启动监视器可把该转换成小程序支持的 wxml、wxss 文件。

- js           => js
- xml          => wxml
- {css, scss}. => wxss
- json         => json