WePY官方文档 - 快速入门指南 - 《微信小程序组件化开发框架WePY v1.x 官方文档》

快速入门指南

快速入门指南

WePY项目的创建与使用

WePY的安装或更新都通过npm进行。

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

npm install wepy-cli -g

在开发目录中生成Demo开发项目, 1.7.0之后版本请移步wepy-cli文档

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

切换至项目目录

cd myproject

安装依赖

npm  install

开启实时编译

wepy build --watch

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目录生成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文件内容如下：

{
  "description": "project description",
  "setting": {
    "urlCheck": true,
    "es6": false,
    "postcss": false,
    "minified": false
  },
  "compileType": "miniprogram",
  "appid": "touristappid",
  "projectname": "Project name",
  "miniprogramRoot": "./dist"
}

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

postcss: 对应关闭上传代码时样式自动补全选项，关闭。重要：某些情况下漏掉此项也会运行报错。

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 git@github.com: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:
   "text.html.vue": [
      "wpy"
   ]

VS Code

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

2. 打开任意 .wpy 文件。

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

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

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

VIM

1. 安装 Vue 的 VIM 高亮插件，例如 posva/vim-vue。

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

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

代码规范

变量与方法尽量使用驼峰式命名，并且注意避免使用$开头。
以$开头的标识符为WePY框架的内建属性和方法，可在JavaScript脚本中以this.的方式直接使用，具体请参考API文档。
小程序入口、页面、组件文件名的后缀为.wpy；外链的文件可以是其它后缀。
具体请参考wpy文件说明。
使用ES6语法开发。
框架在ES6(ECMAScript 6)下开发，因此也需要使用ES6开发小程序，ES6中有大量的语法糖可以让我们的代码更加简洁高效。
使用Promise。
框架默认对小程序提供的API全都进行了 Promise 处理，甚至可以直接使用async/await等新特性进行开发。启用Promise方法
事件绑定语法使用优化语法代替。
- 原 bindtap="click" 替换为 @tap="click"，原catchtap="click"替换为@tap.stop="click"。
- 原 capture-bind:tap="click" 替换为 @tap.capture="click"，原capture-catch:tap="click"替换为@tap.capture.stop="click"。
- 更多@符用法，参见组件自定义事件。
事件传参使用优化后语法代替。
原bindtap="click" data-index={{index}}替换为@tap="click({{index}})"。
自定义组件命名应避开微信原生组件名称以及功能标签<repeat>。
不可以使用input、button、view、repeat等微信小程序原生组件名称命名自定义组件；另外也不要使用WePY框架定义的辅助标签repeat命名。有关repeat的详细信息，请参见循环列表组件引用。