让代码在真机上跑起来
在前面一篇文章中，我们在模拟器上运行了一个 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 静态库。
网友评论