uni-app 跨端開發(fā)注意事項(xiàng)

H5正常但App異常的可能性

1. css異常：
2. 不支持的選擇器 非H5端不支持*選擇器；

body的元素選擇器請(qǐng)改為page，同樣，div和ul和li等改為view、span和font改為text、a改為navigator、img改為image...

• webview瀏覽器兼容性

vue頁(yè)面在App端，默認(rèn)是被系統(tǒng)的webview渲染的（不是手機(jī)自帶瀏覽器，是rom的webview），在較老的手機(jī)上，比如Android4.4、5.0或iOS8，很多css是不支持的，所以不要使用太新的css，會(huì)導(dǎo)致界面異常。

注意這不意味著不能使用flex，Android4.4也支持flex，只是不要使用太新的css。

可以找Android4.4手機(jī)或使用pc模擬器實(shí)際測(cè)試下，大多數(shù)國(guó)產(chǎn)Android模擬器都是4.4或5.0。

從 uni-app 2.5.3 起，Android端支持引入騰訊x5瀏覽器內(nèi)核，可以抹平低端Android的瀏覽器兼容性問(wèn)題，詳見(jiàn)x5使用指南

小程序不存在瀏覽器兼容問(wèn)題，它自帶了一個(gè)很大的Webview。所以如果你的H5和小程序界面正常，而Android低端機(jī)App界面異常，且App沒(méi)有使用x5引擎，那基本就可以判定是因?yàn)閏ss兼容性。

app端nvue頁(yè)面，不存在瀏覽器兼容問(wèn)題，它自帶一個(gè)統(tǒng)一的原生渲染引擎，不依賴webview。

Android4.4對(duì)應(yīng)的webview是chrome37。各端瀏覽器內(nèi)核的詳情查閱，參考：關(guān)于手機(jī)webview內(nèi)核、默認(rèn)瀏覽器、各家小程序的渲染層瀏覽器的區(qū)別和兼容性

• 原生組件層級(jí)問(wèn)題 H5沒(méi)有原生組件概念問(wèn)題，非H5端有原生組件并引發(fā)了原生組件層級(jí)高于前端組件的概念，要遮擋video、map等原生組件，請(qǐng)使用cover-view組件。
• 使用了非H5端不支持的API 小程序和App的js運(yùn)行在jscore下而不是瀏覽器里，沒(méi)有瀏覽器專用的js對(duì)象，比如document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl等對(duì)象。

如果你的代碼沒(méi)有直接使用這些，那很可能是引入的三方庫(kù)使用了這些。如果是后者，去插件市場(chǎng)搜索替代方案。要知道非H5端的js是運(yùn)行在一個(gè)獨(dú)立的js core或v8下，并不是運(yùn)行在瀏覽器里。

從HBuilderX 2.6起，App端新增了renderjs，這是一種運(yùn)行在視圖層的js，vue頁(yè)面通過(guò)renderjs可以操作瀏覽器對(duì)象，進(jìn)而可以讓基于瀏覽器的庫(kù)直接在uni-app的App端運(yùn)行，諸如echart、threejs，詳見(jiàn)：https://uniapp.dcloud.io/frame?id=renderjs

