前言
/'wepi/ 通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序
特性：
- 支持 Sourcemap，ESLint等
- WePY借鉴了Vue.js（后文简称Vue）的语法风格和功能特性，如果你之前从未接触过Vue，建议先阅读Vue的官方文档
微信开发者工具仅用于实时预览和调试。使用第三方成熟IDE或编辑器进行开发（代码高亮: 文件后缀为.wpy，可共用Vue的高亮规则）
ignore
.gitignore 是 wepyignore 和 .eslintignore 合集
- devzkndeMacBook-Pro:szjf_html devzkn$ cat .gitignore
node_modules dist .DB_store package-lock.json .wepycache
- cat .wepyignore
node_modules dist .DB_store *.wpy___jb_tmp___
- cat .eslintignore
dist/*
WePY的安装或更新都通过npm进行
- 安装（更新） wepy 命令行工具。
npm install wepy-cli -gnpm install wepy-cli -g（如果之前安装过 请忽略）- 生成开发示例, 工程名不能有大写字母
wepy init standard iosreclub ? Use ESLint to lint your code? Yes ? Use Redux in your project? No devzkndeMacBook-Pro:iosreClub devzkn$ tree -L 4 . ├── package.json ├── project.config.json ├── src │ ├── app.wpy │ ├── components │ │ ├── counter.wpy │ │ ├── group.wpy │ │ ├── groupitem.wpy │ │ ├── list.wpy │ │ ├── panel.wpy │ │ └── wepy-list.wpy │ ├── index.template.html │ ├── mixins │ │ └── test.js │ └── pages │ └── index.wpy └── wepy.config.js- 安装依赖
npm install可以简写为npm icd iosreClub npm install- 开发实时编译
wepy build --watch,可以在package.json 设置别名：npm run dev—-wepy build -w"scripts": { "dev": "wepy build --watch", "build": "cross-env NODE_ENV=production wepy build --no-cache", }
- 开发者工具导入项目: 使用
微信开发者工具->新建项目，本地开发选择项目根目录，会自动导入项目配置( 填写app ID)。去掉一写微信开发者工具的优化选项，因为wepy 已经处理了
WePY项目的目录结构
├── dist 小程序运行代码目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）使用`微信开发工具`打开，进行代码的运行和预览以及提交
├── node_modules npm 下载依赖文件的存放路径
├── src 代码编写的目录（该目录为使用WePY后的开发目录）
| ├── components WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）
| | ├── com_a.wpy 可复用的WePY组件a
| | └── com_b.wpy 可复用的WePY组件b
| ├── pages WePY页面目录（属于完整页面）
| | ├── index.wpy index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）
| | └── other.wpy other页面（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件）
| └── app.wpy 小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└── package.json 项目的package配置（依赖）
单文件模式
- 使用WePY框架后的开发目录结构(
project └── src ├── pages | ├── index.wpy index 页面逻辑、配置、结构、样式 | └── log.wpy log 页面逻辑、配置、结构、样式 └──app.wpy 小程序逻辑、公共配置、公共样式- 注：dist目录为WePY通过build指令生成的目录，除额外增加的npm目录外，其目录结构与原生小程序的目录结构类似。
针对原生API进行优化
- 对小程序原生API进行promise处理，同时修复了一些原生API的缺陷，比如：
wx.request的并发问题等。
Sublime 支持wpy 语法高亮的配置步骤
- 1. 打开Sublime->Preferences->Browse Packages..进入用户包文件夹。
- 2. 在此文件夹下打开cmd，运行
git clone git@github.com:vuejs/vue-syntax-highlight.git，进行下载vue-syntax-highlight,或者直接下载zip包解压至当前文件夹。devzkndeMacBook-Pro:szjf_html devzkn$ cd /Users/devzkn/Library/Application\ Support/Sublime\ Text\ 3/Packages
代码规范
变量与方法尽量使用驼峰式命名，并且注意避免使用$开头。 以$开头的标识符为WePY框架的内建属性和方法，可在JavaScript脚本中以this.的方式直接使用，具体请参考API文档。
- 事件绑定语法使用优化语法代替。
原 bindtap="click" 替换为 @tap="click"，原catchtap="click"替换为@tap.stop="click"。 原 capture-bind:tap="click" 替换为 @tap.capture="click"，原capture-catch:tap="click"替换为@tap.capture.stop="click"。- 事件传参使用优化后语法代替。 原b
indtap="click" data-index=替换为@tap="click()"。
主要功能特性
开发模式转换
对原生小程序的开发模式进行了再次封装，更贴近于MVVM架构模式
wepy项目中使用Promise
- 进入项目根目录，安装polyfill
npm install wepy-async-function --save- 在app.wpy中引入polyfill
import 'wepy-async-function';- 在app.wpy中使API promise化
export default class extends wepy.app { constructor () { super(); this.use('promisify'); } }
wepy项目中使用async await
- wepy项目中使用async await
在1.4.1以后的版本，默认不支持async/await，需要用户手动加入，方法如下： npm install wepy-async-function --save- package.json
"dependencies": { "wepy": "^1.6.0", "wepy-async-function": "^1.4.4", "wepy-com-toast": "^1.0.2" },- 修改wepy.config.js加入runtime配置
babel: { sourceMap: !prod, presets: [ 'env' ], plugins: [ 'transform-class-properties', 'transform-decorators-legacy', 'transform-object-rest-spread', 'transform-export-extensions', 'transform-node-env-inline' ] }- 在app.wpy中引入引入runtime包
import 'wepy-async-function'- 在app.wpy中使API promise化
export default class extends wepy.app { constructor() { super() this.use('requestfix') this.use('promisify') } }- 重启编译
wepy build --no-cache
See Also
/Users/devzkn/bin/knpost wepy 小程序组件化开发框架 -t miniprogram #原来""的参数，需要自己加上""
