一個文檔中的注意事項,往往是發生問題的原因,這里整合了我認為容易發生的錯誤(為了方便我搜索問題)
1.static
目錄下的 js
文件不會被編譯,如果里面有 es6
的代碼,不經過轉換直接運行,在手機設備上會報錯。
2.css
、less/scss
等資源同樣不要放在 static
目錄下,建議這些公用的資源放在 common
目錄下。
3.template
內引入靜態資源,如image
、video
等標簽的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.navigateTo
, redirectTo
只能打開非 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端會有問題。