當前位置:首頁 » 網頁前端 » 前端要學uniapp
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端要學uniapp

發布時間: 2023-08-08 20:14:18

❶ uniapp多久能上手

主要看個人學習能力和學習時間決定
uni-app 是一個使用 Vue.js 開發跨平台應用的前端框架。開發者通過編寫 Vue.js 代碼,uni-app 將其編譯到iOS、Android、微信小程序等多個平台,保證其正確運行並達到優秀體驗。uni-app 繼承自 Vue.js,提供了完整的 Vue.js 開發體驗。uni-app 組件規范和擴展api與微信小程序基本相同。有一定 Vue.js 和微信小程序開發經驗的開發者可快速上手 uni-app ,開發出兼容多端的應用。uni-app提供了條件編譯優化,可以優雅的為某平台寫個性化代碼、調用專有能力而不影響其他平台。

❷ web前端簡歷上uni-app開發項目怎麼寫

web前端簡歷上uni-app開發項目需要在下載HBuliderX編輯器完成
首先,創建項目,選擇uniapp項目,選擇運行方式運行,開發完成之後選擇發行到web前端。
uni-app是一個使用 Vuejs開發所有前端應用的框架,開發者編寫一套代碼,可發布到iOS、Android、Web(響應式)、以及各種小程序,微信、支付寶、網路、頭條、QQ、釘釘、淘寶,快應用等多個平台。

❸ uni-app 入門到精通 (二)

18 年時候有幸接觸到 uniapp , 寫了一篇 《uni-app 入門到精通》 ,由於一些原因,該方案並沒有執行,該項目一系列文章也就沒有再寫下去,所以遭受到了許多人評論的吐槽,到如今公司項目的需求又要根據 uniapp 寫 H5 嵌入到 app 中,所以想根據項目實際開發分享一下,有興趣的夥伴可以參考和吐槽。

這一篇文章主要分享一下內容

uniapp 模板項目有兩種初始化方式

由於無法舍棄 VSCode ,我們採用 vue-cli 來初始化項目, HBuilderX 大家可以參照官方文檔

這種方式是可以通過 vue 腳手架命令指定模板,這個是 dcloudio 的官方提供模板

我們選擇默認模板即可,
成功後我們執行

打開瀏覽器地址,直接運行即可。

一般剛接觸前端的小夥伴可能會對 postcss 不太了解,這里簡單介紹一下,

當然 PostCSS 具體使用是需要引入一些插件的,例如常用的是 autoprefixer postcss-preset-env 等, 具體如何使用大家可以自行參考資料,畢竟這塊知識還是挺多的就不具體展開解釋了。

通常我們在寫移動端時候需要做的是頁面適配方案的確定, uni-app 支持的通用 css 單位包括 px、rpx , 之前的 upx 方案已經被廢棄掉,官方解釋是目前市面上已經基本上支持了微信的 rpx 方案,所以 upx 中轉方案已經意義不大了,不過還可以繼續使用,不過已經不再推薦。

rpx 之初是由微信小程序提出一種方案,即根據寬度來進行適配以 750 寬屏幕為基準, 750rpx 恰好為屏幕寬度, uni-app 規定屏幕基準寬度 750rpx 。所以說如果你們的UI 設計以 750*1334 iphone 6/6s 為基準設計的話,你只需要將屏幕上 px 寫為 rpx 即可,不用做任何換算,如果不是的話,你就需要做如下換算:

uniapp 有自己一套路由管理機制,而未採用 vue-route 方案,個人認為這套方案還是比較成熟和好用的,以及可以滿足我們日常的需求:

保留當前頁面,跳轉到應用內的某個頁面,使用uni.navigateBack可以返回到原頁面。

2.uni.redirectTo(OBJECT)

關閉當前頁面,跳轉到應用內的某個頁面。

3.uni.reLaunch(OBJECT)
關閉所有頁面,打開到應用內的某個頁面。

注意: 如果調用了 uni.preloadPage(OBJECT)) 不會關閉,僅觸發生命周期 onHide

4.uni.switchTab(OBJECT)

跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面。

注意: 如果調用了 uni.preloadPage(OBJECT)不會關閉,僅觸發生命周期 onHide

5.uni.navigateBack(OBJECT)

關閉當前頁面,返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧,決定需要返回幾層。

5.uni.preloadPage(OBJECT)

預載入頁面,是一種性能優化技術。被預載的頁面,在打開時速度更快。

以上路由API 已經滿足我們的需求,當然進行路由跳轉的前提是我們需要在 pages.json 進行路由配置, 包括路由和具體的樣式配置

而進行具體路由跳轉我們需要如下,需要多加一個 /

需要特別注意的一點是, 利用瀏覽器 在 進行 移動H5頁面調試時候,會出現頁面刷新之後頁面棧會消失,此時navigateBack不能返回,如果一定要返回可以使用history.back()導航到瀏覽器的其他歷史記錄。

uniapp 提供網路請求的 api 是 uni.request ,具體支持的請求方法可以參考官網 method 有效值

不過我們通常不會直接使用,而是進過一系列的封裝以方便我們的使用,具體封裝介面使用會在隨根據頁面數據請求一並展示。