五、uni-app 原生插件开发01-Hello World

最近有一个需求，就是之前的 native SDK 需要支持 uni-app 接入，从本篇开始，写一套如何开发 uni-app 原生插件的教程。

写在前面

最近有一个需求，就是纯原生的 OCR SDK 需要支持 uni-app 接入，由于 uni-app 是一个纯面向前端开发的框架，屏蔽了和原生开发相关的细节。对 SDK 开发者来说，需要将原生 SDK 制作成一个 uni-app 的插件，放在插件市场，开发者接入的时候直接按照 uni-app 插件接入规则接入即可。

本教程记录制作插件制作过程。

什么是 uni-app

可以从以下几个材料去了解什么是 uni-app：

• uni-app 官网

• uni-app选型评估23问，官方 diss 一波友军

这个框架是面向前端开发者的，展示了前端开发者一统江湖的雄心，金戈铁马，气吞万里如虎。

官网首页，向我们展示了一波，一套代码，是如何运行到 9 个平台上的。

image.png

在一个面向前端的框架中，iOS 开发扮演着哪些角色？

下面贴了一张 uni-app 功能框架图，左下角红色框选中的内容，表示和终端相关的东西。

image.png

我们梳理一下红色框中的各项内容。

weex 之于 uni-app

uni-app App端内置 weex 渲染引擎，提供了原生渲染能力，nvue 相当于给 weex 补充了大量 uni-app 的组件和 API，以及丰富的 Plus API、Native.js、原生插件。

html5plus / HTML5 Plus

HTML5+ 是运行于手机端的强化 web 引擎，除了支持标准 HTML5 外，还支持更多扩展的 js api。

uni-app App 端内置 HTML5+ 引擎，让 js 可以直接调用丰富的原生能力，具体有哪些能力详细可以参考 html5plus 中国产业联盟 页面。

这意味着什么？我们以获取设备陀螺仪数据为例，有了 HTML5+ 引擎，我们可以直接通过 js 接口获取相关数据，不用编写 native 代码。这对于前端开发者来说是极度友好的。

uni-app 框架下终端开发的工作

通过上面的介绍可以知道，页面、业务逻辑，在上层使用 html、css 和 js 可以搞定；终端的原生能力，也可以透过 HTML5+ 引擎，直接使用 js 调用搞定。

终端开发的事儿，被压缩的只剩下上面绿色框中的内容了，开发 uni iOS SDK，也就是原生插件。

举个例子，比如我们现有的 OCR 或者 人脸识别功能，它们严重依赖端上的能力，这时候就需要终端开发出场了。

我们要开发 uni-app 框架下的插件，让我们我们现有的 SDK 业务，可以在 uni-app 框架中调用。

注册成为开发者

在 https://dev.dcloud.net.cn/ 注册成为 DCloud 开发者，注册完成之后，在 HBuilder X 中登录你的账号。

DCloud 按照登录信息为每个应用分配唯一的 appid。

Hello World

有前面知识之后，我们就可以愉快的 Hello World 了！

HBuilderX：官方IDE下载地址。

uni-app 快速上手教程。

下载安装和新建 Hello World 项目参考上面两个文档可以搞定，很 easy。

按照需求，我新建了一个名为 wb-kyc-demo 的项目，然后 运行 > 运行在手机模拟器上运行，点击运行，控制台输出如下：

09:11:48.822 项目 'wb-kyc-demo' 开始编译...
09:11:51.951 编译器版本：2.4.6
09:11:51.961 请注意运行模式下，因日志输出、sourcemap以及未压缩源码等原因，性能和包体积，均不及发行模式。
09:11:51.962 正在编译中...
09:12:06.425  DONE  Build complete. Watching for changes...
09:12:06.438 项目 'wb-kyc-demo' 编译成功.
09:12:06.739 正在启动模拟器...
09:12:15.306 正在安装手机端HBuilder调试基座...
09:12:24.181 正在同步手机端程序文件...
09:12:24.201 同步手机端程序文件完成
09:12:24.226 正在启动应用HBuilder...
09:12:24.526 应用HBuilder已启动（如未启动请手动启动模拟器上的HBuilder应用）...
09:12:24.550 iOS模拟器功能少于真机基座，具体见：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 

至此，一切都还很简答，万里长征迈出了第一步，程序跑起来了，模拟器运行结果如下。

image.png