WePY官方文档

世界杯开幕式视频

全局安装或更新WePY命令行工具

在开发目录中生成Demo开发项目, 1.7.0之后版本请移步

wepy new myproject# 1.7.0之后的版本使用 wepy init standard myproject 初始化项目,使用 wepy list 查看项目模板

切换至项目目录

cd myproject

安装依赖

开启实时编译

wepy build --watch

WePY项目的目录结构├── dist 小程序运行代码目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件)├── node_modules ├── src 代码编写的目录(该目录为使用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借鉴了Vue.js(后文简称Vue)的语法风格和功能特性,如果你之前从未接触过Vue,建议先阅读Vue的,以熟悉相关概念,否则在阅读WePY文档以及使用WePY进行开发的过程中,将会遇到比较多的障碍。

开发建议使用第三方成熟IDE或编辑器(具体请参看后文的代码高亮部分),微信开发者工具仅用于实时预览和调试。

添加项目1.7.0 之后的版本init新生成的代码包会在根目录包含project.config.json文件,之前生成的代码包可能不存在project.config.json文件。检查根目录是否存在该文件。

如果存在,使用微信开发者工具—>添加项目,项目目录请选择项目根目录即可根据配置完成项目信息自动配置。

如果不存在,建议手动创建该文件后再添加项目。project.config.json文件内容如下:

es6: 对应关闭ES6转ES5选项,关闭。 重要:未关闭会运行报错。

minified: 对应关闭代码压缩上传选项,关闭。重要:开启后,会导致真机computed, props.sync 等等属性失效。(注:压缩功能可使用WePY提供的build指令代替,详见后文相关介绍以及Demo项目根目录中的wepy.config.js和package.json文件。)

urlCheck: 对应不检查安全域名选项,开启。 如果已配置好安全域名则建议关闭。

文件后缀为.wpy,可共用Vue的高亮规则,但需要手动设置。下面提供一些常见IDE或编辑器中实现代码高亮的相关设置步骤以供参考(也可通过更改文件后缀名的方式来实现高亮,详见后文相关介绍)。

Sublime

1. 打开Sublime->Preferences->Browse Packages..进入用户包文件夹。

2. 在此文件夹下打开cmd,运行git clone :vuejs/vue-syntax-highlight.git,无GIT用户可以直接下载zip包解压至当前文件夹。

3. 关闭.wpy文件重新打开即可高亮。

WebStorm/PhpStorm

1. 打开Settings,搜索Plugins,搜索Vue.js插件并安装。

2. 打开Settings,搜索File Types,找到Vue.js Template,在Registered Patterns添加*.wpy,即可高亮。

Atom

1. 在Atom里先安装Vue的语法高亮 - language-vue,如果装过了就忽略这一步。

2. 打开Atom -> Config菜单。在core键下添加:

customFileTypes: "wpy" ]

VS Code

1. 在 Code 里先安装 Vue 的语法高亮插件 。

3. 点击右下角的选择语言模式,默认为纯文本。

4. 在弹出的窗口中选择 .wpy 的配置文件关联...。

5. 在选择要与 .wpy 关联的语言模式 中选择 Vue。

VIM

1. 安装 Vue 的 VIM 高亮插件,例如 。

2. 配置 .wpy 后缀名的文件使用 Vue 语法高亮。

au BufRead,BufNewFile *.wpy setlocal filetype=vue.html.javascript.css

代码规范

变量与方法尽量使用驼峰式命名,并且注意避免使用$开头。以$开头的标识符为WePY框架的内建属性和方法,可在JavaScript脚本中以this.的方式直接使用,具体请。

小程序入口、页面、组件文件名的后缀为.wpy;外链的文件可以是其它后缀。具体请参考wpy文件说明。

使用ES6语法开发。框架在ES6(ECMAScript 6)下开发,因此也需要使用ES6开发小程序,ES6中有大量的语法糖可以让我们的代码更加简洁高效。

使用Promise。框架默认对小程序提供的API全都进行了 Promise 处理,甚至可以直接使用async/await等新特性进行开发。

事件绑定语法使用优化语法代替。

原 bindtap="click" 替换为 ="click",原catchtap="click"替换为.stop="click"。原 capture-bind:tap="click" 替换为 .capture="click",原capture-catch:tap="click"替换为.capture.stop="click"。更多@符用法,参见组件自定义事件。