基於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
  • 一:背景 1.講故事 在分析的眾多dump中,經常會遇到各種奇葩的問題,僅通過dump這種快照形式還是有很多問題搞不定,而通過 perfview 這種粒度又太粗,很難找到問題之所在,真的很頭疼,比如本篇的 短命線程 問題,參考圖如下: 我們在 t2 時刻抓取的dump對查看 短命線程 毫無幫助,我根 ...
  • 在日常後端Api開發中,我們跟前端的溝通中,通常需要協商好入參的數據類型,和參數是通過什麼方式存在於請求中的,是表單(form)、請求體(body)、地址欄參數(query)、還是說通過請求頭(header)。 當協商好後,我們的介面又需要怎麼去接收這些數據呢?很多小伙伴可能上手就是直接寫一個實體, ...
  • 許多情況下我們需要用到攝像頭獲取圖像,進而處理圖像,這篇博文介紹利用pyqt5、OpenCV實現用電腦上連接的攝像頭拍照並保存照片。為了使用和後續開發方便,這裡利用pyqt5設計了個相機界面,後面將介紹如何實現,要點包括界面設計、邏輯實現及完整代碼。 ...
  • 思路分析 註冊頁面需要對用戶提交的數據進行校驗,並且需要對用戶輸入錯誤的地方進行提示! 所有我們需要使用forms組件搭建註冊頁面! 平時我們書寫form是組件的時候是在views.py裡面書寫的, 但是為了接耦合,我們需要將forms組件都單獨寫在一個地方,需要用的時候導入就行! 例如,在項目文件 ...
  • 思路分析 登錄頁面,我們還是採用ajax的方式提交用戶數據 唯一需要學習的是如何製作圖片驗證碼! 具體的登錄頁面效果圖如下: 如何製作圖片驗證碼 推導步驟1:在img標簽的src屬性里放上驗證碼的請求路徑 補充1.img的src屬性: 1.圖片路徑 2.url 3.圖片的二進位數據 補充2:字體樣式 ...
  • 哈嘍,兄弟們! 最近有許多小伙伴都在吐槽打工好難。 每天都是執行許多重覆的任務 例如閱讀新聞、發郵件、查看天氣、打開書簽、清理文件夾等等, 使用自動化腳本,就無需手動一次又一次地完成這些任務, 非常方便啊有木有?! 而在某種程度上,Python 就是自動化的代名詞。 今天就來和大家一起學習一下, 用 ...
  • 作者:IT王小二 博客:https://itwxe.com 前面小二介紹過使用Typora+PicGo+LskyPro打造舒適寫作環境,那時候需要使用水印功能,但是小二在升級LskyPro2.x版本發現有很多不如人意的東西,遂棄用LskyPro使用MinIO結合代碼實現自己需要的圖床功能,也適合以後 ...
  • OpenAI Gym是一款用於研發和比較強化學習演算法的工具包,本文主要介紹Gym模擬環境的功能和工具包的使用方法,並詳細介紹其中的經典控制問題中的倒立擺(CartPole-v0/1)問題。最後針對倒立擺問題如何建立控制模型並採用爬山演算法優化進行了介紹,並給出了相應的完整python代碼示例和解釋。要... ...
  • python爬蟲瀏覽器偽裝 #導入urllib.request模塊 import urllib.request #設置請求頭 headers=("User-Agent","Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, l ...
  • 前端代碼搭建 主要利用的是bootstrap3中js插件里的模態框版塊 <li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">修改密碼</a></li> <div class="modal fade bs-exam ...