前言

hello world歡迎來到前端的新世界

---

😜當前文章系列專欄：uniapp
🐱?👓博主在前端領域還有很多知識和技術需要掌握，正在不斷努力填補技術短板。(如果出現錯誤，感謝大家指出)🌹
💖感謝大家支持！您的觀看就是作者創作的動力

H5正常但App異常的可能性

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

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

• webview瀏覽器兼容性

vue頁面在App端，默認是被系統的webview渲染的（不是手機自帶瀏覽器，是rom的webview），在較老的手機上，比如Android4.4、5.0或iOS8，很多css是不支持的，所以不要使用太新的css，會導致界面異常。

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

可以找Android4.4手機或使用pc模擬器實際測試下，大多數國產Android模擬器都是4.4或5.0。

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

小程序不存在瀏覽器兼容問題，它自帶了一個很大的Webview。所以如果你的H5和小程序界面正常，而Android低端機App界面異常，且App沒有使用x5引擎，那基本就可以判定是因為css兼容性。

app端nvue頁面，不存在瀏覽器兼容問題，它自帶一個統一的原生渲染引擎，不依賴webview。

Android4.4對應的webview是chrome37。各端瀏覽器內核的詳情查閱，參考：關于手機webview內核、默認瀏覽器、各家小程序的渲染層瀏覽器的區別和兼容性

• 原生組件層級問題 H5沒有原生組件概念問題，非H5端有原生組件并引發了原生組件層級高于前端組件的概念，要遮擋video、map等原生組件，請使用cover-view組件。
• 使用了非H5端不支持的API 小程序和App的js運行在jscore下而不是瀏覽器里，沒有瀏覽器專用的js對象，比如document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl等對象。
  如果你的代碼沒有直接使用這些，那很可能是引入的三方庫使用了這些。如果是后者，去插件市場搜索替代方案。要知道非H5端的js是運行在一個獨立的js core或v8下，并不是運行在瀏覽器里。

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

