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

来源:https://www.cnblogs.com/wuhuacong/archive/2022/09/19/16707881.html
-Advertisement-
Play Games

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


現在的很多程式應用,基本上都是需要多端覆蓋,因此基於一個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代碼中導入組件即可

 

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

登陸界面效果

業務系統的主界面效果

業務字典管理界面

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

 

創建組織機構的界面。

  角色管理和角色人員維護

 

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

 

專註於代碼生成工具、.Net/.NetCore 框架架構及軟體開發,以及各種Vue.js的前端技術應用。著有Winform開發框架/混合式開發框架、微信開發框架、Bootstrap開發框架、ABP開發框架、SqlSugar開發框架等框架產品。
  轉載請註明出處:撰寫人:伍華聰  http://www.iqidi.com 
    

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一個沉浸感十足的游戲,其場景中的全局光照效果一定功不可沒。 動態漫反射全局光照(DDGI)帶來的光影變化,是細膩延展的視覺語言,讓場景中每種顏色都有了“五彩斑斕”的詮釋,場景佈局光影,物體關係立顯,環境溫度降臨,拓展了畫面信息傳達的層次,點睛之筆。 直接光渲染 VS 動態漫反射全局光照 細膩的光照視 ...
  • ⚠️1.1萬長文⚠️ React源碼並非洪水猛獸,知道方法,就可以很輕易地馴服它(=^▽^=)。文章基於最新的React源碼進行調試及閱讀,將以通俗地方式解讀React ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、axios簡介 axios是什麼? Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。 axios有什麼特性?(不得不說面試被問到幾次) 從瀏覽器中創建 XMLHttpRequests 從 ...
  • 前端學科面試寶典 蔡威 [電子郵件地址] HTML5、CSS3...................................................................................................................... ...
  • 筆者最近在看 你不知道的JavaScript上捲,裡面關於 this 的講解個人覺得非常精彩。JavaScript 中的 this 算是一個核心的概念,有一些同學會對其有點模糊和小恐懼,究其原因,現在對 this 討論的文章很多,讓我們覺得 this 無規律可尋,就像一個幽靈一樣 如果你還沒弄懂 t ...
  • 在面向對象的程式設計中,模塊之間交互採用介面編程,通常情況下調用方不需要知道被調用方的內部實現細節,因為一旦涉及到了具體實現,如果需要換一種實現就需要修改代碼,這違反了程式設計的"開閉原則"。所以我們一般有兩種選擇:一種是使用API(Application Programming Interface ...
  • 我的設計模式之旅。本節學習了適配器模式。從程式調用第三方庫時遇到的問題著手,思考如何讓兩個不關聯的類一起工作。並嘗試使用C#運用適配器模式解決方釘與圓孔問題。 ...
  • 上個月我寫的一篇文章《關於技術能力的思考和總結》引起了大家的關註,好多讀者的評論“以寫代想、以想促真、以講驗真”,大家的感受很深刻,基於上次的文章,這篇文章我其實更想跟大家聊聊一些常用的思考方法,思考問題的方式對了,往往可以幫助大家少走彎路。 ...
一周排行
    -Advertisement-
    Play Games
  • ## 引言 最近發現自己喜歡用的 Todo 軟體總是差點意思,畢竟每個人的習慣和工作流不太一樣,我就想著自己寫一個小的[Todo 項目]( https://github.com/circler3/TodoTrack ),核心的功能是自動記錄 Todo 執行過程中消耗的時間(尤其面向程式員),按照自己 ...
  • ### 前言 當我們編寫 C# 代碼時,經常需要處理大量的數據集合。在傳統的方式中,我們往往需要先將整個數據集合載入到記憶體中,然後再進行操作。但是如果數據集合非常大,這種方式就會導致記憶體占用過高,甚至可能導致程式崩潰。 C# 中的`yield return`機制可以幫助我們解決這個問題。通過使用`y ...
  • 1. ADO.NET的前世今生 ADO.NET的名稱起源於ADO(ActiveX Data Objects),是一個COM組件庫,用於在以往的Microsoft技術中訪問數據。之所以使用ADO.NET名稱,是因為Microsoft希望表明,這是在NET編程環境中優先使用的數據訪問介面。 ADO.NE ...
  • 1. 為什麼需要單元測試 在我們之前,測試某些功能是否能夠正常運行時,我們都將代碼寫到Main方法中,當我們測試第二個功能時,我們只能選擇將之前的代碼清掉,重新編寫。此時,如果你還想重新測試你之前的功能時,這時你就顯得有些難為情了,因為代碼都被你清掉了。當然你完全可以把代碼寫到一個記事本中進行記錄, ...
  • 1. 透過現象看本質 反射被譽為是 c#中的黑科技 ,在很多領域中都有反射的身影,例如,我們經常使用的ORM框架,ABP框架 等。 反射指程式可以訪問、檢測和修改它本身狀態或行為的一種能力。. 程式集包含模塊,而模塊包含類型,類型又包含成員。. 反射則提供了封裝程式集、模塊和類型的對象。. 您可以使 ...
  • # Rust Web 全棧開發之 Web Service 中的錯誤處理 ## Web Service 中的統一錯誤處理 ### Actix Web Service 自定義錯誤類型 -> 自定義錯誤轉為 HTTP Response - 資料庫 - 資料庫錯誤 - 串列化 - serde 錯誤 - I/ ...
  • 在前面的幾篇文章中,詳細地給大家介紹了Java里的集合。但在介紹集合時,我們涉及到了泛型的概念卻並沒有詳細學習,所以今天我們要花點時間給大家專門講解什麼是泛型、泛型的作用、用法、特點等內容 ...
  • ###BIO:同步阻塞 主線程發起io請求後,需要等待當前io操作完成,才能繼續執行。 ###NIO:同步非阻塞 引入selector、channel、等概念,當主線程發起io請求後,輪詢的查看系統是否準備好執行io操作,沒有準備好則主線程不會阻塞會繼續執行,準備好主線程會阻塞等待io操作完成。 # ...
  • 摘要:在讀多寫少的環境中,有沒有一種比ReadWriteLock更快的鎖呢?有,那就是JDK1.8中新增的StampedLock! 本文分享自華為雲社區《【高併發】高併發場景下一種比讀寫鎖更快的鎖》,作者: 冰 河。 什麼是StampedLock? ReadWriteLock鎖允許多個線程同時讀取共 ...
  • ## 併發與並行😣 ### 併發與並行的概念和區別 並行:同一個時間段內多個任務同時在不同的CPU核心上執行。強調同一時刻多個任務之間的”**同時執行**“。 併發:同一個時間段內多個任務都在進展。強調多個任務間的”**交替執行**“。 ![](https://img2023.cnblogs.co ...