1. 使用了非H5端不支持的vue語(yǔ)法，受小程序自定義組件限制的寫法，詳見(jiàn)
2. 不要在引用組件的地方在組件屬性上直接寫 style="xx"，要在組件內(nèi)部寫樣式
3. url(//alicdn.net)等路徑，改為url(https://alicdn.net)，因?yàn)樵贏pp端//是file協(xié)議
4. 很多人在H5端聯(lián)網(wǎng)時(shí)使用本地測(cè)試服務(wù)地址(localhost或127.0.0.1)，這樣的聯(lián)網(wǎng)地址手機(jī)App端是無(wú)法訪問(wèn)的，請(qǐng)使用手機(jī)可訪問(wèn)的IP進(jìn)行聯(lián)網(wǎng)

H5正常但小程序異常的可能性

1. 同上
2. v-html在h5和app-vue(v3編譯模式)均支持，但小程序不支持
3. 小程序要求連接的網(wǎng)址都要配白名單

小程序正常但App異常的可能性

vue頁(yè)面在App端的渲染引擎默認(rèn)是系統(tǒng)webview（不是手機(jī)自帶瀏覽器，是rom的webview），在較老的手機(jī)上，比如Android4.4、5.0或iOS8，一些新出的css語(yǔ)法是不支持的。注意這不意味著不能使用flex，Android4.4也支持flex，只是不要使用太新的css。可以找Android4.4手機(jī)或使用pc模擬器實(shí)際測(cè)試下，大多數(shù)國(guó)產(chǎn)Android模擬器都是4.4或5.0。

小程序不存在瀏覽器兼容問(wèn)題，它內(nèi)置了幾十M自己的定制webview。所以如果你的H5和小程序界面正常，而App界面異常，大多是因?yàn)閏ss兼容性。

解決這類問(wèn)題：

1. 放棄老款手機(jī)支持
2. 不用使用太新的css語(yǔ)法，可以在caniuse查詢
3. 從 uni-app 2.5.3 起，Android端支持引入騰訊x5瀏覽器內(nèi)核，可以抹平低端Android的瀏覽器兼容性問(wèn)題，詳見(jiàn)x5使用指南

小程序或App正常，但H5異常的可能性

1. 在 uni-app 2.4.7 以前，H5端不支持微信小程序自定義組件，即wxcomponets下的組件，此時(shí)可能產(chǎn)生兼容問(wèn)題。從 2.4.7 起，H5也支持微信自定義組件，不再存在這這方面兼容問(wèn)題。
2. App端使用了App特有的API和功能，比如plus、Native.js、subNVue、原生插件等
3. 使用了小程序?qū)Ｓ玫墓δ?，比如微信卡卷、小程序插件、微信小程序云開發(fā)。對(duì)于云開發(fā)，建議使用可跨端的uniCloud。

App正常，小程序、H5異常的可能性

1. 代碼中使用了App端特有的plus、Native.js、subNVue、原生插件等功能

使用 Vue.js 的注意

1. uni-app 基于Vue 2.0實(shí)現(xiàn)，開發(fā)者需注意Vue 1.0 -> 2.0 的使用差異，詳見(jiàn)從 Vue 1.x 遷移
2. data 屬性必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)；否則頁(yè)面關(guān)閉時(shí)，數(shù)據(jù)不會(huì)自動(dòng)銷毀，再次打開該頁(yè)面時(shí)，會(huì)顯示上次數(shù)據(jù) //正確用法，使用函數(shù)返回對(duì)象 data() { return { title: 'Hello' } } //錯(cuò)誤寫法，會(huì)導(dǎo)致再次打開頁(yè)面時(shí)，顯示上次數(shù)據(jù) data: { title: 'Hello' }
3. 在微信小程序端，uni-app 將數(shù)據(jù)綁定功能委托給Vue，開發(fā)者需按Vue 2.0的寫法實(shí)現(xiàn)數(shù)據(jù)綁定，不支持微信小程序的數(shù)據(jù)綁定寫法，故如下寫法不支持： <view id="item-{{id}}"></view>需修改為： <view v-bind:id="'item-' + id "></view>

區(qū)別于傳統(tǒng) web 開發(fā)的注意

你之前可能習(xí)慣自由的web開發(fā)，但目前各家小程序都有很多限制。 當(dāng)然限制是為了在框架層更好的優(yōu)化用戶體驗(yàn)，所以小程序的體驗(yàn)要優(yōu)于web。 并且這些限制只是寫法的限制，并不影響功能。 如果你做過(guò)微信小程序開發(fā)，對(duì)這些限制應(yīng)該已經(jīng)很了解了。如果沒(méi)有做過(guò)小程序，請(qǐng)仔細(xì)閱讀本節(jié)。

