基於HBuilderX+UniApp+ThorUI的手機端前端開發處理

現在的很多程式應用，基本上都是需要多端覆蓋，因此基於一個Web API的後端介面，來構建多端應用，如微信、H5、APP、WInForm、BS的Web管理端等都是常見的應用。本篇隨筆概括性的介紹基於HBuilderX+UniApp+ThorUI的手機端前端開發處理，總結一下開發工具的設置，以及常見的H5端開發的一些相關知識。

1、前後端分離的後端API架構設計

在我們設計好一個Web  API 的接入層後，Web API根據用戶、賬號登錄後獲得相關的令牌，每次訪問介面，通過令牌進行識別用戶身份，從而提供用戶身份相關的數據或者記錄用戶操作信息。

 後端的WebAPI，這裡可以是基於我們自己的技術路線，如Asp.net /Asp.net Core 等的.net路線，或者java路線，不管哪種後端技術架構，都是基於對常規業務的分類，橫向或者縱向切分業務，併在後端對基礎介面的提供進一步的封裝處理，以便提供統一的介面接入處理。

後端採用基於Asp.net的Web API技術，可以提供按Area域來管理API的分類，Web API如下架構所示。

為了更好的進行後端Web API控制器的相關方法的封裝處理，我們把一些常規的介面處理放在BaseApiController裡面，而把基於業務表的操作介面放在BusinessController裡面定義，如下所示。

通過Web API介面返回結果的統一封裝處理，我們定義了相關的格式如下所示。

2、Vue 前端H5應用的開發

 前端開發，可以是基於Vue&Element的管理後臺的前端開發，也可以是Vue + UniApp+手機端組件庫的開發H5或者App應用，技術路線都是基於Vue的，我們這裡主要介紹UniApp+HBuliderX+Vue+ThorUI來開發H5端的應用。

UniApp 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發佈到iOS、Android、Web（響應式）、以及各種小程式（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺。

使用UniApp的主要原因是它的生態比較完善，而且提供了不同平臺的統一的介面調用方法，因此非常方便使用它來統一構建多端應用。

使用UniApp，為了集成方便，一般也會使用HBuilderX開發工具來進行前端的開發。HBuilderX 編輯器是DCloud全新推出的一款HTML5的Web開發工具。HBuilder目前有兩個版本，一個是windows版，一個是mac版。下載的時候根據自己的電腦選擇適合自己的版本即可。如果不考慮深度集成的原因，還可以考慮使用更加廣泛的VS Code編輯器，畢竟VS Code可是前端界的開發標準工具了。

另外UniApp也有自己的組件庫，同時也做的很不錯，不過由於參照模板的問題，我們這裡使用了會員版的Thor UI，可以參考的案例更多，方便做出更好的界面效果。

Thor UI 是一款開發移動端網頁應用、小程式的前端 UI 組件庫，uni-app 版本還可以編譯成為安卓/ iOS APP 應用，特點是輕量、簡潔，組件覆蓋比較全面，使開發更高效。Thor UI目前有微信小程式原生版本 (opens new window)和uni-app版本。

構建基於Vue的前端項目，我們有一個很重要的部分，就是需要準備好對應Web API的前端JS端類的封裝處理，引入了ES6類的概念實現業務基類介面的統一封裝，簡化代碼。

例如常見模塊中的許可權模塊我們涉及到的用戶管理、機構管理、角色管理、菜單管理、功能管理等業務類，那麼這些類繼承BaseApi，就會具有相關的介面了，如下所示繼承關係。

其中JS類的BaseApi具有常規的增刪改查介面，如下所示。

代碼視圖如下所示，主要是定義一些通用的操作方法以及常規API介面的操作方法

 如前端API模塊中，會存在很多類似的JS類，如下圖所示。

這樣繼承的關係，可以儘可能的簡化代碼的處理，類似類的抽象封裝，可以減少大多數的常規代碼，我們只需要繼承基類就可以獲得大類通用的API介面了。

例如，對於常用業務的組織機構類，我們只需要添加一些特殊介面的定義就可以了，其他的會繼承自BaseApi的基類方法。

3、註入一些快捷的操作類入口

有時候，為了便於對一些常用類的操作，我們往往會通過Vue.prototype的方式來註入一些操作類入口，便於快捷處理。

import Vue from 'vue'
Vue.config.productionTip = false
Vue.prototype.http = http
Vue.prototype.tui = tui
Vue.prototype.$store = store

或者我們也可以把它獨立在一個類文件裡面進行引入，這裡借鑒了uview項目的做法，把自定義對象$u掛載到uni對象上，便於操作處理。

有了這些快捷的掛載類，我們可以方便的訪問一些常用的處理方法。

computed: {
    currentUser() {
        if (uni.$u.test.isEmpty(this.creator)) {
            return this.vuex_user?.info?.fullName;
        } else {
            return this.creator;
        }
    },
    currentDate() {
        if (uni.$u.test.isEmpty(this.createTime)) {
            return uni.$u.time.timeFormat();
        } else {
            return uni.$u.time.timeFormat(this.createTime);
        }
    }
},

checkCode() {
    var code = this.formData.shopCode;
    if (uni.$u.test.isEmpty(code)) return;

    shop.CheckCodeValid(code).then(res => {
        if (res.success) {
            this.tui.toast('未被占用, 可以使用！')
        } else {
            uni.$u.toast("已被占用，請使用其他代碼")
        }
    })
},

4、創建頁面組件

我們知道，Vue的強大，其中之一就是它的組件化非常便利，因此我們在設計界面的時候，如果重覆出現，儘可能的把它抽取出來作為組件來定義，然後提供相關的Props參數或者處理事件就很好了，而且可以減少主要頁面的代碼，同時也方便維護組件。

我往往在開發前端項目的時候，會抽取很多共性的地方，作為組件，然後主頁面只需要簡單的調用即可，隨著項目的開發，我們可能抽取更多，完善更好的組件庫出來了。

例如對於一個異常信息的處理，我們整合了多個模塊的內容進行展示，採用自定義組件的方式，可以減少很多繁雜的前端代碼。

 上面頁面的大部分都是自定義組件的整合使用，如下代碼截圖所示。

 需要使用的組件，在Vue的JS代碼中導入組件即可

最後我們來看看其他前端頁面的效果，供參考。

登陸界面效果

業務系統的主界面效果

業務字典管理界面

 組織機構以樹形圖的方式進行展示，單擊可以查看詳細機構信息，或者在下麵提供添加組織機構處理。

創建組織機構的界面。

  角色管理和角色人員維護

這樣通過管理員的許可權來處理許可權系統的基礎信息，也就可以不用在依賴管理前端的操作管理。