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