混合開發實戰：App里拉起一個小程式（IOS篇）

最近和同事們討論的最多的技術架構就是 「Native+小程式」，作為混合開發的一種新模式，確實有非常多的優勢。一方面，小程式天然具備跨平臺能力，一套程式碼可以在 iOS 與 Android 兩個平臺中執行，其次小程式有遠超過 H5 的體驗（支援本地快取，Webview，有豐富的元件與支援庫），同時還支援熱更新，也可以避免 DOM 洩露，業務功能用小程式的形式去改造也不會影響APP安裝包體積。

要實現這個架構最基本的就是要能在App 里拉起小程式，我司是用的FinClip 小程式容器，本期給大家分享實操經驗。先從原理開始吧。

什麼是小程式執行時框架？

FinClip 的小程式程式設計模型是分為多個頁面，每個頁面有自己的 template、CSS 和 JS，實際在執行的時候，業務邏輯的 JS 程式碼是執行在獨立的 JavaScript 引擎中，每個頁面的 template 和 CSS 是執行在各自獨立的 WebView 裡面，頁面之間是透過函式 NavigateTo 進行頁面的切換。

每個 WebView 裡面的頁面和公共的 JavaScript 引擎裡面的邏輯的互動方式是透過訊息服務，頁面的一些事件都會透過這個訊息通道傳給 JavaScript 引擎執行環境，這個執行環境會響應這個事件，做一些 API 呼叫，可調到客戶端凡泰小程式提供的一些能力，處理之後會把這個資料再重新傳送給對應的頁面渲染容器來處理，把資料和模板結合在一起來，在產生最終的使用者介面。如下圖：

如何在App里拉起小程式？

以下操作均是使用 FinClip 小程式容器去實現的。也是新技術，不瞭解的可以去官網看看：

iOS端操作如下：

第一步：獲取 SDK KEY 及 SDK SECRET

使用FinClip SDK需要申請 SDK KEY 及 SDK SECRET ，只有在SDK初始化的時候配置了正確的 SDK KEY 及 SDK SECRET ，才能初始化成功並正常使用。

1.1 建立應用

需要登入FinClip管理後臺「應用管理-新增合作應用」，完成應用建立；

1.2 獲取 SDK KEY 及 SDK SECRET

建立應用並新增 Bundle ID後，選擇對應 Bundle ID 後的「複製」，就可以匯出對應的 SDK KEY 與 SDK SECRET了。

SDK KEY：是合作應用能使用小程式SDK的憑證，如果SDK Key校驗失敗，則SDK的所有Api都無法使用。
SDK SECERT：是訪問服務的安全證照，不要給第三方。

第二步：整合 SDK

整合sdk需要來引入 FinApplet.framework 和FinAppletExt.framework。具體操作方法可以去詳細檢視官方的的文件： iOS如何引入一個SDK

第三步：新增SDK標頭檔案

在需要使用 FinClip 小程式 SDK 的地方，新增如下程式碼：

#import <FinApplet/FinApplet.h>

如果還整合了擴充套件 SDK，那麼呼叫擴充套件 SDK 中的 api，還需要加上下面的程式碼：

#import  <FinAppletExt/FinAppletExt.h>

當然，最方便的方式是在 pch 檔案中新增以上程式碼，這樣在使用的地方就不用再引用了。

第四步：初始化 SDK

FATConfig *config = [FATConfig configWithAppSecret:@"SDK KEY" appKey:@"SDK SECRET"];
    config.apiServer = @"
    [[FATClient sharedClient] initWithConfig:config error:nil];

第五步：開啟小程式

[[FATClient sharedClient] startRemoteApplet:@"app id" startParams:nil InParentViewController:self completion:^(BOOL result, NSError *error) {
       NSLog(@"result:%d---error:%@", result, error);
   }];

官方也有一些例項demo，可以到他們的 小程式應用市場：   裡去找程式碼包下載。大家可以自行下載