五、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:

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

官网首页,向我们展示了一波,一套代码,是如何运行到 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容