搭建适合前端开发的小程序架构!
让你远离微信那个辣鸡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