今天給各位分享uniapp開發(fā)app的原理的知識，其中也會對uniapp如何開發(fā)app進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關注本站，現(xiàn)在開始吧！

uni-app 入門到精通 （二）

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

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

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

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

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

我們選擇默認模板即可，

成功后我們執(zhí)行

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

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

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

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

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

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

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

2.uni.redirectTo(OBJECT)

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

3.uni.reLaunch(OBJECT)

關閉所有頁面，打開到應用內的某個頁面。

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

4.uni.switchTab(OBJECT)

跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面。

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

5.uni.navigateBack(OBJECT)

關閉當前頁面，返回上一頁面或多級頁面?？赏ㄟ^ getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

5.uni.preloadPage(OBJECT)

預加載頁面，是一種性能優(yōu)化技術。被預載的頁面，在打開時速度更快。

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

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

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

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

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

uniapp開發(fā)App引導頁

App的引導頁是當用戶第一次打開一款App時所展示的3-5精美的圖片，用于告知用戶產品的功能及特點。好的引導頁會促使用戶對產品增加更多的興趣，當然這是UI設計的能力體現(xiàn)了，盡管很多人都會快速的滑過。對于開發(fā)人員怎么去添加這幾張圖片只有在用戶第一次打開app時展示呢。

以uniapp開發(fā)的項目為例：在onLaunch函數中，檢查flag是否為false，如果為false,則跳轉到引導頁面，在引導頁中可設置跳轉到首頁。注意，最好用reLaunch，避免，用戶物理按鍵返回；為true，則存儲flag到本地。原理既是如此；但是實際開發(fā)時，會發(fā)現(xiàn)，存在閃屏現(xiàn)象，這樣用戶的體驗就不太好，所以比較關鍵的地方就在于這塊，還是以uniapp為例，需要在uniapp的源碼視圖下將splashscreen的設置進行修改，將autoclose改為false，在onLaunch中通過設置延遲時間調用plus.navigator.closeSplashscreen方法來關閉啟動圖。delay設置為0。這樣啟動圖的設置就ok了。

以下封裝了檢查是否進入引導頁的方法，僅供參考下：

Tip:在多次的應用中發(fā)現(xiàn)，如果在手機本身比較卡的情況下，用戶在第一次開啟app時，還是會存在首頁在引導頁之前出現(xiàn)，這種情況的處理方式是將引導頁默認設置為主頁，即在路由管理中，將引導頁寫在第一個，然后通過flag去判斷是否跳轉到首頁；

以上的引導頁開發(fā)只是提供一種思路，還有很多其他的方式，比如后端去控制是否展示引導頁，引導頁的動態(tài)變化。當然問題本身不難實現(xiàn)，關鍵在于實際應用時所存在的問題。

混合開發(fā)之uni-app

uni-app App端內置weex渲染引擎，提供原生渲染能力

然而， Weex并不是一個前端框架 。實際上，前端框架僅僅是 Weex 的語法層或稱之為 DSL (Domain-specific Language)，它們與原生渲染引擎是分離的。換句話說，Weex 并不依賴于特定的前端框架，隨著前端技術的發(fā)展，Weex 也可以集成更多廣泛使用的前端框架。

以往的 weex ，有個很大的問題是它只是一個高性能的渲染器，沒有足夠的API能力，使得開發(fā)時非常依賴原生工程師協(xié)作，開發(fā)者本來想節(jié)約成本，結果需要前端、iOS、Android 3撥人開發(fā)，適得其反。而 nvue 解決了這個大問題，讓前端工程師可以直接開發(fā)完整 App，并提供原生插件的市場交易和云打包。這些組合方案，開發(fā)者切實的提高效率、降低成本。

如果你是web前端，不熟悉 weex，那么建議你仍然以使用 vue 為主，在App端某些 vue 表現(xiàn)不佳的場景下使用 nvue 作為強化補充：

uni-app App 端內置 HTML5+ 引擎，讓 js 可以直接調用豐富的原生能力。

小程序及 H5 等平臺是沒有 HTML5+ 擴展規(guī)范的，因此在 uni-app 調用 HTML5+ 的擴展規(guī)范時，需要注意使用條件編譯。否則運行到h5、小程序等平臺會出現(xiàn) plus is not defined錯誤。

在普通的 H5+ 項目中，需要使用 document.addEventListener 監(jiān)聽原生擴展的事件。

uni-app 中，沒有 document?？梢允褂?plus.globalEvent.addEventListener 來實現(xiàn)（注意manifest中需開啟新編譯器，即自定義組件模式"usingComponents":true）。

同理，在 uni-app 中使用 Native.js 時，一些 Native.js 中對于原生事件的監(jiān)聽同樣需要按照上面的方法去實現(xiàn)。

注意：舊編譯器（非自定義組件模式）不支持 plus.globalEvent 這個對象。

Uni-app之Nvue開發(fā)細節(jié)總結

uni-app App端內置了一個基于 weex 改進的原生渲染引擎，提供了原生渲染能力

其他：待補充

uniapp開發(fā)出來的與專業(yè)工具開發(fā)出來的有區(qū)別嗎

有區(qū)別。

uniapp是一個開放的、支持多種開發(fā)工具的多端開發(fā)框架。HBuilderX和uniapp，同屬一個公司，即DCloud出品。HBuilderX團隊為uniapp做了大量的優(yōu)化和定制。當然uniapp團隊也為其他開發(fā)工具提供了良好的支持，尤其是對vscode，比其他多端框架做的更多。

uniapp是一個使用Vuejs開發(fā)所有前端應用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web、以及各種小程序、快應用等多個平臺。

uniapp和graceUI介紹

uniapp是一個跨平臺的基于Vuejs的前段框架，一次開發(fā)，支持包括小程序，APP，H5等等的8個端。

uni-app官方網站

uni-app如何學習

于是我找到一個基于uniapp的前段樣式庫框架GraceUI，

使用GraceUI不會降低使用uniapp的優(yōu)勢，并補全了關于樣式和組件方面的教學和完善，下面是GraceUI我認為的優(yōu)點。

graceUI是一款基于uni-app和微信小程序開發(fā)的前段樣式庫，擁有全局樣式表，組件，表單認證等等功能。

GraceUI官網

GraceUI免費教學

關于uniapp開發(fā)app的原理和uniapp如何開發(fā)app的介紹到此就結束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。