小程序开发框架汇总

2017-09-28 本文已影响70人 ROBIN2015

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] 构建当前项目

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，开启实时编译。