什么是plus?
以plus開頭的方法都是屬於HTML5+環境調用的方法。
plus不能在瀏覽器環境下使用,它必須在手機APP上才能使用,因為以安卓為例,他是操縱webview的API。在5+中,我們在使用plus之前要監聽HTML5+環境是否已經加載完畢,而在uniapp中,則可以直接調用,可以參看uni-app使用plus注意事項。
什么是webview?
WebView是android中一個非常重要的控件,它的作用是用來展示一個web頁面。它使用的內核是webkit引擎,4.4版本之后,直接使用chrome作為內置網頁瀏覽器。它的作用是顯示和渲染頁面,可與頁面JavaScript加護,實現混合開發。
什么是HTML5+?
HTML5+是中國HTML5產業聯盟的擴展規范,基於HTML5擴展了大量調用設備的能力,使得web語言可以像原生語言一樣強大。
uni-app
App 端內置 HTML5+ 引擎,讓 js 可以直接調用豐富的原生能力。
條件編譯調用 HTML5+
小程序及 H5 等平台是沒有 HTML5+ 擴展規范的,因此在 uni-app
調用 HTML5+ 的擴展規范時,需要注意使用條件編譯。否則運行到h5、小程序等平台會出現 plus is not defined
錯誤。
// #ifdef APP-PLUS var appid = plus.runtime.appid; console.log('應用的 appid 為:' + appid); // #endif
uni-app
不需要 plus ready
在html中使用plus的api,需要等待plus ready。 而uni-app
不需要等,可以直接使用。而且如果你調用plus ready,反而不會觸發。
uni-app
中的事件監聽
在普通的 H5+ 項目中,需要使用 document.addEventListener
監聽原生擴展的事件。
uni-app
中,沒有 document。可以使用 plus.globalEvent.addEventListener
來實現(注意manifest中需開啟新編譯器,即自定義組件模式"usingComponents":true)。
// #ifdef APP-PLUS // 監聽設備網絡狀態變化事件 plus.globalEvent.addEventListener('netchange', function(){}); // #endif
同理,在 uni-app
中使用 Native.js 時,一些 Native.js 中對於原生事件的監聽同樣需要按照上面的方法去實現。
注意:舊編譯器(非自定義組件模式)不支持 plus.globalEvent
這個對象。
跨端兼容
uni-app 已將常用的組件、JS API 封裝到框架中,開發者按照 uni-app 規范開發即可保證多平台兼容,大部分業務均可直接滿足。
但每個平台有自己的一些特性,因此會存在一些無法跨平台的情況。
- 大量寫 if else,會造成代碼執行性能低下和管理混亂。
- 編譯到不同的工程后二次修改,會讓后續升級變的很麻煩。
在 C 語言中,通過 #ifdef、#ifndef 的方式,為 windows、mac 等不同 os 編譯不同的代碼。 uni-app
參考這個思路,為 uni-app
提供了條件編譯手段,在一個工程里優雅的完成了平台個性化實現。
條件編譯
條件編譯是用特殊的注釋作為標記,在編譯時根據這些特殊的注釋,將注釋里面的代碼編譯到不同平台。
寫法:以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭,以 #endif 結尾。
- #ifdef:if defined 僅在某平台存在
- #ifndef:if not defined 除了某平台均存在
- %PLATFORM%:平台名稱
條件編譯寫法 | 說明 |
---|---|
#ifdef APP-PLUS 需條件編譯的代碼 #endif |
僅出現在 App 平台下的代碼 |
#ifndef H5 需條件編譯的代碼 #endif |
除了 H5 平台,其它平台均存在的代碼 |
#ifdef H5 || MP-WEIXIN 需條件編譯的代碼 #endif |
在 H5 平台或微信小程序平台存在的代碼(這里只有||,不可能出現&&,因為沒有交集) |
%PLATFORM% 可取值如下:
值 | 平台 |
---|---|
APP-PLUS | App |
APP-PLUS-NVUE或APP-NVUE | App nvue |
H5 | H5 |
MP-WEIXIN | 微信小程序 |
MP-ALIPAY | 支付寶小程序 |
MP-BAIDU | 百度小程序 |
MP-TOUTIAO | 字節跳動小程序 |
MP-QQ | QQ小程序 |
MP-360 | 360小程序 |
MP | 微信小程序/支付寶小程序/百度小程序/字節跳動小程序/QQ小程序/360小程序 |
QUICKAPP-WEBVIEW | 快應用通用(包含聯盟、華為) |
QUICKAPP-WEBVIEW-UNION | 快應用聯盟 |
QUICKAPP-WEBVIEW-HUAWEI | 快應用華為 |
注意
- Android 和 iOS 平台不支持通過條件編譯來區分,如果需要區分 Android、iOS 平台,請通過調用 uni.getSystemInfo 來獲取平台信息。支持
ifios
、ifAndroid
代碼塊,可方便編寫判斷。