移動app開發框架(uni-app、5+ mui)系列1

剛開始知道這5+ mui、uni-app這些名詞的時候,只知道是中國自己的產品,並且是關於用html5等開發類似原生app的框架。

剛好最近接手一個app的開發任務,他們又不想面對andriod和ios開發兩套,於是我就想到了可以用它們試一試。
個人喜歡在使用一項技術的時候,最好把它的大概能做的和一些優缺點了解清除。

uni-app和5+ mui按照官網所說的,應該是uni-app是5+ mui的升級版。

5+
HTML5 Plus移動App,簡稱5+App,是一種基於HTML、JS、CSS編寫的運行於手機端的App,這種App可以通過擴展的JS API任意調用手機的原生能力,實現與原生App同樣強大的功能和性能。

uni-app
uni-app加入了vue、微信小程序元素,讓功能更加豐富和強大。所以和vue,微信小程序的寫法和用法都很類似。uni-app是終極跨平臺方案,跨平臺能力、體驗、生態、文檔、客服各個方面均超過5+。

安裝開發環境

兩者目前都只能使用Hbuilder編輯器,因爲Hbuilder就是專門爲它們而生的。
去官網根據個人筆記本下載
http://www.dcloud.io/
下載後直接運行exe文件就可以啓動編輯器了。新建項目就會有選擇nui-app或者5+的項目。我最後選擇了用nui-app來完成任務。

使用nui-app

項目的大概目錄結構,來自官網
在這裏插入圖片描述

problem1

當頁面不需要頂部默認的navigationBar時候,我們可以在不需要的頁面配置app-plus
如圖:
在這裏插入圖片描述

problem2

當登錄頁面的輸入框輸入時,手機會彈出軟鍵盤,但這樣也會導致頁面佈局混亂,無論時頂部的logo圖片或者其他的什麼
這是因爲當android手機彈出軟鍵盤的時候,導致頁面的高度發生改變所以導致我們使用%或者vh的單位定義的元素開始擠壓,所以解決辦法有以下:

  • 不使用%或者vh定義高度
  • 使用 absolute 定位,並且設置 bottom 值進行定位。軟鍵盤彈出時,底部會因爲窗口變化而被頂上來。反向使用 top 進行定位,可以避免此問題。
   this.positionTop = uni.getSystemInfoSync().windowHeight - 100;

歡迎大家補充和指出錯誤,本人虛心接受

原生app、混合app、Webapp
移動app開發框架(uni-app、5+ mui)系列1
移動app開發框架uni-app系列2
移動app開發框架uni-app系列—-填坑

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章