最近有一个需求,就是之前的 native SDK 需要支持 uni-app 接入,从本篇开始,写一套如何开发 uni-app 原生插件的教程。
写在前面
最近有一个需求,就是纯原生的 OCR SDK 需要支持 uni-app 接入,由于 uni-app 是一个纯面向前端开发的框架,屏蔽了和原生开发相关的细节。对 SDK 开发者来说,需要将原生 SDK 制作成一个 uni-app 的插件,放在插件市场,开发者接入的时候直接按照 uni-app 插件接入规则接入即可。
本教程记录制作插件制作过程。
什么是 uni-app
可以从以下几个材料去了解什么是 uni-app:
- uni-app选型评估23问,官方 diss 一波友军
这个框架是面向前端开发者的,展示了前端开发者一统江湖的雄心,金戈铁马,气吞万里如虎。
官网首页,向我们展示了一波,一套代码,是如何运行到 9 个平台上的。
在一个面向前端的框架中,iOS 开发扮演着哪些角色?
下面贴了一张 uni-app 功能框架图,左下角红色框选中的内容,表示和终端相关的东西。
我们梳理一下红色框中的各项内容。
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下载地址。
下载安装和新建 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
至此,一切都还很简答,万里长征迈出了第一步,程序跑起来了,模拟器运行结果如下。