weapp-cli

A cli application for wechat mini program

Usage no npm install needed!

<script type="module">
  import weappCli from 'https://cdn.skypack.dev/weapp-cli';
</script>

README

weapp-cli

License NPM Downloads NPM Version Dependency Status devDependency Status Code Style

一个支持在原生微信小程序中使用 TypeScript、Scss、Less 的脚手架工具。

介绍

此工具项目结构使用 caz 创建，核心功能基于 Gulp 开发，简单易用，适合原生小程序。

欢迎提交 Issues 或 PR 。

安装

为更好的使用全部功能，推荐安装到全局。

NPM

npm install weapp-cli -g

Yarn

yarn global add weapp-cli

创建项目

weapp create <project-name>

以下是项目的目录结构：

|- miniprogram				# 处理后的文件，与 src 目录结构一致，小程序将编译此目录。
|- src						# 源代码目录。
  |- components				# 自定义组件。
  |- pages					# 页面文件。
  |- typings				# type 定义文件，仅在 ts 项目中存在。
  |- app.json
  |- app.{wxss,less,scss}
  |- app.{js,ts}
  |- sitmap.json
|- package.json
|- project.config.json		# 小程序配置文件。
|- tsconfig.json			# ts 配置文件，仅在 ts 项目中存在。			
|- weapp.config.js			# 此工具的配置文件。

// weapp.config.js

module.exports = {
  style: 'scss',  						// 项目使用的样式编写方式：wxss/less/scss
  script: 'ts',  						// 项目使用的脚本编写方式：js/ts
  css: ['~/styles/variable.scss'],		// 全局样式注入，详细参见后面
  page: 'home'							// 单页编译，详细参见后面
}

编译

基本使用

在项目根目录下运行：

weapp build

若要监听文件并自动编译：

weapp build --watch

或者在 package.json 中添加脚本命令：

{
  "scripts": {
    "build": "weapp build"
  }
}

npm run build

结合微信开发者工具，可在 project.config.json 中添加以下字段：

{
  "scripts": {
    "beforeCompile": "npm run build",
    "beforePreview": "npm run build",
    "beforeUpload": "npm run build"
  }
}

并在开发者工具中 “详情” - “本地设置” - “启用自定义命令”，点击 “编译” 时会自动编译源代码。

单页编译

可以选择只编译某一个页面，只需配置 page 字段，值为 pages 目录下的页面的名称。

// weapp.config.js

module.exports = {
  page: 'home'
}

此时只会编译 home 页面。

路径别名

原生小程序中只能使用相对路径，此工具支持绝对路径别名。

@ 与 ~ 都指向 src 目录，示例：

// 编译前
import say from '@/utils/util'

// 编译后
import say from '../../utils/util'

// 编译前
@import "~/styles/main.scss";

// 编译后
@import "../../styles/main.scss"

此语法可在任何文件中使用。

全局样式注入

配置 css 字段，必须为数组，值为样式文件的绝对路径，这些样式文件将被添加到所有 page 的样式中，一般只用于定义 less/scss 变量，全局样式可在 app 样式文件中定义。

// weapp.config.js

module.exports = {
  css: ['~/styles/variable.scss']
}

添加 Component / Page

Component

组件会添加到 src/components 目录下。

weapp component <component-name>

或使用简写：

weapp cpt <component-name>

Page

页面会添加到 src/pages 目录下，页面路径会自动追加到 app.json 的 pages 字段中。

weapp component <page-name>

或使用简写：

weapp p <page-name>

License

MIT © LI_FA_LIANG