最近有一個(gè)需求，就是之前的 native SDK 需要支持 uni-app 接入，從本篇開(kāi)始，寫(xiě)一套如何開(kāi)發(fā) uni-app 原生插件的教程。
寫(xiě)在前面
最近有一個(gè)需求，就是純?cè)?OCR SDK 需要支持 uni-app 接入，由于 uni-app 是一個(gè)純面向前端開(kāi)發(fā)的框架，屏蔽了和原生開(kāi)發(fā)相關(guān)的細(xì)節(jié)。對(duì) SDK 開(kāi)發(fā)者來(lái)說(shuō)，需要將原生 SDK 制作成一個(gè) uni-app 的插件，放在插件市場(chǎng)，開(kāi)發(fā)者接入的時(shí)候直接按照 uni-app 插件接入規(guī)則接入即可。
本教程記錄制作插件制作過(guò)程。
什么是 uni-app
可以從以下幾個(gè)材料去了解什么是 uni-app：
- uni-app選型評(píng)估23問(wèn)，官方 diss 一波友軍
這個(gè)框架是面向前端開(kāi)發(fā)者的，展示了前端開(kāi)發(fā)者一統(tǒng)江湖的雄心，金戈鐵馬，氣吞萬(wàn)里如虎。
官網(wǎng)首頁(yè)，向我們展示了一波，一套代碼，是如何運(yùn)行到 9 個(gè)平臺(tái)上的。
在一個(gè)面向前端的框架中，iOS 開(kāi)發(fā)扮演著哪些角色？
下面貼了一張 uni-app 功能框架圖，左下角紅色框選中的內(nèi)容，表示和終端相關(guān)的東西。
我們梳理一下紅色框中的各項(xiàng)內(nèi)容。
weex 之于 uni-app
uni-app App端內(nèi)置 weex 渲染引擎，提供了原生渲染能力，nvue 相當(dāng)于給 weex 補(bǔ)充了大量 uni-app 的組件和 API，以及豐富的 Plus API、Native.js、原生插件。
html5plus / HTML5 Plus
HTML5+ 是運(yùn)行于手機(jī)端的強(qiáng)化 web 引擎，除了支持標(biāo)準(zhǔn) HTML5 外，還支持更多擴(kuò)展的 js api。
uni-app App 端內(nèi)置 HTML5+ 引擎，讓 js 可以直接調(diào)用豐富的原生能力，具體有哪些能力詳細(xì)可以參考 html5plus 中國(guó)產(chǎn)業(yè)聯(lián)盟 頁(yè)面。
這意味著什么？我們以獲取設(shè)備陀螺儀數(shù)據(jù)為例，有了 HTML5+ 引擎，我們可以直接通過(guò) js 接口獲取相關(guān)數(shù)據(jù)，不用編寫(xiě) native 代碼。這對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)是極度友好的。
uni-app 框架下終端開(kāi)發(fā)的工作
通過(guò)上面的介紹可以知道，頁(yè)面、業(yè)務(wù)邏輯，在上層使用 html、css 和 js 可以搞定；終端的原生能力，也可以透過(guò) HTML5+ 引擎，直接使用 js 調(diào)用搞定。
終端開(kāi)發(fā)的事兒，被壓縮的只剩下上面綠色框中的內(nèi)容了，開(kāi)發(fā) uni iOS SDK，也就是原生插件。
舉個(gè)例子，比如我們現(xiàn)有的 OCR 或者 人臉識(shí)別功能，它們嚴(yán)重依賴端上的能力，這時(shí)候就需要終端開(kāi)發(fā)出場(chǎng)了。
我們要開(kāi)發(fā) uni-app 框架下的插件，讓我們我們現(xiàn)有的 SDK 業(yè)務(wù)，可以在 uni-app 框架中調(diào)用。
注冊(cè)成為開(kāi)發(fā)者
在 https://dev.dcloud.net.cn/ 注冊(cè)成為 DCloud 開(kāi)發(fā)者，注冊(cè)完成之后，在 HBuilder X 中登錄你的賬號(hào)。
DCloud 按照登錄信息為每個(gè)應(yīng)用分配唯一的 appid。
Hello World
有前面知識(shí)之后，我們就可以愉快的 Hello World 了！
HBuilderX：官方IDE下載地址。
下載安裝和新建 Hello World 項(xiàng)目參考上面兩個(gè)文檔可以搞定，很 easy。
按照需求，我新建了一個(gè)名為 wb-kyc-demo 的項(xiàng)目，然后 運(yùn)行 > 運(yùn)行在手機(jī)模擬器上運(yùn)行，點(diǎn)擊運(yùn)行，控制臺(tái)輸出如下：
09:11:48.822 項(xiàng)目 'wb-kyc-demo' 開(kāi)始編譯...
09:11:51.951 編譯器版本：2.4.6
09:11:51.961 請(qǐng)注意運(yùn)行模式下，因日志輸出、sourcemap以及未壓縮源碼等原因，性能和包體積，均不及發(fā)行模式。
09:11:51.962 正在編譯中...
09:12:06.425 DONE Build complete. Watching for changes...
09:12:06.438 項(xiàng)目 'wb-kyc-demo' 編譯成功.
09:12:06.739 正在啟動(dòng)模擬器...
09:12:15.306 正在安裝手機(jī)端HBuilder調(diào)試基座...
09:12:24.181 正在同步手機(jī)端程序文件...
09:12:24.201 同步手機(jī)端程序文件完成
09:12:24.226 正在啟動(dòng)應(yīng)用HBuilder...
09:12:24.526 應(yīng)用HBuilder已啟動(dòng)（如未啟動(dòng)請(qǐng)手動(dòng)啟動(dòng)模擬器上的HBuilder應(yīng)用）...
09:12:24.550 iOS模擬器功能少于真機(jī)基座，具體見(jiàn)：http://ask.dcloud.net.cn/article/35508
09:12:26.549 [LOG] : App Launch at App.vue:4
09:12:26.570 [LOG] : App Show at App.vue:7
至此，一切都還很簡(jiǎn)答，萬(wàn)里長(zhǎng)征邁出了第一步，程序跑起來(lái)了，模擬器運(yùn)行結(jié)果如下。
