1.5 什么是WePY

本书的理念是快速开发，所以会使用一些框架。笔者推荐的框架正是WePY，它拥有众多的开发特性和优化方案，本节就带读者认识它。

1.5.1 为什么选择WePY

WePY严格来说其实是对于原生小程序的一种优化性的开发框架，WePY框架并不是开发必需的，但使用WePY框架可以极大提高开发的效率和组件化的应用。WePY拥有以下特点。

● 开发风格：接近Vue.js，支持组件Props传值、自定义事件、组件分布式复用Mixin、计算属性函数computed、模板内容分发slot等。

● 组件化：组件化开发，完美解决组件隔离、组件嵌套、组件通信等问题。

● npm：支持使用第三方npm资源，自动处理npm资源之间的依赖关系，完美兼容所有无平台依赖的npm资源包。

● Promise：通过polyfill让小程序完美支持Promise，解决回调烦恼。

● ES2015：可使用Generator Fu-nction、Class、Async Function等特性，大大提升开发效率。

● 对小程序进行优化：对小程序本身进行优化，如请求列对处理、优雅的事件处理、生命周期的补充、性能的优化等。

● 编译器：支持样式编译器Less、Sass、Styus，模板编译器wx-ml、Pug，代码编译器Babel、Typescript。

● 插件：支持多种插件处理，如文件压缩、图片压缩、内容替换等，扩展简单，使用方便。

● 框架大小：压缩后有24.3KB空间即可拥有所有框架功能，额外增加8.9 KB空间后即可使用Promise和Async Function。

对于习惯传统的Web开发和使用Vue.js开发的开发者而言，WePY提供了只需要简单了解微信小程序的开发即可完成一个小程序的快速体验。

1.5.2 WePY开发环境的安装

相对简单的微信开发者工具而言，WePY的安装稍显复杂。首先需要使用npm安装，这也意味着需要安装Node.js。

1．安装Node.js

在Node官网下载Node.js的安装包。如果遇到官网无法进入或者下载较慢的情况，可以在国内提供的镜像中下载最新版本的Node.js。

Node.js官网为https://nodejs.org/，打开后如图1-22所示。

图1-22 Node.js官网

Node.js提供了两个版本，LTS版本是稳定的长期支持版本，Current版本则是最新的Node.js版本。对于WePY而言，两者之间并没有特别大的区别。下载安装包后，需要根据系统的不同进行安装。双击打开后稍作等待，进入Node.js的安装过程，如图1-23所示。

图1-23 安装Node.js

在同意协议之后单击Next按钮，直到安装成功，单击Finish按钮。如何验证安装是否成功呢？在Windows系统中打开CMD（按Win+R快捷键，输入“cmd”），在Mac中使用终端。

注意：如果使用CMD输入“node”后显示“不是内部或外部命令，也不是可运行的程序或批处理文件”信息，则需要手动添加Node.js的安装地址到全局变量中。读者可以查阅相关的资料进行配置。

输入命令“node -v”，其效果如图1-24所示，会打印当前的Node版本。

图1-24 Node版本

WePY安装需要用到npm，它在安装Node.js后已经自动安装。在终端中使用“NPM -v”命令，查看是否成功安装了npm，如图1-25所示。

图1-25 npm版本

2．安装WePY

WePY的安装或更新都通过npm进行。全局安装或更新WePY命令行工具，使用以下命令：

npm install wepy-cli -g

稍等片刻，成功安装后即可创建WePY项目。

注意：如果npm安装时间过长或者连接超时而导致失败，则可以使用国内的镜像源。这里推荐一个稳定的源，来自淘宝，网站地址为http://npm.taobao.org/，可以使用淘宝定制的cnpm（gzip压缩支持）命令行工具代替默认的npm：

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装好环境后，再找一个良好的编写代码的IDE环境。这里强烈推荐JetBrains系列的WebStorm的最新版本，它完美支持了Vue.js的开发及ESLint的语法形式，所以编写代码非常顺畅和方便，其编辑器界面如图1-26所示。

图1-26 编辑器界面

同样，在WebStorm中使用Alt+F12键可以唤起内置的命令行。对于需要编译的WePY而言，无须每次使用cd命令进入项目文件，方便了很多。