初识微信小程序开发框架 WePy
MD by Jimbowhy and you can visit my articles on https://www.jianshu.com/u/92a796ff3db5
- 官方文档
- 【微信小程序wepy框架资源汇总](https://segmentfault.com/a/1190000013214768)
基于组件化的小程框架，据说完美解决组件隔离，组件嵌套，组件通信等问题，集合了样式编译器：Less/Sass/Styus，模板编译器：wx-ml/Pug，代码编译器：Babel/Typescript，可以看作一个模板解析引擎，将项目 src 目录中的 wpy 拆解为小程序代码发布在 dist 目录。 写代码只需要在src的wpy文件中，一个 wpy 可以包含小程序的四种文件内容，目录结构就简化了 wepy 编译项目时会对 wpy 进行拆解编译。通过 polyfill 让小程序完美支持 Promise，解决回调烦恼，异步代码不再需要嵌套N层了。ES2015支持， 可使用 Generator Fu-nction / Class / Async Function 等特性，大大提升开发效率。项目依赖管理通过 Node 自带的 NPM 实现，因此先要确保安装 Node 和 npm，然后安装 WePY CLI 并建立 demo 工程：
npm install -g wepy-cli
wepy init standard my-project
WePy 使用:
init [options] <template-name> [project-name] generate a new project from a template
build [options] build your project
list [options] list available official templates
upgrade [options] upgrade to the latest version
Options:
-c --clone use git clone
--offline use cached template
-h, --help output usage information
Example:
# create a new project with an official template
$ wepy init standard my-project
# create a new project straight from a github template
$ wepy init username/repo my-project
Usage: build [options] build your project
Options:
-f, --file <file> 待编译wpy文件
-s, --source <source> 源码目录
-t, --target <target> 生成代码目录
-o, --output <type> 编译类型：web，weapp。默认为weapp
-p, --platform <type> 编译平台：browser, wechat，qq。默认为browser
-w, --watch 监听文件改动
--no-cache 对于引用到的文件，即使无改动也会再次编译
-h, --help output usage information
Usage: upgrade [options] upgrade to the latest version
Options:
--cli upgrade wepy-cli
--wepy upgrade wepy
-h, --help output usage information
建立工程后，进入工程目录，编译工程生成小程序代码文件：
wepy new myproject
# 1.7.0之后的版本使用 wepy init standard myproject 初始化项目，使用 wepy list 查看项目模板
切换至项目目录
cd myproject
安装依赖
npm install
开启实时编译
wepy build --watch
watch and auto compiles
如果缺少依赖项，则会提示错误：
[Error] ReferenceError: Unknown plugin "transform-class-properties" specified in "base"
安装手动安装依赖插件 http://babeljs.io/docs/plugins/：
npm install --save-dev babel-plugin-transform-class-properties
npm install --save wepy-com-toast
WePY项目的目录结构
├── dist 小程序运行代码目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
├── node_modules
├── src 代码编写的目录（该目录为使用WePY后的开发目录）
| ├── components WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）
| | ├── com_a.wpy 可复用的WePY组件a
| | └── com_b.wpy 可复用的WePY组件b
| ├── pages WePY页面目录（属于完整页面）
| | ├── index.wpy index页面（经build后，会在dist目录下的pages目录生成小程序页面文件）
| | └── other.wpy other页面（经build后，会在dist目录下的pages目录生成小程序页面文件）
| └── app.wpy 小程序配置项（经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└── package.json 项目的package配置
