貓寧一 ·uni-app 混合開(kāi)發(fā)
1. 前言
uni-app 混合開(kāi)發(fā)是我們學(xué)習(xí) uni-app 框架時(shí)候的難點(diǎn)，有些功能僅僅使用 uni-app 框架是實(shí)現(xiàn)不了的，比如：自定義掃碼頁(yè)面、自定義地圖等。
雖然 uni-app 框架中自帶了這些功能，但是自帶的功能（比如 API自帶的掃碼界面）沒(méi)辦法有效的自定義，這時(shí)就需要用到 App 的原生控件來(lái)進(jìn)行組合開(kāi)發(fā)，這個(gè)開(kāi)發(fā)形式就是 uni-app 混合開(kāi)發(fā)。
當(dāng)然混合開(kāi)發(fā)的含義不僅僅是這些，我們?cè)谙旅鏁?huì)給大家詳細(xì)講到。
2. 原生開(kāi)發(fā)與混合開(kāi)發(fā)
在學(xué)習(xí)混合開(kāi)發(fā)之前，我們先來(lái)了解一下混合開(kāi)發(fā)的含義，幫助大家更好的理解。
2.1 什么的原生開(kāi)發(fā)？什么是混合開(kāi)發(fā)？
2.1.1 原生開(kāi)發(fā)
原生開(kāi)發(fā)一般是指用原生語(yǔ)言進(jìn)行開(kāi)發(fā)，原生開(kāi)發(fā)語(yǔ)言就是官方提供的開(kāi)發(fā)語(yǔ)言，比如 IOS 是利用 Objective-C 和 Xcode 進(jìn)行開(kāi)發(fā)、小程序是用微信小程序原生語(yǔ)言和微信開(kāi)發(fā)者工具進(jìn)行開(kāi)發(fā)。
2.1.2 混合開(kāi)發(fā)
混合開(kāi)發(fā)是指開(kāi)發(fā)一個(gè)項(xiàng)目應(yīng)用時(shí)，為了提高運(yùn)行效率或者開(kāi)發(fā)效率，將各種開(kāi)發(fā)技術(shù)進(jìn)行混合應(yīng)用的開(kāi)發(fā)形式。
混合開(kāi)發(fā)將各種開(kāi)發(fā)方式取長(zhǎng)補(bǔ)短，雖然比原生開(kāi)發(fā)更難上手，但是架不住開(kāi)發(fā)效率和運(yùn)行效率的優(yōu)勢(shì)，現(xiàn)在比較大型的應(yīng)用項(xiàng)目都會(huì)用混合開(kāi)發(fā)來(lái)進(jìn)行項(xiàng)目開(kāi)發(fā)。
uni-app 的混合開(kāi)發(fā)主要是為了實(shí)現(xiàn)一些 uni-app 框架無(wú)法實(shí)現(xiàn)的功能，或者擴(kuò)展接入一些第三方的 SDK。
2.2 原生開(kāi)發(fā)與混合開(kāi)發(fā)的優(yōu)缺點(diǎn)
2.2.1 原生開(kāi)發(fā)優(yōu)缺點(diǎn)
有過(guò)開(kāi)發(fā)經(jīng)驗(yàn)的小伙伴看到版本問(wèn)題應(yīng)該非常感同深受吧，經(jīng)常會(huì)冷不丁的出現(xiàn)版本不兼容的問(wèn)題。只要出現(xiàn)版本問(wèn)題，重新布置開(kāi)發(fā)環(huán)境是常有的事情。
而原生開(kāi)發(fā)受到版本問(wèn)題限制會(huì)比較小，官方的代碼和開(kāi)發(fā)工具都是定時(shí)更新，兼容性、安全性、維護(hù)性也會(huì)更高一些。
而原生開(kāi)發(fā)普遍存在著開(kāi)發(fā)時(shí)間長(zhǎng)、效率低、成本高的問(wèn)題。相比 uni-app，適用性也比較差，一款原生的 App，不同平臺(tái)上面發(fā)布同樣的項(xiàng)目，需要開(kāi)發(fā)幾套不同的代碼，這樣對(duì)我們開(kāi)發(fā)的限制也很大。
2.2.2 混合開(kāi)發(fā)優(yōu)缺點(diǎn)
采用混合開(kāi)發(fā)，我們可以采取各開(kāi)發(fā)技術(shù)的優(yōu)點(diǎn)，取長(zhǎng)補(bǔ)短，可以提高代碼的運(yùn)行效率，功能擴(kuò)展性上也會(huì)更好一些。
混合開(kāi)發(fā)是缺點(diǎn)就是對(duì)開(kāi)發(fā)人員技術(shù)要求比較高，需要花更多時(shí)間熟悉。并且因?yàn)樯婕暗蕉喾N開(kāi)發(fā)方式，維護(hù)會(huì)更加麻煩一些，版本兼容問(wèn)題也會(huì)比較多。
3. uni-app 和原生 App 混合開(kāi)發(fā)問(wèn)題
要使用 uni-app 和原生 App 進(jìn)行混合開(kāi)發(fā)之前，要先確認(rèn)要用 uni-app 還是原生 App 代碼作為主體。
3.1 主體采用 uni-app
如果我們主體采用 uni-app 進(jìn)行開(kāi)發(fā)，只是部分功能的實(shí)現(xiàn)使用原生開(kāi)發(fā)，這樣可以找一些原生項(xiàng)目的插件用來(lái)配合開(kāi)發(fā)。目前更多項(xiàng)目是使用原生插件擴(kuò)展的方式來(lái)進(jìn)行開(kāi)發(fā)的。
這樣代碼實(shí)現(xiàn)就不只是通過(guò) uniapp 框架來(lái)實(shí)現(xiàn)的了，而是通過(guò)原生 API 實(shí)現(xiàn)的，uniapp 只是負(fù)責(zé)調(diào)用一下。
這里需要注意的是，如果想要將項(xiàng)目離線打包，就不應(yīng)該使用原生 SDK，而應(yīng)該使用 App 離線 SDK。
App 離線打包 SDK，是把 App 運(yùn)行環(huán)境（runtime）封裝為原生開(kāi)發(fā)調(diào)用接口，開(kāi)發(fā)者可以在自己的 Android 及 iOS 原生開(kāi)發(fā)環(huán)境配置工程使用。參考資料：
https://nativesupport.dcloud.net.cn/AppDocs/README
接下來(lái)我們舉個(gè)自定義掃碼的例子，看看如何在 uni-app 中如何擴(kuò)展 5+ 的原生界面控件。在 uni-app 開(kāi)發(fā)中，平臺(tái)其實(shí)給我們提供的掃碼 API，但是并不能滿足我們所有掃碼的需求，比如想要自己自定義掃碼框的顏色。
實(shí)例：
// uni-app 中的掃碼功能直接調(diào)用 plus API就可以了，而擴(kuò)展5+的原生界面控件要等 plusready 后再調(diào)用 plus API。
var plusReady = function (callback) {
if (window.plus && window.plus.isReady) {
callback();
} else {
document.addEventListener('plusready', function () {
callback();
}, false);
}
};
//創(chuàng)建 Barcode 實(shí)例對(duì)象，可以自定義掃碼框的位置大小和顏色
var barcode = plus.barcode.create('barcode', options.types, options.styles);
3.2 主體采用原生 App 代碼
如果主體采用原生 App 代碼，只有部分功能需要通過(guò) uni-app 實(shí)現(xiàn)，這樣可以在原生 App 里集成 uni 小程序的 SDK，也就是原生 SDK。
uni 小程序 SDK，是為原生 App 打造的可運(yùn)行基于 uni-app 開(kāi)發(fā)的小程序前端項(xiàng)目的框架，從而幫助原生App快速獲取小程序的能力。參考資料:
https://nativesupport.dcloud.net.cn/README
主體采用原生 App 代碼，也可以直接跳轉(zhuǎn) uni-app 編譯為 H5 頁(yè)面。
4. uni-app 和原生小程序混合開(kāi)發(fā)
uni-app 和原生小程序混合開(kāi)發(fā)問(wèn)題 uni-app 官網(wǎng)已經(jīng)描述的很清楚了，我們直接查看官網(wǎng)資料就可以。
5. 小結(jié)
混合開(kāi)發(fā)在我們學(xué)習(xí)初期一般是接觸不到的，但是要進(jìn)階開(kāi)發(fā)大型項(xiàng)目基本是逃不過(guò)的，所以混合開(kāi)發(fā)的內(nèi)容還是需要我們來(lái)仔細(xì)了解并掌握。本小節(jié)需要我們掌握的重點(diǎn)如下：
- 了解什么是混合開(kāi)發(fā)，以及混合開(kāi)發(fā)相對(duì)原生開(kāi)發(fā)的優(yōu)缺點(diǎn)；
- 掌握uni-app 和原生 App 混合開(kāi)發(fā)問(wèn)題；
- 掌握uni-app 和原生小程序混合開(kāi)發(fā)。
2025 imooc.com All Rights Reserved |