uni-toolkit 是什么

uni-toolkit（以下簡稱 toolkit） 是一個用于輔助 uni-app 開發的工具（集）。toolkit 不是開發框架也不是應用插件，它作用于 uni-app 代碼編譯前，旨在增強 uni-app 的開發體驗。

講完這些，可能還是沒有交代清楚 toolkit 到底是干什么的。各位莫急，請繼續往下看。

它的由來

近期團隊考慮將微信小程序（以下簡稱 mina）遷移到 uni-app 來，在進行測試的過程中發現了一處 mina 與 uni-app 存在較大差異的點。

mina 每個頁面都有一個 .json 文件。
uni-app 的所有頁面配置都在 pages.json 這一個公共的文件中。

uni-app 的這種設計意味著，每當有頁面的配置需要改變，就要去操作pages.json這個文件。在多人協作開發時，這樣做可能會使得開發人員經常應對pages.json文件的沖突。

到這里可能有人會問：mina 中新增/減少頁面，需要操作app.json文件，同樣會造成文件沖突呀？

關于這一點，團隊一直以來的應對策略是這樣的：

通過腳本掃描pages目錄，自動生成app.json的pages節點信息。
普通開發人員只需提交頁面相關文件，就可以保證其他人的頁面信息是同步的。
另外app.json中其它項的變動，并不會那么頻繁。

討論過后團隊決定暫緩遷移工作，嘗試優化這個不太理想的設計。

明確需求

為了滿足頁面之間配置互不干擾的需求，toolkit 要實現以下主體功能：

分解pages.json文件，生成單個頁面的配置文件。
能拆還要能建，根據分解后的配置文件重新組合成pages.json文件。

我們在閱讀了 uni-app 的pages.json文件后，將其中的配置重新劃分為以下幾類：

單個頁面配置，即pages與subpackages(subPackages)節點中的子項。
全局頁面配置，即globalStyle節點。
選項卡配置，即tabBar節點。
其它配置，如['condition', 'preloadRule']等。

根據這個劃分，toolkit 的工作如下圖所示。

配置增強

在具體的開發過程中，我們進一步將頁面劃分了以下幾種角色：

普通頁面
首頁面
選項卡頁面
分包頁面

通過增加標記信息的方式，來明確頁面的角色。

PS：測試用的是 hello-uniapp 應用。

首頁面

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

選項卡頁面

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

分包頁面

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

通過這些新增的標記，可以識別頁面的角色，進而組合出預期的pages.json文件。

快速上手

接下來演示一下如何使用 uni-toolkit 輔助 uni-app 的開發，幫助你快速上手。

新建項目

在 HBuilderX 中創建一個 uni-app 項目，名為 uni-toolkit-demo。創建后，將項目運行至瀏覽器。

PS：你也可以選擇 vue-cli 方式創建，見文檔。

安裝

在項目根目錄下執行如下命令，安裝 uni-toolkit 包。

$ npm install --save-dev uni-toolkit

初始化

安裝成功后，就可以初始化配置了。

$ npx uni-toolkit init

初始化完成，項目的目錄結構如下。

@pages目錄用于存放 uni-toolkit 分解pages.json后生成的配置集。
pages.uni.json用于備份最初的pages.json文件。

啟動工具

執行如下命令，開啟監聽@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 上有一個同步的倉庫，每次發版時更新。

總結

以上是生活随笔為你收集整理的uni-app 开发小工具——uni-toolkit的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。