六、uni-app 原生插件开发02 - uni-app 原生插件初体验

让代码在真机上跑起来

在前面一篇文章中,我们在模拟器上运行了一个 uni-app 程序,本节教程我们在 iOS 真机上跑一下项目,肤浅的窥探一下 APP 是如何在 iOS 设备上运行起来的。
在 01 教程中,我们对 uni-app 有了一个大致了解,明确了我们的角色 -- 开发原生插件,供上层调用。
前面我们新建了一个 wb-kyc-demo 项目,之前我们是运行在模拟器上,现在我们连接手机到电脑上,连接成功之后,选择在真机设备上运行。

image.png

运行一会之后,我们发现手机上安装了一个名为 HBuilder 的 APP,IDE 底部控制台输出如下:

19:37:20.717 项目 'wb-kyc-demo' 开始编译...
19:37:21.360 编译器版本:2.4.6
19:37:21.368 请注意运行模式下,因日志输出、sourcemap以及未压缩源码等原因,性能和包体积,均不及发行模式。
19:37:21.369 正在编译中...
19:37:25.015  DONE  Build complete. Watching for changes...
19:37:25.023 项目 'wb-kyc-demo' 编译成功.
19:37:25.264 正在建立手机连接...
19:37:27.341 正在同步手机端程序文件...
19:37:28.849 同步手机端程序文件完成
19:37:30.089 联机调试并非打包,调试基座 HBuilder 是默认的测试包,权限、图标都不可自定义。只有在点菜单"发行-发行为原生安装包"时才能自定义这些设置
19:37:30.110 iOS9.0及以上系统需要在"设置"-"通用"-"设备管理"(或"描述文件")中信任DCloud企业证书(Digital Heaven开头的证书)才可以正常使用
19:37:30.134 如手机上HBuilder调试基座未启动,请手动启动。如应用未更新,请在手机上杀掉基座进程重启

从控制台输出我们可以看到,我们手机上安装了一个企业证书签名的 APP,首次调试的话,我们需要信任一下企业证书。

image.png

信任证书之后,打开 APP,可以进行页面调试。

由此我们可以看出 HBuilder X 这个 IDE 屏蔽了一切和 iOS 开发的细节,比如:

  • 组装一个包含 weex 框架、资源文件的 iOS 项目
  • 编译项目,生成 ipa 文件并用企业证书签名
  • 将 ipa 包安装到设备上

调试基座

注意,上面我们提到的 ipa 包,在 uni-app 开发中,称为调试基座,我将其简称为基座
讲这么多,就是为了引出这个概念,在 uni-app 中,调试基座有两类:

  • 默认调试基座
  • 自定调试基座

运行在手机上的基座,属于默认的调试基座,IDE 帮我们生成的。
我们在 HBuilder X 中,我们先窥探一下自定义调试基座。


image.png

默认的可以满足我们所有的需求么?
答案是否定的,当 uni-app 需要调用原生插件的时候,我们就需要制作自定义基座了,这里可以粗略的思考一下原因。

原生插件本质上就是一块 native 代码,uni-app 要调用这一块代码的话,这块代码必须打进 ipa 中,由于我们要调用哪些原生插件是未知的,所以默认基座没有办法满足我们如此差异化的需求,所以,一旦涉及到调用原生插件的时候,我们就必须自定义基座

iOS插件使用的基本套路

开发之前,我们要知道在 uni-app 中,是如何使用插件的。

uni-app 中有两种方式可以使用原生插件:

  • 使用插件市场的插件
  • 使用本地插件

本节我们将如何从插件市场获取原生插件。

在开发者后台配置应用

在第一篇文章中,我们注册了一个 DCloud 开发者账号,并将其登录在 HBuilder X 中了。

我们登录我们的开发者管理台 https://dev.dcloud.net.cn/ ,在管理台我们可以看到我们创建的 APP 信息。

image.png

在插件市场为项目添加插件

进入 原生插件市场,原生插件市场有开发者发布的一些插件,此处我们以 原生增强提示框插件 来演示。

进入插件页面,点击右侧的购买按钮,可以看到如下弹框,我们在弹框中选择添加插件的项目。

image.png

点击下一步,绑定 APP 包名,此处我在 iOS 包名输入框中输出 APP 的bundle id。

image.png

回到 HBuilder X 项目中,在 manifest.json 文件的 APP 原生插件配置项中,我们原则云端插件,可以在弹框中看到我们刚刚添加的原生增强提示框插件

勾选插件。

image.png

原生增强提示框插件 主页,提供了插件接入示例代码,我们将接入示例代码添加到 index.vue 的<script> 标签中,就可以使用插件了。

const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')
dcRichAlert.show({
    position: 'bottom',
    title: "提示信息",
    titleColor: '#FF0000',
    content: "<a href='https://uniapp.dcloud.io/' value='Hello uni-app'>uni-app</a> 是一个使用 Vue.js 开发跨平台应用的前端框架!\n免费的\n免费的\n免费的\n重要的事情说三遍",
    contentAlign: 'left',
    checkBox: {
      title: '不再提示',
      isSelected: true
    },
    buttons: [{
        title: '取消'
      },
      {
        title: '否'
      },
      {
        title: '确认',
        titleColor: '#3F51B5'
      }
    ]
  }, result => {
    switch (result.type) {
      case 'button':
        console.log("callback---button--" + result.index);
        break;
      case 'checkBox':
        console.log("callback---checkBox--" + result.isSelected);
        break;
      case 'a':
        console.log("callback---a--" + JSON.stringify(result));
        break;
      case 'backCancel':
        console.log("callback---backCancel--");
        break;
    }
  });

简单分析一下上面的代码:

  • 插件名称是 DCloud-RichAlert
  • 我们调用了插件中的 show 方法

至此,我们先不急着运行代码,我们先分析,下一节写完之后,再运行。

进一步了解原生插件

这里我们似乎只是在控制台配置了一下插件名称,就可以直接在项目里面用了,我们需要对原生插件有个直观的认识,它到底是个什么东西???

在插件主页的右侧,有一个下载按钮,我们把插件下载下来瞄一下。

image.png

下载完成之后解压压缩包。


image.png

在 iOS 平台下,原生插件就是一个 .a 静态库。

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