1. 使用了非H5端不支持的vue語法，受小程序自定義組件限制的寫法，詳見
2. 不要在引用組件的地方在組件屬性上直接寫 style=“xx”，要在組件內部寫樣式
3. url(//alicdn.net)等路徑，改為url(https://alicdn.net)，因為在App端//是file協議
4. 很多人在H5端聯網時使用本地測試服務地址(localhost或127.0.0.1)，這樣的聯網地址手機App端是無法訪問的，請使用手機可訪問的IP進行聯網

標題二

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

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

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

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

小程序不存在瀏覽器兼容問題，它內置了幾十M自己的定制webview。所以如果你的H5和小程序界面正常，而App界面異常，大多是因為css兼容性。

解決這類問題：

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

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

1. 在 uni-app 2.4.7 以前，H5端不支持微信小程序自定義組件，即wxcomponets下的組件，此時可能產生兼容問題。從 2.4.7 起，H5也支持微信自定義組件，不再存在這這方面兼容問題。
2. App端使用了App特有的API和功能，比如plus、Native.js、subNVue、原生插件等
3. 使用了小程序專用的功能，比如微信卡卷、小程序插件、微信小程序云開發。對于云開發，建議使用可跨端的uniCloud。

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

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

使用 Vue.js 的注意

1. uni-app 基于Vue 2.0實現，開發者需注意Vue 1.0 -> 2.0 的使用差異，詳見從 Vue 1.x 遷移
2. data 屬性必須聲明為返回一個初始數據對象的函數；否則頁面關閉時，數據不會自動銷毀，再次打開該頁面時，會顯示上次數據 //正確用法，使用函數返回對象 data() { return { title: ‘Hello’ } } //錯誤寫法，會導致再次打開頁面時，顯示上次數據 data: { title: ‘Hello’ }
3. 在微信小程序端，uni-app 將數據綁定功能委托給Vue，開發者需按Vue 2.0的寫法實現數據綁定，不支持微信小程序的數據綁定寫法，故如下寫法不支持： 需修改為：

區別于傳統 web 開發的注意

你之前可能習慣自由的web開發，但目前各家小程序都有很多限制。 當然限制是為了在框架層更好的優化用戶體驗，所以小程序的體驗要優于web。 并且這些限制只是寫法的限制，并不影響功能。 如果你做過微信小程序開發，對這些限制應該已經很了解了。如果沒有做過小程序，請仔細閱讀本節。

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

H5 開發注意

H5 發布到服務器注意：配置發行后的路徑（發行在網站根目錄可不配置），比如發行網站路徑是 www.xxx.com/html5，在 manifest.json 文件內編輯 h5 節點，router 下增加 base 屬性為 html5

點擊菜單 發行-> H5在當下項目下的 unpackage/dist/build/h5 目錄找到出的資源，部署服務器（或者使用本地服務器預覽）

• 引用第三方 js 的方式：通過 npm 引入（通過條件編譯，只有是 h5 平臺才 import 相應的庫）在 manifest.json 文件編輯 h5 節點的 template 屬性，填寫 html 模版路徑，在 html 模版里面可以使用 script 的方式引入三方的 js，如下示例是加了百度統計的 html 模板部分代碼，模版全部代碼可參考：自定義模板… Please enable JavaScript to continue.
  …
• H5 版 uni-app 全支持 vue 語法，所以可能造成部分寫法在 H5 端生效，在小程序或 App 端不生效。
• H5 校驗了更嚴格的 vue 語法，有些寫法不規范會報警，比如： data 后面寫對象會報警，必須寫 function；不能修改 props 的值；組件最外層 template 節點下不允許包含多個節點等。
• 編譯為 H5 版后生成的是單頁應用（SPA）。
• 如果遇到跨域造成js無法聯網，注意網絡請求（request、uploadFile、downloadFile等）在瀏覽器存在跨域限制，解決方案有詳見：https://ask.dcloud.net.cn/article/35267
• APP 和小程序的導航欄和 tabbar 均是原生控件，元素區域坐標是不包含原生導航欄和 tabbar 的；而 H5 里導航欄和 tabbar 是 div 模擬實現的，所以元素坐標會包含導航欄和tabbar的高度。為了優雅的解決多端高度定位問題，uni-app 新增了2個css變量：–window-top 和 --window-bottom，這代表了頁面的內容區域距離頂部和底部的距離。舉個實例，如果你想在原生tabbar 上方懸浮一個菜單，之前寫 bottom:0。這樣的寫法編譯到 h5 后，這個菜單會和 tabbar 重疊，位于屏幕底部。而改為使用 bottom:var(–window-bottom)，則不管在 app 下還是在h5下，這個菜單都是懸浮在 tabbar 上浮的。這就避免了寫條件編譯代碼。當然仍然也可以使用 H5 的條件編譯處理界面的不同。
• CSS 內使用 vh 單位的時候注意 100vh 包含導航欄，使用時需要減去導航欄和 tabBar 高度，部分瀏覽器還包含瀏覽器操作欄高度，使用時請注意。
• 正常支持 rpx，px 是真實物理像素。暫不支持通過設 manifest.json 的 “transformPx” : true，把 px 當動態單位使用。
• 使用羅盤、地理位置、加速計等相關接口需要使用 https 協議，本地預覽（localhost）可以使用 http 協議。
• PC 端 Chrome 瀏覽器模擬器設備測試的時候，獲取位置 API 需要連接谷歌服務器。
• 組件內（頁面除外）不支持 onLoad、onShow 等頁面生命周期。
• 為避免和內置組件沖突，自定義組件請加上前綴（但不能是 u 和 uni）。比如可使用的自定義組件名稱：my-view、m-input、we-icon，例如不可使用的自定義組件名稱：u-view、uni-input，如果已有項目使用了可能造成沖突的名稱，請修改名稱，另外微信小程序下自定義組件名稱不能以 wx 開頭。

微信小程序開發注意

微信小程序當前bug列表
微信小程序更新日志

支付寶小程序開發注意

• 支付寶小程序更新日志
• 支付寶小程序開發工具：https://docs.alipay.com/mini/ide/download
• 目前無分包的配置，并且包體積限制在 3M。
• showLoading 是不透傳的，也就是說 loading 顯示的時候無法點擊頁面內容。
• 文件名或文件夾名中不允許出現 @ 符號。
• 網絡請求返回的數據會嚴格按照 dataType 進行處理，如果不符合規范則會拋出錯誤，而不是按照原格式返回。
• canvas 組件的標識是 id，而不是 canvas-id。目前還未進行處理，所以需要主動添加 id 屬性。
• 目前測試的結果，導航欄只有設置背景顏色為 #FFF(FFF) 時才會變成黑色文字。
• 支付寶小程序的導航欄是支持透明漸變效果的，后面會提供相關的配置。
• 使用偽元素做邊框時，高度值不能用 1rpx，需要直接用 1px。
• 不支持 ECharts。
• 支付功能模擬不了，需要真機測試。

百度小程序開發注意

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

各家小程序的瀏覽器內核不同，會造成css兼容性問題

iOS的webview有uiwebview和wkwebview的區別

從iOS8起，Apple推出了wkwebview，Safari默認使用wkwebview。
由于iOS13將uiwebview列入非公開api，并說明未來會禁止使用uiwebview的應用上架。所以從HBuilderX 2.2.5起，默認使用的是wkwebview，如果要切換為uiwebview，需要在manifest里或創建webview時的參數里指定kernel。
uni-app的app端視圖層固定使用wkwebview。這個和微信小程序的策略一樣，它在iOS上也是只能渲染在wkwebview下。
這兩種webview各有利弊。
wk的問題是：不支持websql（iOS8、9上不支持，iOS10恢復支持）、不支持plus.navigator.setCookie、不支持webview的overrideresource方法、不支持js原生加密、在聯網及本地文件讀取等有各種跨域限制、wk第一次渲染速度略慢于uiwebview；（uni-app的js本來也不運行在webview里，所以無所謂這些限制）
但wkwebview的好處是：節省內存、滾動時懶加載的圖片也可以實時渲染而uiwebview在滾動停止后懶加載的圖片才能顯示（滾動前就加載圖片不受影響）、wkwebview的video播放支持AirPlay（uni-app的video組件是原生的，暫不支持ariplay）。
如果同時在一個app里使用ui和wk兩種webview，注意2種webview之間的cookie、localstorage、session不共享，但plus.storage是共享的。

各小程序平臺的webview內核說明

• 各家小程序，在iOS上大多使用的是wkwebview內核，已知僅百度小程序是uiwebview。wkwebview是iOS的一部分，其版本根據iOS版本的不同而不同。可以在caniuse直接看到iOS版本對應的瀏覽器兼容問題。
• Android上各家小程序使用的是基于chromium改造的瀏覽器內核。具體如下：
  • 微信：老版微信使用的是x5，ua特征字符串有Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044903；后來微信團隊自研了MWEB內核，ua特征字符串有Chrome/67.0.3396.87 XWEB/882 MMWEBSDK/190506
  • 百度小程序：ua特征是Chrome/63.0.3239.83，并且包含baiduboxapp字符串
  • 支付寶小程序：根據支付寶版本，chrome有57和69等版本，ua特征字符串有NebulaSDK
  • QQ小程序：根據QQ版本，chrome有66和68等版本，ua特征字符串有QQ/MiniApp
  • 頭條小程序：ua特征是Chrome/62，ua特征字符串有ToutiaoMicroApp

vendor.js過大的處理方式

小程序工具提示vendor.js過大，已經跳過es6向es5轉換。這個轉換問題本身不用理會，因為vendor.js已經是es5的了。

關于體積控制，參考如下：

• 使用運行時代碼壓縮HBuilderX創建的項目勾選運行–>運行到小程序模擬器–>運行時是否壓縮代碼cli創建的項目可以在pacakge.json中添加參數–minimize，示例：“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize”
• 使用分包優化，關于分包優化的說明

后言

創作不易，要是本文章對廣大讀者有那么一點點幫助 不妨三連支持一下，您的鼓勵就是博主創作的動力