uni-toolkit 是什么

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

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

它的由來

近期團(tuán)隊考慮將微信小程序（以下簡稱 mina）遷移到 uni-app 來，在進(jìn)行測試的過程中發(fā)現(xiàn)了一處 mina 與 uni-app 存在較大差異的點(diǎn)。

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

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

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

關(guān)于這一點(diǎn)，團(tuán)隊一直以來的應(yīng)對策略是這樣的：

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

討論過后團(tuán)隊決定暫緩遷移工作，嘗試優(yōu)化這個不太理想的設(shè)計。

明確需求

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

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

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

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

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

配置增強(qiáng)

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

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

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

PS：測試用的是 hello-uniapp 應(yīng)用。

首頁面

{
  "path": "pages/tabBar/component/component",
  "style": {
    "navigationBarTitleText": "內(nèi)置組件"
  },
  "@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/"
  }
}

通過這些新增的標(biāo)記，可以識別頁面的角色，進(jìn)而組合出預(yù)期的pages.json文件。

快速上手

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

新建項目

在 HBuilderX 中創(chuàng)建一個 uni-app 項目，名為 uni-toolkit-demo。創(chuàng)建后，將項目運(yùn)行至瀏覽器。

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

安裝

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

$ npm install --save-dev uni-toolkit

初始化

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

$ npx uni-toolkit init

初始化完成，項目的目錄結(jié)構(gòu)如下。

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

啟動工具

執(zhí)行如下命令，開啟監(jiān)聽@pages中配置信息變化的服務(wù)。

$ npx uni-toolkit watch

新建頁面

推薦使用create命令來新建頁面。

新建一個命令行窗口，執(zhí)行如下命令，創(chuàng)建一個路徑為pages/login/login，標(biāo)題為“登錄”的新頁面。

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

通過create新建頁面，pages/login/login.vue與@pages/pages/login/login.json會同步生成，如下圖所示。

其中，login.json的內(nèi)容如下。

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

然后，在pages/index/index.vue添加跳轉(zhuǎn)到登錄頁的代碼。

<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>

在瀏覽器中，點(diǎn)擊“登錄”按鈕，成功跳轉(zhuǎn)至相應(yīng)頁面。

更多

至此一個簡單的演示就結(jié)束了，更多內(nèi)容見 uni-toolkit 文檔。

開發(fā)建議

團(tuán)隊協(xié)作使用 uni-toolkit 開發(fā)時，關(guān)于pages.json文件的更新，建議約定如下：

普通開發(fā)人員，不允許提交pages.json文件。日常開發(fā)中，只需提交@pages中的配置文件。
應(yīng)用每次封版時，指定某一個人build之后提交此版本對應(yīng)的pages.json文件。扮演這個角色的通常是 Team leader，具體視情況而定。

最后

大家如果覺得 uni-toolkit 還不錯，歡迎 Star 與交流。同時，也希望 uni-app 越來越好，生態(tài)越來越完善。

主倉庫以及文檔，均在碼云上。
GitHub 上有一個同步的倉庫，每次發(fā)版時更新。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。