1. JS注意非H5端，不能使用瀏覽器自帶對(duì)象，比如document、window、localstorage、cookie等，更不能使用jquery等依賴這些瀏覽器對(duì)象的框架。因?yàn)楦骷倚〕绦蚩鞈?yīng)用都不支持這些對(duì)象。沒(méi)有這些瀏覽器自帶對(duì)象并不影響業(yè)務(wù)開發(fā)，uni提供的api足夠完成業(yè)務(wù)。uni的api在編譯到web平臺(tái)運(yùn)行時(shí)，其實(shí)也會(huì)轉(zhuǎn)為瀏覽器的js api。App端若要使用操作window、document的庫(kù)，需要通過(guò)renderjs來(lái)實(shí)現(xiàn)。uni的api是多端可用的。在條件編譯區(qū)，每個(gè)平臺(tái)的專有api也可以使用，比如wx.、plus.等api可以分別在微信下和app下使用。出于降低小程序向uni-app遷移成本的考慮，wx的api在app里也可以直接運(yùn)行，比如寫wx.requst和uni.requst是一樣的，但仍然建議僅在微信的條件編譯區(qū)使用wx的api。
2. Tag注意uni-app的tag同小程序的tag，和HTML的tag不一樣，比如div要改成view，span要改成text、a要改成navigator。出于降低h5應(yīng)用向uni-app遷移成本的考慮，寫成div、span也可以運(yùn)行在app和小程序上，因?yàn)閡ni-app編譯器會(huì)把這些HTML標(biāo)簽編譯為小程序標(biāo)簽。但仍然建議養(yǎng)成新習(xí)慣。
3. Css注意雖然大部分css樣式在微信小程序和app中都可以支持，但推薦使用flex布局模型，這種布局更靈活高效且支持更多平臺(tái)(比如nvue、快應(yīng)用只支持flex布局)單位方面，uni-app默認(rèn)為rpx。這是一種可跨端的通用單位 詳見(jiàn)
4. 工程目錄注意每個(gè)要顯示的頁(yè)面，都要放到pages目錄下，新建一個(gè)頁(yè)面所在的目錄，然后放同名目錄的vue文件，比如project/pages/lista/lista.vue，并且在pages.json里配置。這與小程序的策略相同。自定義組件，放到component目錄靜態(tài)資源如圖片，固定放到static目錄下。這是webpack、mpvue的規(guī)則
5. 數(shù)據(jù)綁定方式的注意uni-app 基于Vue 2.0實(shí)現(xiàn)，開發(fā)者需注意Vue 1.0 -> 2.0 的使用差異，詳見(jiàn)從 Vue 1.x 遷移
6. 每個(gè)頁(yè)面支持使用原生title，首頁(yè)支持使用原生底部tab，這些是要在pages.json里配置，這些并不是vue頁(yè)面的一部分。當(dāng)然vue里的js api也可以動(dòng)態(tài)修改原生title
7. 雖然使用vue，但在app和小程序里，不是spa而是mpa
8. 位置坐標(biāo)系統(tǒng)一為國(guó)測(cè)局坐標(biāo)系gcj02，這種坐標(biāo)系可以被多端支持。老版5+的百度定位和百度地圖使用的是百度私有坐標(biāo)系bd09ll，這種坐標(biāo)系需要轉(zhuǎn)換。新版uni-app里的百度地圖已經(jīng)默認(rèn)改為gcj02。高德地圖不受影響，一直是gcj02

H5 開發(fā)注意

