初识微信小程序开发框架 WePy

初识微信小程序开发框架 WePy

MD by Jimbowhy and you can visit my articles on https://www.jianshu.com/u/92a796ff3db5

1. 官方文档
2. 【微信小程序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]  [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       待编译wpy文件
    -s, --source   源码目录
    -t, --target   生成代码目录
    -o, --output     编译类型：web，weapp。默认为weapp
    -p, --platform   编译平台：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配置