uni app 開發注意事項

UNIAPP開發注意事項

一個文檔中的注意事項,往往是發生問題的原因,這裏整合了我認爲容易發生的錯誤(爲了方便我搜索問題)

1.static 目錄下的 js 文件不會被編譯,如果裏面有 es6 的代碼,不經過轉換直接運行,在手機設備上會報錯。

2.cssless/scss 等資源同樣不要放在 static 目錄下,建議這些公用的資源放在 common 目錄下。

3.template內引入靜態資源,如imagevideo等標籤的src屬性時,可以使用相對路徑或者絕對路徑。

4.js文件不支持使用/開頭的方式引入。

5.css文件或style標籤內引入css文件時(scss、less文件同理),只能使用相對路徑。

6.編譯期判斷環境可用條件編譯,運行期判斷可用uni.getSystemInfoSync().platform判斷環境。

7.在字體或高度中使用了 rpx ,那麼需注意這樣的寫法意味着隨着屏幕變寬,字體會變大、高度會變大。如果你需要固定高度,則應該使用 px 。

8.App端,在 pages.json 裏的 titleNView 或頁面裏寫的 plus api 中涉及的單位,只支持 px,不支持 rpx。

9.小程序不支持在css中使用本地文件,包括本地的背景圖和字體文件。需以base64方式方可使用。

10.背景圖片微信小程序不支持相對路徑(真機不支持,開發工具支持)。

11.字體圖標網絡路徑必須加協議頭 https

12.非 H5 端不支持使用含有 dom、window 等操作的 vue 組件和 js 模塊,安裝的模塊及其依賴的模塊使用的 API 必須是 uni-app 已有的 API

13.小程序組件需要放在項目特殊文件夾 wxcomponents(或 mycomponents、swancomponents)。

14.當需要在 vue 組件中使用小程序組件時,注意在 pages.json 的 globalStyle 中配置 usingComponents,而不是頁面級配置。

15.以:style=""這樣的方式設置px像素值,其值爲實際像素,不會被編譯器轉換。

16.若需要禁止蒙版下的頁面滾動,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用來處理 touchmove 的事件,也可以是一個空函數。

17.App端和H5端支持v-html,其他端不支持v-html。

18.uni-app不需要 plus ready 在html中使用plus的api。

19.在普通的 H5+ 項目中,需要使用 document.addEventListener 監聽原生擴展的事件。uni-app 中,沒有 document。可以使用 plus.globalEvent.addEventListener 來實現。

20.App端若要使用操作window、document的庫,需要通過renderjs來實現。

21.tabbar 切換第一次加載時可能渲染不及時,可以在每個tabbar頁面的onLoad生命週期裏先彈出一個等待雪花。

22.tabbar 的頁面展現過一次後就保留在內存中,再次切換 tabbar 頁面,只會觸發每個頁面的onShow,不會再觸發onLoad。

23.分包加載配置,subPackages 爲小程序的分包加載機制。在App裏始終爲整包。subPackages 裏的pages的路徑是 root 下的相對路徑,不是全路徑。

24.splash(啓動封面)是App必然存在的、不可取消的。splash只能是標準png,不要用jpg改名爲png。

25.所有組件與屬性名都是小寫,單詞之間以連字符-連接。

26.APP-vue和小程序中,請勿在 scroll-view 中使用 map、video 等原生組件。小程序中 scroll-view 中也不要使用 canvas、textarea 原生組件。

27.scroll-view 不適合放長列表,有性能問題。長列表滾動和下拉刷新,應該使用原生導航欄搭配頁面級的滾動和下拉刷新實現。

28.除了文本節點以外的其他節點都無法長按選中。

 29.如需調節checkbox,radio大小,可通過css的scale方法調節,如縮小到70%style="transform:scale(0.7)"。

30.頁面結構複雜,css樣式太多的情況,使用 image 可能導致樣式生效較慢,出現 “閃一下” 的情況,此時設置 image{will-change: transform} ,可優化此問題。

31.自定義組件裏面使用 <image>時,若 src 使用相對路徑可能出現路徑查找失敗的情況,故建議使用絕對路徑。

32.App平臺:使用 <video/> 組件,打包 App 時必須勾選 manifest.json->App 模塊權限配置->VideoPlayer 模塊。

33.App平臺:如果使用的視頻路徑爲本地路徑,需要配置資源爲釋放模式:在 manifest.json 文件內 app-plus 節點下新增 runmode 配置,設置值爲liberate。

34.webview在App 平臺同時支持網絡網頁和本地網頁,但本地網頁及相關資源(js、css等文件)必須放在 uni-app 項目根目錄->hybrid->html 文件夾下;小程序僅支持加載網絡網頁,不支持本地html。

35.H5端onBackPress只能監聽頁面導航欄的返回按鈕的點擊事件,不能監聽瀏覽器返回以及手機的返回。

36.發出請求的method的值必須大寫,有效值在不同平臺差異說明不同。

37.localhost、127.0.0.1等服務器地址,只能在電腦端運行,手機端連接時不能訪問。請使用標準IP並保證手機能連接電腦網絡。

38.App支持多文件上傳,微信小程序只支持單文件上傳,傳多個文件需要反覆調用本API。所以跨端的寫法就是循環調用本API。

39.如果想打開web url,在App平臺可以使用 plus.runtime.openURL或web-view組件;H5平臺使用 window.open;小程序平臺使用web-view組件(url需在小程序的聯網白名單中)。

40.navigateToredirectTo 只能打開非 tabBar 頁面,switchTab 只能打開 tabBar 頁面.

41.H5端頁面刷新之後頁面棧會消失,此時navigateBack不能返回,如果一定要返回可以使用history.back()導航到瀏覽器的其他歷史記錄.

42.App端如需選擇非媒體文件,可在插件市場搜索文件選擇,其中Android端可以使用Native.js,無需原生插件,而iOS端需要原生插件。

43.關於一些權限的使用,類似相機,語音,都要先判斷一下設備的訪問權限是否開啓。

44.屏幕高度=狀態欄高度+原生導航欄高度+可使用窗口高度+原生tabbar高度。

45.分享到 QQ 必須含有 href 鏈接,分享文字到 QQ 時,title 必選,不能直接分享到QQ空間,可以分享到QQ,然後在QQ的界面裏選擇QQ空間。

46.從APP分享到微信時,無法判斷用戶是否點擊取消分享,因爲微信官方禁掉了分享成功的返回值。

47.支付的傳參要注意orderInfo在不同的環境下傳參類型不一致。

48.關於文本超出展示...,需要在超出展示盒子的內部在內嵌一層子元素,否則app端會有問題。

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