• H5 發(fā)布到服務(wù)器注意：配置發(fā)行后的路徑（發(fā)行在網(wǎng)站根目錄可不配置），比如發(fā)行網(wǎng)站路徑是 www.xxx.com/html5，在 manifest.json 文件內(nèi)編輯 h5 節(jié)點(diǎn)，router 下增加 base 屬性為 html5點(diǎn)擊菜單 發(fā)行-> H5在當(dāng)下項(xiàng)目下的 unpackage/dist/build/h5 目錄找到出的資源，部署服務(wù)器（或者使用本地服務(wù)器預(yù)覽）
• 引用第三方 js 的方式：通過(guò) npm 引入（通過(guò)條件編譯，只有是 h5 平臺(tái)才 import 相應(yīng)的庫(kù)）在 manifest.json 文件編輯 h5 節(jié)點(diǎn)的 template 屬性，填寫 html 模版路徑，在 html 模版里面可以使用 script 的方式引入三方的 js，如下示例是加了百度統(tǒng)計(jì)的 html 模板部分代碼，模版全部代碼可參考：自定義模板... <body> <noscript> <strong>Please enable JavaScript to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://#/hm.js?xxxxxx"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> ...
• H5 版 uni-app 全支持 vue 語(yǔ)法，所以可能造成部分寫法在 H5 端生效，在小程序或 App 端不生效。
• H5 校驗(yàn)了更嚴(yán)格的 vue 語(yǔ)法，有些寫法不規(guī)范會(huì)報(bào)警，比如： data 后面寫對(duì)象會(huì)報(bào)警，必須寫 function；不能修改 props 的值；組件最外層 template 節(jié)點(diǎn)下不允許包含多個(gè)節(jié)點(diǎn)等。
• 編譯為 H5 版后生成的是單頁(yè)應(yīng)用（SPA）。
• 如果遇到跨域造成js無(wú)法聯(lián)網(wǎng)，注意網(wǎng)絡(luò)請(qǐng)求（request、uploadFile、downloadFile等）在瀏覽器存在跨域限制，解決方案有詳見(jiàn)：https://ask.dcloud.net.cn/article/35267
• APP 和小程序的導(dǎo)航欄和 tabbar 均是原生控件，元素區(qū)域坐標(biāo)是不包含原生導(dǎo)航欄和 tabbar 的；而 H5 里導(dǎo)航欄和 tabbar 是 div 模擬實(shí)現(xiàn)的，所以元素坐標(biāo)會(huì)包含導(dǎo)航欄和tabbar的高度。為了優(yōu)雅的解決多端高度定位問(wèn)題，uni-app 新增了2個(gè)css變量：--window-top 和 --window-bottom，這代表了頁(yè)面的內(nèi)容區(qū)域距離頂部和底部的距離。舉個(gè)實(shí)例，如果你想在原生tabbar 上方懸浮一個(gè)菜單，之前寫 bottom:0。這樣的寫法編譯到 h5 后，這個(gè)菜單會(huì)和 tabbar 重疊，位于屏幕底部。而改為使用 bottom:var(--window-bottom)，則不管在 app 下還是在h5下，這個(gè)菜單都是懸浮在 tabbar 上浮的。這就避免了寫條件編譯代碼。當(dāng)然仍然也可以使用 H5 的條件編譯處理界面的不同。
• CSS 內(nèi)使用 vh 單位的時(shí)候注意 100vh 包含導(dǎo)航欄，使用時(shí)需要減去導(dǎo)航欄和 tabBar 高度，部分瀏覽器還包含瀏覽器操作欄高度，使用時(shí)請(qǐng)注意。
• 正常支持 rpx，px 是真實(shí)物理像素。暫不支持通過(guò)設(shè) manifest.json 的 "transformPx" : true，把 px 當(dāng)動(dòng)態(tài)單位使用。
• 使用羅盤、地理位置、加速計(jì)等相關(guān)接口需要使用 https 協(xié)議，本地預(yù)覽（localhost）可以使用 http 協(xié)議。
• PC 端 Chrome 瀏覽器模擬器設(shè)備測(cè)試的時(shí)候，獲取位置 API 需要連接谷歌服務(wù)器。
• 組件內(nèi)（頁(yè)面除外）不支持 onLoad、onShow 等頁(yè)面生命周期。
• 為避免和內(nèi)置組件沖突，自定義組件請(qǐng)加上前綴（但不能是 u 和 uni）。比如可使用的自定義組件名稱：my-view、m-input、we-icon，例如不可使用的自定義組件名稱：u-view、uni-input，如果已有項(xiàng)目使用了可能造成沖突的名稱，請(qǐng)修改名稱，另外微信小程序下自定義組件名稱不能以 wx 開頭。

