组件化框架 WePY 开发入门(一) —— 项目初始化和目录结构


WePY 概述

前面几篇教程学院君简单给大家介绍了微信小程序原生框架,并通过构建一个实际项目演示了如何基于原生框架进行项目开发。今天开始,学院君要给大家介绍一种更加高效的开发方式 —— 基于官方提供的组件化框架 WePY 进行小程序项目开发,关于为什么要使用 WePY,官方给出了充分的理由:

简单来说,其实就是我们可以更方便地使用现代 JavaScript 功能特性和工具更加高效地开发微信小程序,而且 WePY 框架可以看作是 Vue.js 框架的微信小程序方言版本,不管是语法还是使用方式都高度相似,如果你之前熟悉并使用过 Vue.js 框架的话,将可以很快入门 WePY 框架。

下面我们来简单介绍 WePY 框架的安装、目录结构和开发工具,然后和原生框架一样,通过重构博客项目来演示 WePY 框架的日常开发和使用。

注:关于 WePY 框架的安装使用细节,可以随时翻阅微信官方提供的使用手册,学院君这里重点结合实际项目来演示常见功能的使用。

项目初始化

和原生框架可以直接通过微信开发者工具初始化不同,WePY 框架需要手动在命令行通过执行命令安装。首先需要通过 NPM 全局安装 WePY 工具(类比通过 Composer 全局安装 Laravel 安装器):

npm install wepy-cli -g

然后到小程序项目所在目录创建并初始化一个新的基于 WePY 框架的微信小程序项目(类似于 laravel new 命令),涉及到交互时按提示输入即可:

wepy init standard blog-lite

然后进入这个项目目录通过 NPM 安装项目依赖:

npm install

最后我们在本地开发的时候可以开启实时编译,这样,一旦项目文件有修改,会立即重新编译小程序项目,而不需要手动去执行:

wepy build --watch

至此,项目安装和初始化工作就完成了。

选择合适的开发工具

基于 WePY 框架开发微信小程序,就不适合使用微信开发者工具了,WePY 框架项目源码文件以 .wpy 作为后缀,微信开发者工具不支持打开该类型文件:

取而代之地,由于是类 Vue.js 框架,我们可以通过之前使用的所有前端开发工具来开发基于 WePY 框架的小程序项目,比如 Sublime Text、Visual Studio Code、WebStorm 等,作为 PHP 程序员,还可以使用 PHPStorm,毕竟 PHPStorm 包含了 WebStorm 的所有功能。后续教程,我们都是使用 PHPStorm 作为开发工具。

代码高亮

我们使用 PHPStorm 打开刚刚初始化的小程序项目 blog-lite,在正式开发之前,需要配置 PHPStorm 支持 wpy 文件的代码高亮:

  • 打开 PHPStorm->Preferences,搜索 Plugins,选中,搜索 Vue.js 并安装;
  • 继续在 Preferences 面板搜索框中搜索 File Types,选中,在右侧列出文件类型列表中找到 Vue.js Template,选中,在下面 Registered Patterns 中添加 *.wpy,最后选择面板右下角的 Apply 应用上述修改,回到代码视图,即可实现 .wpy 文件代码高亮。

预览项目

在 PHPStorm 和浏览器中都无法实现微信小程序的预览,所以还是要回到微信开发者工具,选择「小程序项目」,点击管理项目右侧的「+」按钮:

在弹出窗口项目目录中选择刚刚初始化的 blog-lite 项目,其它字段会自动填充:

点击确定即可进入预览页面了:

项目目录结构

最后我们回到 PHPStorm,一起来看看新创建的 blog-lite 项目目录结构:

关于项目目录官方使用手册也有详尽的说明:

├── dist                   小程序运行代码目录(该目录由 wepy build 指令自动编译生成,请不要直接修改该目录下的文件)
├── node_modules           运行 npm install 安装的依赖包所在目录
├── 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 框架的小程序项目初始化、开发工具、预览工具以及大致的目录结构,下一篇开始,我们将结合具体的实战项目来演示如何基于 WePY 框架快速进行微信小程序开发。


Vote Vote Cancel Collect Collect Cancel

<< 上一篇: 原生框架开发入门(五) —— 博客文章详情页实现(下)

>> 下一篇: 组件化框架 WePY 开发入门(二) —— 博客首页文章列表重构