如何使用 WePY 微信小程序组件化开发框架

 

WePY 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions 的引入都是为了能让开发小程序项目变得更加简单，高效。

 

# yarn registry 使用淘宝源头
yarn config set registry https://registry.npm.taobao.org -g

# 安装 wepy
sudo yarn global add wepy-cli

# 项目文件夹
mkdir hejinba-weapp && cd hejinba-weapp

# 初始化
sudo wepy init standard

 

WePY 文件结构简介：

文件夹名称	类型	简介
dist	目录	存放编译后的文件
src	目录	源码文件
src/app.wpy	目录	项目入口文件
src/pages	目录	存放小程序页面
src/components	目录	存放小程序组件
src/mixins	目录	存放 Mixin 文件
node_modules	目录	NPM 依赖模块
src/index.template.html	文件	模板页面html
wepy.config.js	文件	全局配置文件
yarn.lock	文件	依赖列表，确保这个应用的副本使用相同版本的依赖
package.json	文件	项目的 package 配置
project.config.json	文件	开发者工具配置
.wepyignore	文件	WePY 忽略的文件
.wepycache	文件	WePY 缓存文件，防止在build时，重复build npm目录
.prettierrc	文件	prettier 配置文件
.eslintrc.js	文件	eslint 配置文件
.eslintignore	文件	eslint 忽略的文件
.editorconfig	文件	编辑器配置文件

WePY 依赖于很多 node 包，接下来执行 yarn 安装这些包：

yarn

最后对项目进行编译，并持续监听代码变化：

wepy build --watch

也可以使用 npm run dev 可以达到效果的目的，注意该命令行窗口无需关闭，想进行其他操作可新建其他窗口进行。

在 Homestead 中运行 watch 可能会出现检测不到文件变化的情况，可以每次手动编译，也可以尝试在本地环境中单独安装 wepy-cli 并运行 watch。