微信小程序開發(fā)注意

• 微信小程序當(dāng)前bug列表
• 微信小程序更新日志

支付寶小程序開發(fā)注意

• 支付寶小程序更新日志
• 支付寶小程序開發(fā)工具：https://docs.alipay.com/mini/ide/download
• 目前無(wú)分包的配置，并且包體積限制在 3M。
• showLoading 是不透?jìng)鞯模簿褪钦f(shuō) loading 顯示的時(shí)候無(wú)法點(diǎn)擊頁(yè)面內(nèi)容。
• 文件名或文件夾名中不允許出現(xiàn) @ 符號(hào)。
• 網(wǎng)絡(luò)請(qǐng)求返回的數(shù)據(jù)會(huì)嚴(yán)格按照 dataType 進(jìn)行處理，如果不符合規(guī)范則會(huì)拋出錯(cuò)誤，而不是按照原格式返回。
• canvas 組件的標(biāo)識(shí)是 id，而不是 canvas-id。目前還未進(jìn)行處理，所以需要主動(dòng)添加 id 屬性。
• 目前測(cè)試的結(jié)果，導(dǎo)航欄只有設(shè)置背景顏色為 #FFF(FFF) 時(shí)才會(huì)變成黑色文字。
• 支付寶小程序的導(dǎo)航欄是支持透明漸變效果的，后面會(huì)提供相關(guān)的配置。
• 使用偽元素做邊框時(shí)，高度值不能用 1rpx，需要直接用 1px。
• 不支持 ECharts。
• 支付功能模擬不了，需要真機(jī)測(cè)試。

百度小程序開發(fā)注意

• 百度小程序更新日志
• 百度小程序開發(fā)工具：https://smartprogram.baidu.com/docs/introduction/tool/。
• 不支持屬性選擇器。
• 不支持 scoped。
• login / getUserInfo /支付等功能在模擬器（開發(fā)工具）上不能模擬。
• map 組件在開發(fā)工具上預(yù)覽效果不對(duì)，但是手機(jī)上是對(duì)的。
• getSystemInfo 獲取到的 windowHeight 在模擬器中值不正確，真機(jī)預(yù)覽是正確的。
• v-if 和 v-for 不可在同一標(biāo)簽下同時(shí)使用。
• 頁(yè)面中引入自定義組件時(shí)，渲染的結(jié)果中外層會(huì)有一個(gè) template 標(biāo)簽，這會(huì)導(dǎo)致部分選擇器對(duì)應(yīng)的樣式匹配不上。

各家小程序的瀏覽器內(nèi)核不同，會(huì)造成css兼容性問(wèn)題

查閱細(xì)節(jié)參考：https://ask.dcloud.net.cn/article/1318

vendor.js過(guò)大的處理方式

小程序工具提示vendor.js過(guò)大，已經(jīng)跳過(guò)es6向es5轉(zhuǎn)換。這個(gè)轉(zhuǎn)換問(wèn)題本身不用理會(huì)，因?yàn)関endor.js已經(jīng)是es5的了。

關(guān)于體積控制，參考如下：

• 使用運(yùn)行時(shí)代碼壓縮HBuilderX創(chuàng)建的項(xiàng)目勾選運(yùn)行-->運(yùn)行到小程序模擬器-->運(yùn)行時(shí)是否壓縮代碼cli創(chuàng)建的項(xiàng)目可以在pacakge.json中添加參數(shù)--minimize，示例："dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
• 使用分包優(yōu)化，關(guān)于分包優(yōu)化的說(shuō)明