uni-app developed gadgets --uni-toolkit

What is uni-toolkit

uni-toolkit (hereinafter referred Toolkit) it is an auxiliary uni-app tool (current) developed. toolkit is not a development framework is not a plug-in application, which acts on the front uni-app code is compiled, designed to enhance the uni-app development experience.

These finished, probably did not explain clearly toolkit in the end is doing. Moji you, please read on.

Its origins

Recently the team will consider small micro-channel program (hereinafter referred to as mina) to migrate to the uni-app, it runs tests found a quite different point of mina with a uni-app.

mina Each page has a .json file.
All pages are configured uni-app in pages.json this a public document.

uni-app of this design means that the configuration whenever there is a need to change the page, it is necessary to operate pages.jsonthis file. In multiplayer collaborative development, doing so may make developers often deal with pages.jsonconflict file.

Some may ask here: mina in Add / reduce page, you need to operate app.jsonthe file, it will also result in file conflicts?

In this regard, the team has been coping strategies is this:

By scanning scripts pagesdirectory, automatically generates app.jsonthe pagesnode information.
Ordinary developers only need to submit the relevant documents page, you can ensure that other person's page information are synchronized.
In addition app.jsonthe changes in other items, and not so frequent.

After the team decided to postpone the discussion of migration, try to optimize this is not an ideal design.

Clear demand

In order to meet the needs of the configuration without disturbing each other between pages, toolkit to achieve the following main functions:

Decomposition pages.jsonfiles, configuration files to generate a single page.
But also to be able to dismantle the construction, re-assembled into the configuration file after the decomposition pages.jsonfile.

We read the uni-app of pages.jsonthe file, which will be configured to re-divided into the following categories:

Single page configuration, i.e. pageswith the subpackages(subPackages)child node.
Global Configuration page, that globalStylenode.
Tab to configure that tabBarnode.
Other configurations, such as ['condition', 'preloadRule']and the like.

According to this division, work toolkit as shown below.

Enhanced Configuration

In the specific development process, we will be further divided into several pages following roles:

Ordinary page
Home side
Tab page
Subcontracting page

By increasing the tag information of ways to define the role of the page.

PS: tests using a hello-uniapp applications.

Home side

{
  "path": "pages/tabBar/component/component",
  "style": {
    "navigationBarTitleText": "内置组件"
  },
  "@home": true
}

Tab page

{
  "path": "pages/tabBar/API/API",
  "style": {
    "navigationBarTitleText": "接口"
  },
  "@tab": {
    "iconPath": "static/api.png",
    "selectedIconPath": "static/apiHL.png",
    "text": "接口"
  }
}

Subcontracting page

{
  "path": "pages/API/action-sheet/action-sheet",
  "style": {
    "navigationBarTitleText": "操作菜单"
  },
  "@subpackage": {
    "root": "pages/API/"
  }
}

With these new markers can be identified roles page, and then a combination of the expected pages.jsonfile.

Quick Start

The next demonstration of how to use the uni-toolkit supporting the development of uni-app to help you get started quickly.

New Project

Create a uni-app items HBuilderX and is called uni-toolkit-demo. Once created, the project will run until the browser.

PS: You can also choose vue-cli create, see the document .

installation

Run the following commands in the root directory of the project, the installation package uni-toolkit.

$ npm install --save-dev uni-toolkit

initialization

After a successful installation, you can initialize configured.

$ npx uni-toolkit init

Initialization is complete, the directory structure of the project are as follows.

@pagesDirectory for storing uni-toolkit exploded pages.jsonconfiguration set generated after.
pages.uni.jsonUsed to back up the original pages.jsonfile.

Start tool

执行如下命令，开启监听@pages中配置信息变化的服务。

$ npx uni-toolkit watch

新建页面

推荐使用create命令来新建页面。

新建一个命令行窗口，执行如下命令，创建一个路径为pages/login/login，标题为“登录”的新页面。

$ npx uni-toolkit create pages/login/login 登录

通过create新建页面，pages/login/login.vue与@pages/pages/login/login.json会同步生成，如下图所示。

其中，login.json的内容如下。

{
  "path": "pages/login/login",
  "style": {
    "navigationBarTitleText": "登录"
  }
}

然后，在pages/index/index.vue添加跳转到登录页的代码。

<template>
  <view class="content">
    <button type="primary" @click="goLogin">登录</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      goLogin() {
        uni.navigateTo({
          url: '/pages/login/login'
        });
      }
    }
  }
</script>

在浏览器中，点击“登录”按钮，成功跳转至相应页面。

至此一个简单的演示就结束了，更多内容见 uni-toolkit 文档。

开发建议

团队协作使用 uni-toolkit 开发时，关于pages.json文件的更新，建议约定如下：

普通开发人员，不允许提交pages.json文件。日常开发中，只需提交@pages中的配置文件。
应用每次封版时，指定某一个人build之后提交此版本对应的pages.json文件。扮演这个角色的通常是 Team leader，具体视情况而定。

最后

大家如果觉得 uni-toolkit 还不错，欢迎 Star 与交流。同时，也希望 uni-app 越来越好，生态越来越完善。

主仓库以及文档，均在码云上。
GitHub 上有一个同步的仓库，每次发版时更新。