5、 Uni-app本机插件开发01 Hello World

最近，要求以前的本机SDK应支持uni-app访问。在本文中，我将编写一篇关于如何为uni-app开发本机插件的教程。

写在前面

最近，要求本机OCR SDK应支持uni-app访问。因为uni-app是一个纯粹的面向前端开发的框架，它掩盖了与本地开发相关的细节。对于SDK开发人员来说，本机SDK需要制作成一个uni-app插件，并投入插件市场。开发者访问时，可以根据uni app插件访问规则直接访问。

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

什么是uni app

你可以从以下材料中了解什么是uniApp：

，官方diss一波友军

这个框架面向前端开发人员，显示了前端开发人员一统江湖的野心。

官方网站的主页向我们展示了一波代码如何在9个平台上运行。

图像.png

iOS开发在面向前端的框架中扮演什么角色？

下面发布了一个uni-app功能框架图。左下角红色框中选择的内容表示与终端相关的内容。

图像.png

让我们把红盒子里的东西整理一下。

uniApp的Weex

uni appApp有一个内置的渲染引擎，它提供了本机渲染功能。nvue相当于为Weex补充了大量的uni-app组件和API，以及丰富的本地Plus API。js和本地插件。

html5plus/HTML5 Plus

HTML5+是一个在手机上运行的增强型网页引擎。除了支持标准HTML5，它还支持更多扩展的js api。

uniApp有一个内置的HTML5+引擎，允许js直接调用丰富的本地功能。有关具体功能，请参阅页面。

这意味着什么？以获取陀螺仪数据为例，使用HTML5+引擎，我们可以直接通过js接口获取相关数据，而无需编写本机代码。这对前端开发人员非常友好。

uni-app框架下的终端开发

从上面的介绍中，我们可以知道，在上层使用html、css和js可以解决页面和业务逻辑；终端的本地功能也可以通过使用js调用的HTML5+引擎直接实现。

在终端开发方面，仅压缩上面绿色框中的内容。uni iOS SDK的开发，即本机插件。

例如，我们现有的OCR或人脸识别功能严重依赖终端的功能，需要终端开发。

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

注册为开发人员

注册为DCloud开发人员后，请登录HBuilder X中的帐户。

DCloud根据登录信息为每个App分配一个唯一的appid。

你好，世界

有了之前的知识，我们可以拥有一个快乐的Hello World！

HBuilderX:

。

通过参考以上两个文档，很容易下载、安装和创建Hello World项目。

根据需要，我创建了一个名为wb-kyc demo的新项目，然后在手机模拟器上运行>Run，单击Run，控制台输出如下：

09:11:48.822项目“wb-kyc演示”开始编译

09:11:51.951编译器版本：2.4.6

09:11:51.961请注意，在运行模式下，由于日志输出、源代码映射、未压缩源代码等原因，性能和软件包容量低于发布模式。

09:11:51.962编译

09:12:06.425完成构建完成。正在监视更改。。。

09:12:06.438项目“wb kyc演示”成功编译

09:12:06.739启动模拟器

09:12:15.306安装移动HBuilder调试底座

09:12:24.181同步移动程序文件

09:12:24.201移动终端程序文件同步完成

09:12:24.226启动AppHBuilder

09:12:24.526AppHBuilder已启动（如果没有，请在模拟器上手动启动HBuildeerApp）

09:12:24.550 iOS模拟器的功能低于真实机器基础，请参见：https://ask.dcloud.net.cn/article/35508

09:12:26.549[日志]：App在App上启动。vue:4

09:12:26.570[日志]：App在App上显示。vue:7

到目前为止，一切仍然很简单。长征的第一步已经迈出，计划正在运行。模拟器的运行结果如下。

图像.png