讓代碼在真機上跑起來

在前面一篇文章中，我們在模擬器上運行了一個 uni-app 程序，本節(jié)教程我們在 iOS 真機上跑一下項目，膚淺的窺探一下 APP 是如何在 iOS 設(shè)備上運行起來的。
在 01 教程中，我們對 uni-app 有了一個大致了解，明確了我們的角色 -- 開發(fā)原生插件，供上層調(diào)用。
前面我們新建了一個 wb-kyc-demo 項目，之前我們是運行在模擬器上，現(xiàn)在我們連接手機到電腦上，連接成功之后，選擇在真機設(shè)備上運行。

image.png

運行一會之后，我們發(fā)現(xiàn)手機上安裝了一個名為 HBuilder 的 APP，IDE 底部控制臺輸出如下：

19:37:20.717 項目 'wb-kyc-demo' 開始編譯...
19:37:21.360 編譯器版本：2.4.6
19:37:21.368 請注意運行模式下，因日志輸出、sourcemap以及未壓縮源碼等原因，性能和包體積，均不及發(fā)行模式。
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 聯(lián)機調(diào)試并非打包，調(diào)試基座 HBuilder 是默認的測試包，權(quán)限、圖標(biāo)都不可自定義。只有在點菜單"發(fā)行-發(fā)行為原生安裝包"時才能自定義這些設(shè)置
19:37:30.110 iOS9.0及以上系統(tǒng)需要在"設(shè)置"-"通用"-"設(shè)備管理"(或"描述文件")中信任DCloud企業(yè)證書(Digital Heaven開頭的證書)才可以正常使用
19:37:30.134 如手機上HBuilder調(diào)試基座未啟動，請手動啟動。如應(yīng)用未更新，請在手機上殺掉基座進程重啟

從控制臺輸出我們可以看到，我們手機上安裝了一個企業(yè)證書簽名的 APP，首次調(diào)試的話，我們需要信任一下企業(yè)證書。

image.png

信任證書之后，打開 APP，可以進行頁面調(diào)試。

由此我們可以看出 HBuilder X 這個 IDE 屏蔽了一切和 iOS 開發(fā)的細節(jié)，比如：

• 組裝一個包含 weex 框架、資源文件的 iOS 項目
• 編譯項目，生成 ipa 文件并用企業(yè)證書簽名
• 將 ipa 包安裝到設(shè)備上

調(diào)試基座

注意，上面我們提到的 ipa 包，在 uni-app 開發(fā)中，稱為調(diào)試基座，我將其簡稱為基座。
講這么多，就是為了引出這個概念，在 uni-app 中，調(diào)試基座有兩類：

• 默認調(diào)試基座
• 自定調(diào)試基座

運行在手機上的基座，屬于默認的調(diào)試基座，IDE 幫我們生成的。
我們在 HBuilder X 中，我們先窺探一下自定義調(diào)試基座。

image.png

默認的可以滿足我們所有的需求么？
答案是否定的，當(dāng) uni-app 需要調(diào)用原生插件的時候，我們就需要制作自定義基座了，這里可以粗略的思考一下原因。

原生插件本質(zhì)上就是一塊 native 代碼，uni-app 要調(diào)用這一塊代碼的話，這塊代碼必須打進 ipa 中，由于我們要調(diào)用哪些原生插件是未知的，所以默認基座沒有辦法滿足我們?nèi)绱瞬町惢男枨螅?，一旦涉及到調(diào)用原生插件的時候，我們就必須自定義基座！

iOS插件使用的基本套路

開發(fā)之前，我們要知道在 uni-app 中，是如何使用插件的。

uni-app 中有兩種方式可以使用原生插件：

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

本節(jié)我們將如何從插件市場獲取原生插件。

在開發(fā)者后臺配置應(yīng)用

在第一篇文章中，我們注冊了一個 DCloud 開發(fā)者賬號，并將其登錄在 HBuilder X 中了。

我們登錄我們的開發(fā)者管理臺 https://dev.dcloud.net.cn/ ，在管理臺我們可以看到我們創(chuàng)建的 APP 信息。

image.png

在插件市場為項目添加插件

進入 原生插件市場，原生插件市場有開發(fā)者發(fā)布的一些插件，此處我們以 原生增強提示框插件 來演示。

進入插件頁面，點擊右側(cè)的購買按鈕，可以看到如下彈框，我們在彈框中選擇添加插件的項目。

image.png

image.png

勾選插件。

image.png

原生增強提示框插件 主頁，提供了插件接入示例代碼，我們將接入示例代碼添加到 index.vue 的<script> 標(biāo)簽中，就可以使用插件了。

const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')
dcRichAlert.show({
    position: 'bottom',
    title: "提示信息",
    titleColor: '#FF0000',
    content: "<a  value='Hello uni-app'>uni-app</a> 是一個使用 Vue.js 開發(fā)跨平臺應(yīng)用的前端框架!\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
• 我們調(diào)用了插件中的 show 方法

至此，我們先不急著運行代碼，我們先分析，下一節(jié)寫完之后，再運行。

進一步了解原生插件

這里我們似乎只是在控制臺配置了一下插件名稱，就可以直接在項目里面用了，我們需要對原生插件有個直觀的認識，它到底是個什么東西？？？

在插件主頁的右側(cè)，有一個下載按鈕，我們把插件下載下來瞄一下。

image.png

下載完成之后解壓壓縮包。

image.png

在 iOS 平臺下，原生插件就是一個 .a 靜態(tài)庫。