uniapp開發(fā)app準備(uniapp開發(fā)app視頻教程)
今天給各位分享uniapp開發(fā)app準備的知識,其中也會對uniapp開發(fā)app視頻教程進行解釋,如果能碰巧解決你現(xiàn)在面臨的問題,別忘了關(guān)注本站,現(xiàn)在開始吧!
uniapp開發(fā)App引導(dǎo)頁
App的引導(dǎo)頁是當用戶第一次打開一款A(yù)pp時所展示的3-5精美的圖片,用于告知用戶產(chǎn)品的功能及特點。好的引導(dǎo)頁會促使用戶對產(chǎn)品增加更多的興趣,當然這是UI設(shè)計的能力體現(xiàn)了,盡管很多人都會快速的滑過。對于開發(fā)人員怎么去添加這幾張圖片只有在用戶第一次打開app時展示呢。
以uniapp開發(fā)的項目為例:在onLaunch函數(shù)中,檢查flag是否為false,如果為false,則跳轉(zhuǎn)到引導(dǎo)頁面,在引導(dǎo)頁中可設(shè)置跳轉(zhuǎn)到首頁。注意,最好用reLaunch,避免,用戶物理按鍵返回;為true,則存儲flag到本地。原理既是如此;但是實際開發(fā)時,會發(fā)現(xiàn),存在閃屏現(xiàn)象,這樣用戶的體驗就不太好,所以比較關(guān)鍵的地方就在于這塊,還是以uniapp為例,需要在uniapp的源碼視圖下將splashscreen的設(shè)置進行修改,將autoclose改為false,在onLaunch中通過設(shè)置延遲時間調(diào)用plus.navigator.closeSplashscreen方法來關(guān)閉啟動圖。delay設(shè)置為0。這樣啟動圖的設(shè)置就ok了。
以下封裝了檢查是否進入引導(dǎo)頁的方法,僅供參考下:
Tip:在多次的應(yīng)用中發(fā)現(xiàn),如果在手機本身比較卡的情況下,用戶在第一次開啟app時,還是會存在首頁在引導(dǎo)頁之前出現(xiàn),這種情況的處理方式是將引導(dǎo)頁默認設(shè)置為主頁,即在路由管理中,將引導(dǎo)頁寫在第一個,然后通過flag去判斷是否跳轉(zhuǎn)到首頁;
以上的引導(dǎo)頁開發(fā)只是提供一種思路,還有很多其他的方式,比如后端去控制是否展示引導(dǎo)頁,引導(dǎo)頁的動態(tài)變化。當然問題本身不難實現(xiàn),關(guān)鍵在于實際應(yīng)用時所存在的問題。
uniapp搭建
1.uniapp搭建首選項是通過hbuildx去新建項目
2.如果新手可以先選擇hello uni-app這個模板,里面涵蓋了uniapp里的各種組件、API和框架的介紹,能夠讓你更快速的對uniapp有一個視覺上的認知。如果你想直接開發(fā)不需要框架里的多余文件,那你可以選擇默認模板,這模板是精簡版的只有幾個簡單的目錄,當然你也可以選擇uni-template或者其他模板,根據(jù)自己需要自己創(chuàng)建。下面是兩種模板的對比
3.創(chuàng)建完成后就可以點擊hbuilder的運行來啟動項目了。
uni-app 入門到精通 (二)
18 年時候有幸接觸到 uniapp , 寫了一篇 《uni-app 入門到精通》 ,由于一些原因,該方案并沒有執(zhí)行,該項目一系列文章也就沒有再寫下去,所以遭受到了許多人評論的吐槽,到如今公司項目的需求又要根據(jù) uniapp 寫 H5 嵌入到 app 中,所以想根據(jù)項目實際開發(fā)分享一下,有興趣的伙伴可以參考和吐槽。
這一篇文章主要分享一下內(nèi)容
uniapp 模板項目有兩種初始化方式
由于無法舍棄 VSCode ,我們采用 vue-cli 來初始化項目, HBuilderX 大家可以參照官方文檔
這種方式是可以通過 vue 腳手架命令指定模板,這個是 dcloudio 的官方提供模板
我們選擇默認模板即可,
成功后我們執(zhí)行
打開瀏覽器地址,直接運行即可。
一般剛接觸前端的小伙伴可能會對 postcss 不太了解,這里簡單介紹一下,
當然 PostCSS 具體使用是需要引入一些插件的,例如常用的是 autoprefixer postcss-preset-env 等, 具體如何使用大家可以自行參考資料,畢竟這塊知識還是挺多的就不具體展開解釋了。
通常我們在寫移動端時候需要做的是頁面適配方案的確定, uni-app 支持的通用 css 單位包括 px、rpx , 之前的 upx 方案已經(jīng)被廢棄掉,官方解釋是目前市面上已經(jīng)基本上支持了微信的 rpx 方案,所以 upx 中轉(zhuǎn)方案已經(jīng)意義不大了,不過還可以繼續(xù)使用,不過已經(jīng)不再推薦。
rpx 之初是由微信小程序提出一種方案,即根據(jù)寬度來進行適配以 750 寬屏幕為基準, 750rpx 恰好為屏幕寬度, uni-app 規(guī)定屏幕基準寬度 750rpx 。所以說如果你們的UI 設(shè)計以 750*1334 iphone 6/6s 為基準設(shè)計的話,你只需要將屏幕上 px 寫為 rpx 即可,不用做任何換算,如果不是的話,你就需要做如下?lián)Q算:
uniapp 有自己一套路由管理機制,而未采用 vue-route 方案,個人認為這套方案還是比較成熟和好用的,以及可以滿足我們?nèi)粘5男枨?
保留當前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面,使用uni.navigateBack可以返回到原頁面。
2.uni.redirectTo(OBJECT)
關(guān)閉當前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。
3.uni.reLaunch(OBJECT)
關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個頁面。
注意: 如果調(diào)用了 uni.preloadPage(OBJECT)) 不會關(guān)閉,僅觸發(fā)生命周期 onHide
4.uni.switchTab(OBJECT)
跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面。
注意: 如果調(diào)用了 uni.preloadPage(OBJECT)不會關(guān)閉,僅觸發(fā)生命周期 onHide
5.uni.navigateBack(OBJECT)
關(guān)閉當前頁面,返回上一頁面或多級頁面??赏ㄟ^ getCurrentPages() 獲取當前的頁面棧,決定需要返回幾層。
5.uni.preloadPage(OBJECT)
預(yù)加載頁面,是一種性能優(yōu)化技術(shù)。被預(yù)載的頁面,在打開時速度更快。
以上路由API 已經(jīng)滿足我們的需求,當然進行路由跳轉(zhuǎn)的前提是我們需要在 pages.json 進行路由配置, 包括路由和具體的樣式配置
而進行具體路由跳轉(zhuǎn)我們需要如下,需要多加一個 /
需要特別注意的一點是, 利用瀏覽器 在 進行 移動H5頁面調(diào)試時候,會出現(xiàn)頁面刷新之后頁面棧會消失,此時navigateBack不能返回,如果一定要返回可以使用history.back()導(dǎo)航到瀏覽器的其他歷史記錄。
uniapp 提供網(wǎng)絡(luò)請求的 api 是 uni.request ,具體支持的請求方法可以參考官網(wǎng) method 有效值
不過我們通常不會直接使用,而是進過一系列的封裝以方便我們的使用,具體封裝接口使用會在隨根據(jù)頁面數(shù)據(jù)請求一并展示。
uniapp框架開發(fā)技巧
//以下摘自官方文檔
/*Vue 在更新 DOM 時是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化,Vue 將開啟一個隊列,并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。例如,當你設(shè)置 vm.someData = 'new value',該組件不會立即重新渲染。當刷新隊列時,組件會在下一個事件循環(huán)“tick”中更新。多數(shù)情況我們不需要關(guān)心這個過程,但是如果你想基于更新后的 DOM 狀態(tài)來做點什么,這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發(fā)人員使用“數(shù)據(jù)驅(qū)動”的方式思考,避免直接接觸 DOM,但是有時我們必須要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM,可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)。這樣回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用。*/
//意思就是vue在更新視圖層得數(shù)據(jù)時是異步得,可是有時候我們在代碼中想要等待數(shù)據(jù)完全渲染上去dom節(jié)點之后再進行獲取節(jié)點信息操作。比如使用selectorQuery.select(selector) 等相關(guān)api時,如果直接使用有時候會獲取不到正確的數(shù)據(jù),此時可以通過this.$nextTick(callback)的方式在回調(diào)函數(shù)里面進行操作dom節(jié)點
uniapp開發(fā)App,ios發(fā)布流程
? ? ? ?第一步:在? App Store Connect 里,點擊【我的APP】,選擇你的應(yīng)用;
? ? ? ?第二步:添加新版本,然后把升級信息填完,選擇剛剛上傳的版本作為發(fā)布版本
1)關(guān)于版本信息:填寫版本升級的描述;
2)app預(yù)覽:讓設(shè)計做兩種尺寸的圖,關(guān)于app的功能介紹;
3)然后就是構(gòu)建版本了,選擇剛剛上傳的版本;
4)app審核信息備注:登錄流程/主要功能流程;
5)? 版本發(fā)布一般選擇手動發(fā)布;
6)廣告標識符通常選擇【是】,標識復(fù)選框通常選后三個即可;
7)? 最后提交審核就可以了。
七、uni-app 原生插件開發(fā)03 - 制作自定義基座
在制作之前,需要做以下準備工作:
其中,provision profile 的路徑為:
p12 文件在 keychain 中導(dǎo)出。
在 HBuilderX 中,選擇制定自定義 調(diào)試基座 選項。
點擊之后,進行 iOS 的相關(guān)配置:
配置完成之后,點擊打包按鈕,查看控制臺:
此時,完成了自定義基座 。
我們從控制臺輸出可以看出:
連接真機設(shè)備,然后點擊運行按鈕,選擇真機設(shè)備運行。
控制臺輸出如下:
按照控制臺提示,在手機上打開新安裝的 APP,就可以開始調(diào)試了。
關(guān)于uniapp開發(fā)app準備和uniapp開發(fā)app視頻教程的介紹到此就結(jié)束了,不知道你從中找到你需要的信息了嗎 ?如果你還想了解更多這方面的信息,記得收藏關(guān)注本站。