前言
wepy-cli 是一个基于小程序原生语法的开发框架，在小程序开发场景中，我们可以用 wepy-cli 来快速搭建应用，完成快速开发的需求。本篇文章将介绍 wepy-cli 的基本用法和相关注意事项，以帮助读者更好地使用 wepy-cli 来提高自己的前端开发效率。
安装 wepy-cli
首先我们需要在本地全局安装 wepy-cli：
npm install wepy-cli -g
这里我们使用 npm 包管理器安装 wepy-cli。
创建 wepy 项目
安装完成 wepy-cli 后，可以使用 wepy-cli 来创建项目。在命令行中输入：
wepy init standard myproject其中 standard 表示项目模板，myproject 表示项目名称。运行该命令后，wepy-cli 将在当前目录下创建一个 myproject 的文件夹，该文件夹内包含了 wepy-cli 的项目结构和相关文件。
开发过程
创建完成 wepy 项目后，使用如下命令来启动项目：
cd myproject wepy build --watch
通过 cd 命令切换到项目所在的目录，然后使用 wepy build --watch 启动项目。在项目开发过程中，我们可以在开启 --watch 参数的情况下进行代码修改，weppy-cli 会自动检测文件的变化，并重新编译项目。
代码结构
我们可以先来看一下 wepy 项目的结构，以更好地理解 wepy-cli 的使用：
-- -------------------- ---- ------- --------- --- ---- --- ------------ --- --- - --- --- - --- ---------- - --- ----- - --- ------- --- ----------- --- ------------ --- --------------展开代码
wepy-cli 的项目结构相对于小程序原生开发会更加清晰、易于扩展、便于维护。其中：
src/api: 存放了小程序相关的 API，可以在此编写请求数据的代码，使用 promise 对象实现异步请求。src/components: 存放了项目中所用到的组件。src/pages: 存放了项目的所有页面。src/app.wpy: 全局的基础组件，包含了小程序 app 相关的生命周期方法。
wepy-cli 的注意事项
在使用 wepy-cli 进行项目开发的过程中，需要注意以下几个点：
小程序的选择器
小程序的选择器有所不同，wepy-cli 中使用的是 $ 进行选择器的绑定：
<template> <view class="container"> <input type="text" @input="$event.target.value" /> </view> </template>
CSS 样式的绑定
wepy-cli 使用的是 WXSS 进行 CSS 样式的编写，但是需要将样式绑定到组件上面：
-- -------------------- ---- ------- ---------- ----- ------------------ ----- ------------------------------ ----- ------------------------------------- ------- ----------- ------ ------ ------------ ---------- - ----------------- -------- ------ - ---------- ----- ------ ----- - ---------- - ---------- ----- ------ ----- - - --------展开代码
全局的样式
wepy-cli 中需要在 app.wpy 中定义全局的样式，如下：
-- -------------------- ---- ------- ---------- ---- ------------------ --------------------------- ------ ----------- ------ ------------ --------------- -------- ------------ -------- ---------- - ------ ----- ------- ----- ----------------- -------- - -------------- - ------ -------- - -------------- - ------ -------- - ------------------ - ------ -------- - -------- -------- ------ ---- ---- ------ ------ ------- ----- ----- ------- -------- -- ---------展开代码
小程序 API 的使用
wepy-cli 也支持小程序的 API 使用，可以通过 ajax 请求以及其他功能来帮助小程序的编写。
-- -------------------- ---- ------- -------- ------ ---- ---- ------ ------ ------- ----- ----- ------- -------- - ---- - - --------- -- - ----- -------- - -------------- - ----- --------- - --- --- - ----- -------------- ---- -------------------------------------- ------- ----- -- ------------------ - ---------------------- - - ---------展开代码
总结
通过本篇文章，我们了解了如何使用 wepy-cli 来快速构建小程序应用，同时我们还介绍了一些 wepy-cli 的注意事项，让读者可以更好地在项目中使用 wepy-cli 进行开发。希望读者能够通过学习和实践，掌握 wepy-cli 的使用技巧，进一步提高自己在前端开发方面的能力和水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67630
