了解WePy小程序开发框架

了解WePy小程序开发框架

Jimbowhy的MD，您可以访问我的文章

【微信小程序wepy框架资源汇总】（）

据说，基于组件的小程序框架完美地解决了组件隔离、组件嵌套、组件通信等问题。它集成了样式编译器：Less/Ass/Styus、模板编译器：wx ml/Pug和代码编译器：Babel/Typescript，可以看作是模板解析引擎。它将项目src目录中的wpy分解为小程序代码，并将其发布到dist目录中。编写代码的唯一方法是在src-wpy文件中。一个wpy可以包含小程序的四个文件内容。目录结构简化了wepy在编译项目时编译和反汇编wpy的方式。通过polyfill，小程序可以完美地支持Promise并解决回调问题。异步代码不再需要嵌套N层。ES2015支持使用Generator Function/Class/Async Function和其他功能，以大大提高开发效率。项目依赖性管理通过节点附带的NPM实现。因此，首先确保安装了节点和npm，然后安装WePY CLI并建立演示项目：

npm安装-g wepy cli

wepy init标准我的项目

WePy使用：

init[options][projectname]从模板生成新项目

构建[选项]构建您的项目

list[选项]列出可用的官方模板

升级[选项]升级到最新版本

选项：

-c—克隆使用git克隆

--脱机使用缓存模板

-h、 --帮助输出使用信息

例子：

#使用官方模板创建新项目

$wepy init标准我的项目

#直接从github模板创建新项目

$wepy init用户名/repo我的项目

用法：build[options]构建项目

选项：

-f、 --file＜file＞要编译的Wpy文件

-s、 --source＜source＞源代码目录

-t、 --target＜target＞生成代码目录

-o、 --output＜type＞编译类型：web，weapp。默认值为weapp

-p、 --平台＜type＞编译平台：浏览器、微信、qq。默认为浏览器

-w、 --监视侦听器文件更改

--没有缓存对于引用的文件，即使没有任何更改，也会再次编译

-h、 --帮助输出使用信息

用法：upgrade[options]升级到最新版本

选项：

--cli升级wepy-cli

--wepy升级wepy

-h、 --帮助输出使用信息

创建项目后，进入项目目录并编译项目以生成小程序代码文件：

wepy新我的项目

#对于1.7.0以后的版本，使用wepy init标准myproject初始化项目，并使用wepylist查看项目模板

切换到项目目录

cd我的项目

安装依赖项

npm安装

启用实时编译

wepy构建--观察

监视和自动编译

如果缺少依赖项，将提示错误：

[Error]ReferenceError:“base”中指定了未知插件“transform class properties”

要安装从属插件以进行手动安装，请执行以下操作：

npm安装--保存dev babel插件转换类属性

npm安装--保存wepy com toast

WePY项目的目录结构

☆ -- dist applet运行代码的目录（该目录由WePY的构建指令自动编译，请不要直接修改该目录中的文件）

├── 节点_模块

☆ - src代码的目录（该目录是使用WePY后的开发目录）

|☆ -- 组件WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件参考）

| | ├── com_a.Wpy可重用WePY组件a

| | └── com_b.Wpy可重用WePY组件b

|☆ -- Pages WePY页面目录（属于完整页面）

| | ├── 指数Wpy索引页（构建后，小程序页面文件将在dist目录下的pages目录中生成）

| | └── 另外Wpy其他页面（构建后，将在dist目录下的pages目录中生成applet页面文件）

| └── app。wpy applet配置项（构建后，将在dist目录中生成app.js、app.json和app.wxss文件）

└── 包裹json项目的包配置