1. weapp-boilerplate 微信小程序骨架
特点
开发阶段与生产阶段分离。
自动化生成新页面所需文件并添加到配置中。
以Standard Code Style校验全部的js和json文件。
开发阶段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开放者工具测试
2. labrador 微信小程序组件化开发框架
特点
- 使用Labrador框架可以使微信开发者工具支持加载海量NPM包
- 支持ES6/7标准代码,使用async/await能够有效避免回调地狱
- 组件重用,对微信小程序框架进行了二次封装,实现了组件重用和嵌套
- 可集成Redux,使用Redux数据流控制,让项目逻辑清晰可维护
- 自动持久化数据,支持redux-persist自动将运行数据保存
- 自动化测试,非常容易编写单元测试脚本,不经任何额外配置即可自动化测试
- Flow.js强类型检查,编写更加安全稳定的代码
- 使用Editor Config及ESLint标准化代码风格,方便团队协作
- 强力压缩代码,尽可能减小程序体积,让你在1M的限制内做更多的事
安装脚手架
首先您的系统中安装Node.js和npm v3 下载Node.js,然后运行下面的命令将全局安装Labrador命令行工具。
npm install -g labrador-cli
初始化项目
abrador create demo # 新建项目
cd demo # 跳转到项目目录
项目目录结构
demo # 项目根目录
├── .labrador # Labrador项目配置文件
├── .babelrc # babel配置文件
├── .editorconfig # Editor Config
├── .eslintignore # ESLint 忽略配置
├── .eslintrc # ESLint 语法检查配置
├── .build/ # Labrador编译临时目录
├── package.json
├── dist/ # 目标目录
├── node_modules/
└── src/ # 源码目录
├── app.js
├── app.json
├── app.less
├── components/ # 通用组件目录
├── pages/ # 页面目录
└── utils/
注意 dist目录中的所有文件是由labrador命令编译生成,请勿直接修改
配置开发工具
项目初始化后使用WebStorm或Sublime等你习惯的IDE打开项目根目录。然后打开 微信web开发者工具 新建项目,本地开发目录选择 dist 目标目录。
开发流程
在WebStorm或Sublime等IDE中编辑 src 目录下的源码,然后在项目根目录中运行labrador build 命令构建项目,然后在 微信web开发者工具 的调试界面中点击左侧菜单的 重启 按钮即可查看效果。
我们在开发中, 微信web开发者工具 仅仅用来做调试和预览,不要在 微信web开发者工具 的编辑界面修改代码。
微信web开发者工具 会偶尔出错,表现为点击 重启 按钮没有反应,调试控制台输出大量的无法require文件的错误,编辑 界面中代码文件不显示。这是因为 labrador build 命令会更新整个 dist 目录,而 微信web开发者工具 在监测代码改变时会出现异常,遇到这种情况只需要关掉 微信web开发者工具 再启动即可。
我们还可以使用 labrador watch 命令来监控 src 目录下的代码,当发生改变后自动构建,不用每一次编辑代码后手动运行 labrador build 。
所以最佳的姿势是:
- 在项目中运行 labrador watch
- 在WebStorm中编码,保存
- 切换到 微信web开发者工具 中调试、预览
- 再回到WebStorm中编码
- ...
labrador 命令
labrador create <name> 创建项目
注意此命令会初始化当前的目录为项目目录。
labrador build [options] 构建当前项目
3. wepy 小程序组件化开发框架
介绍
WePY资源汇总:awesome-wepy
WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。
同时WePY也是一款成长中的框架,大量吸收借鉴了一些优化前端工具以及框架的设计理念和思想。如果WePY有不足地方,或者你有更好的想法,欢迎提交ISSUE或者PR。
特性:
- 类Vue开发风格
- 支持自定义组件开发
- 支持引入NPM包
- 支持Promise
- 支持ES2015+特性,如Async Functions
- 支持多种编译器,Less/Sass/Styus、Babel/Typescript、Pug
- 支持多种插件处理,文件压缩,图片压缩,内容替换等
- 支持 Sourcemap,ESLint等
- 小程序细节优化,如请求列队,事件优化等
安装使用
安装(更新) wepy 命令行工具:
npm install wepy-cli -g
生成开发示例)生成开发示例:
wepy new myproject
开发实时编译:
wepy build --watch
开发者工具使用
- 使用微信开发者工具-->新建项目,本地开发选择dist目录。
- 微信开发者工具-->项目-->关闭ES6转ES5。重要:漏掉此项会运行报错。
- 微信开发者工具-->项目-->关闭上传代码时样式自动补全 重要:某些情况下漏掉此项会也会运行报错。
- 微信开发者工具-->项目-->关闭代码压缩上传 重要:开启后,会导致真机computed, props.sync 等等属性失效。
- 项目根目录运行wepy build --watch,开启实时编译。