wepy-cli

WePY框架概述

WePY 是腾讯官方出品的一个小程序快速开发框架,对原生小程序的开发模式进行了再次封装,更贴近于 MVVM 架构模式,并支持ES6/7的一些新特性,同时语法风格更接近于 Vue.js,使用 WePY 框架能够提高小程序的开发效率。

注意:WePY 只是小程序的快速开发框架之一,市面上还有诸如 mpvue、taro、uniapp 之类的小程序开发框架也比较流行。

为什么要使用WePY

  1. WePY 相比于原生小程序开发,拥有众多的开发特性优化方案,例如:

    • 开发风格接近于 Vue.js,支持很多vue中的语法特性;

    • 通过 polyfill 让小程序完美支持 Promise;

    • 可以使用ES6等诸多高级语法特性,简化代码,提高开发效率;

    • 对小程序本身的性能做出了进一步的优化;

    • 支持第三方的 npm 资源;

    • 支持多种插件处理和编译器;

    • letc…

安装 WePY 框架

WePY 的安装或更新都通过 npm 进行,全局安装或更新 WePY 命令行工具,可以在终端运行以下命令:

 npm install wepy-cli -g

初始化 WePY 项目

 wepy init standard myproject

其中,”wepy init” 是固定写法,代表要初始化 wepy 项目;

”standard” 代表模板类型为标准模板,可以运行 ”wepy list” 命令查看所有可用的项目模板;

”myproject” 为自定义的项目名称。

注意:创建项目的时候,要勾选 ESLint 选项!

WePY项目与小程序项目的关系

通过 wepy init 命令初始化的 wepy 项目,准确来说只是一个模板项目,不能直接当作小程序运行。需要运行相关的命令,把模板项目编译为小程序项目,才可以运行。

实时编译WePY项目

使用 wepy init 命令初始化项目后,只是得到了一个模板项目,如果想开启实时编译,得到小程序项目,步骤如下:

①运行 cd myproject 切换至 WePY 项目根目录

②运行 npm install 安装 WePY 项目依赖项

③运行 wepy build --watch 开启实时编译

注意:wepy build --watch 命令,会循环监听 WePY 项目中源代码的变化,自动编译生成小程序项目,生成的小程序项目默认被存放于 dist 目录中

加载WePY 项目到微信开发者工具

1.7.0 版本之后的 wepy-cli 工具生成的项目根目录下,包含 project.config.json 文件,记录了项目的基本配置信息,例如:项目的名称、appId、生成的小程序项目根路径等。

如果项目中存在 project.config.json 文件,使用 微信开发者工具 --> 导入项目,”项目目录”请选择 wepy 项目根目录,即可根据 project.config.json 文件中的配置,把 wepy 编译生成的小程序项目加载到微信开发者工具中。

.wpy文件的组成部分

一个 .wpy 文件可分为三大部分,各自对应于一个标签:

  1. 脚本部分,即 <script></script> 标签中的内容,又可分为两个部分:

    • 逻辑部分,除了 config 对象之外的部分,对应于原生的 .js 文件

    • 配置部分,即 config 对象,对应于原生的 .json 文件

  2. 结构部分,即 <template></template> 模板部分,对应于原生的 .wxml 文件。

  3. 样式部分,即<style></style>样式部分,对应于原生的 .wxss 文件。

其中,小程序入口文件 app.wpy 不需要 template,所以编译时会被忽略。

 

猜你喜欢

转载自www.cnblogs.com/ywnh/p/12354264.html
CLI
今日推荐