Skip to content
No description, website, or topics provided.
JavaScript CSS TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
anka_template
src
utils
.editorconfig
.gitignore
.stylelintrc
README.md
anka.config.js
babel.config.js
package.json
postcss.config.js
tsconfig.json

README.md

quickstart

Anka-quickstart

这份示例代码将帮助你上手 Anka-CLI。

详细文档参见文档站点

基础使用

初始化项目

首先安装 Anka-CLI

$ npm install @anka-dev/cli -g

成功之后在终端执行 anka,应当能看见如下信息:

    _     _  _   _  _     _
   /_\   | \| | | |/ /   /_\
  / _ \  | .` | | ' <   / _ \
 /_/ \_\ |_|\_| |_|\_\ /_/ \_\

Usage:  <command> [options]

Options:
  --debug                             enable debug mode
  --quiet                             hide compile log
  -V, --version                       output the version number
  -h, --help                          output usage information

Commands:
  prod                                Production mode
  dev [pages...]                      Development mode
  init [options] <project-name>       Initialize new project
  new-page [options] <pages...>       Create a miniprogram page
  new-cmpt [options] <components...>  Create a miniprogram component
  enroll [options] <components...>    Enroll a miniprogram component

其次我们要做的是使用 CLI 创建一个项目目录。

$ anka init anka-quickstart

这个目录结构如下:

├── dist
├── anka.config.js
├── package.json
├── postcss.config.js
├── src
│   ├── app.json
│   ├── project.config.json
│   └── style
│       ├── _var.css
│       └── _var.scss
└── utils
    └── index.js

其中 src 是我们的源码代码目录,dist 是编译产出目录,预览时使用小程序开发 IDE 打开 dist 文件夹。

创建页面

进入 anka-quickstart 目录。并执行以下命令

$ anka page home

则会在 src/ 目录发生如下变更:

├── src
│   ├── app.json
│   ├── pages
│   │   └── home
│   │       ├── home.js
│   │       ├── home.json
│   │       ├── home.wxml
│   │       └── home.wxss

并且 src/app.jsonpages 字段多了一行:

{
    "pages": [
        "pages/home/home"       // here
    ],
    "subPackages": [],
    "window": {
        "navigationBarTitleText": "Wechat"
    }
}

当然,我们也可以使用分包加载:

$ anka page home --root=packageA

与之前不一样的是 src/app.json:

{
    "pages": [],
    "subPackages": [            // 这里变化
        {
            "root": "packageA",
            "pages": [
                "home/home"
            ]
        }
    ],
    "window": {
        "navigationBarTitleText": "Wechat"
    }
}

同时项目目录变化如下:

├── anka.config.js
├── package.json
├── postcss.config.js
├── src
│   ├── app.json
│   ├── packageA
│   │   └── home
│   │       ├── home.js
│   │       ├── home.json
│   │       ├── home.wxml
│   │       └── home.wxss
│   ├── project.config.json
│   └── style
│       ├── _var.css
│       └── _var.scss
└── utils
    └── index.js

创建组件

$ anka component co

则会在 src/components 下创建组件:

├── src
│   ├── app.json
│   ├── components
│   │   └── co
│   │       ├── co.js
│   │       ├── co.json
│   │       ├── co.wxml
│   │       └── co.wxss

但是组件不会被自动�注册,所以还需要做一件事儿将 co 组件添加到 home 页:

$ anka add co --page=pages/home/home

查看 src/pages/home/home.json 我们会发现:

{
    "navigationBarTitleText": "title",
    "navigationBarBackgroundColor": "#FFFFFF",
    "navigationBarTextStyle": "black",
    "usingComponents": {
        // 多了这一行
        "co": "/components/co/co"
    }
}

当然,我们也能移除组件,只要执行:

$ anka remove co --page=pages/home/home

提升开发效率

dev 命令

执行下面这条命令,anka 会监听文件变化并自动处理 npm 依赖:

$ anka dev

比如我们可以在 src/pages/home/home.js 中这样写:

import qs from 'qs'
import lodash from 'lodash'

Page({
  onLoad() {
    qs.stringify({
      name: 'anka'
    })
    console.log(lodash.cloneDeep(this.data))
  },

  onShow() {
    console.log(this, 'hello')
  }
})

前提是你已经安装 qs lodash 依赖。

使用 Sass 和 PostCSS

是的,我们能将 src/paegs/home/home.wxss 改写为 src/paegs/home/home.css,并且在里面引入别的 css 文件。需要区别的是,这里有两种引入方式:

  • @import "./_var.css";
  • @wximport "./sub.css";

@import 语句必须前置,其次是 @wximport。当使用 @import 时,文件会在编译时被引入,但是当使用 @wximport 时,文件并不会被合并,最终表现是:@wximport 转化为微信 wxss@import 语法。

注意: 不要忘记 postcss.config.js 文件

You can’t perform that action at this time.