Flutter 集成uni-app

時間  2021-04-26
標籤 java android c++ git github json 小程序 app 框架 ide 欄目 Java 简体版
原文   原文鏈接

衆所周知，無論是Flutter仍是uni-app，其實都是一個UI框架，他們都是運行在原生系統之上的。天然，咱們能夠在Flutter工程中集成uni-app。java

Android 集成uni-app

1、下載離線SDK

首先，咱們建立一個Flutter普通應用，並使用Android Studio打開Android工程。接下來，打開uni-app官網，下載最新Android離線SDK，以下圖所示。
在這裏插入圖片描述
解壓後，可使用Android Studio打開裏面的項目HBuilder-Integrate-AS查看運行效果。打開下載的uni-app SDK目錄，以下圖所示。
在這裏插入圖片描述
SDK目錄說明以下：android

|-- HBuilder-Hello                App離線打包演示應用
    |-- HBuilder-Integrate-AS        集成uni-app的最簡示例
    |-- SDK                            SDK庫文件目錄
    |-- Feature-Android.xls            Android平臺各擴展Feature API對應的詳細配置
    |-- Readme.txt                    版本說明文件及注意事項
    |-- UniPlugin-Hello-AS            uni原生插件開發示例

2、 配置工程

2.1 基礎庫配置

而後，咱們看一下如何在原生Android工程中集成uni-app SDK。若是尚未原生Android工程，能夠新建一個。而後，將將lib.5plus.base-release.aar、android-gif-drawable-release@1.2.17.aar、uniapp-v8-release.aar和oaid_sdk_1.0.25.aar拷貝到libs目錄下。
在這裏插入圖片描述c++

在build.gradle中添加資源引用，因爲上面都是aar方式，那麼只須要添加include: ['*.aar', '*.jar']便可引入進來。git

implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: [])
 implementation "com.android.support:support-v4:28.0.0"
 implementation "com.android.support:appcompat-v7:28.0.0"
 implementation 'com.android.support:recyclerview-v7:28.0.0'
 implementation 'com.facebook.fresco:fresco:1.13.0'
 implementation "com.facebook.fresco:animated-gif:1.13.0"
 implementation 'com.github.bumptech.glide:glide:4.9.0'
 implementation 'com.alibaba:fastjson:1.1.46.android'

uni-app配置時還須要在build.gradle的android節點中添加aaptOptions配置，以下所示。github

aaptOptions {  
     additionalParameters '--auto-add-overlay'  
     ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"  
 }

2.2 應用配置

配置Appkey

從3.1.10版本起，集成uni-app須要申請 Appkey，申請Appkey請參考。
在這裏插入圖片描述
而後，打開Androidmanifest.xml， 導航到Application節點，建立meta-data節點，name爲dcloud_appkey，value爲申請的AppKey。json

<application
  ...>
  <meta-data
      android:name="dcloud_appkey"
      android:value="替換爲本身申請的Appkey" />

配置應用版本號

在這裏插入圖片描述
若是須要更改版本等信息，能夠修改defaultConfig節點下面的配置。小程序

  • versionCode：爲應用的版本號（整數值），用於各應用市場的升級判斷，建議與manifest.json中version -> code值一致
  • versionName：爲應用的版本名稱（字符串），在系統應用管理程序中顯示的版本號，建議與manifest.json中version -> name值一致。
  • applicationId：爲應用的包名，通常設置爲反向域名，不建議修改。

同時，建議將targetSdkVersion設置爲25或以上。App離線SDK minSdkVersion最低支持21，小於21在部分5.0如下機型上將沒法正常使用。app

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    defaultConfig {
        applicationId "com.example.myapplication"
        minSdkVersion 21
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        multiDexEnabled true
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: [])
    implementation 'com.github.bumptech.glide:glide:4.9.0' // 基座依賴
    implementation 'com.android.support:support-v4:28.0.0'
    implementation 'com.alibaba:fastjson:1.1.46.android'
}

配置應用啓動頁及provider節點

打開Androidmanifest.xml文件，而且新建的項目默認會有一個MainActivity的節點，必需要刪除，其餘參考下面的代碼添加。框架

<activity
        android:name="io.dcloud.PandoraEntry"
        android:configChanges="orientation|keyboardHidden|keyboard|navigation"
        android:label="@string/app_name"
        android:launchMode="singleTask"
        android:hardwareAccelerated="true"
        android:theme="@style/TranslucentTheme"
        android:screenOrientation="user"
        android:windowSoftInputMode="adjustResize" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity
        android:name="io.dcloud.PandoraEntryActivity"
        android:launchMode="singleTask"
        android:configChanges="orientation|keyboardHidden|screenSize|mcc|mnc|fontScale|keyboard"
        android:hardwareAccelerated="true"
        android:permission="com.miui.securitycenter.permission.AppPermissionsEditor"
        android:screenOrientation="user"
        android:theme="@style/DCloudTheme"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="h56131bcf" />
        </intent-filter>
    </activity>
    <!--provider節點必須添加-->
    <provider
        android:name="io.dcloud.common.util.DCloud_FileProvider"
        android:authorities="${apk.applicationId}.dc.fileprovider"
        android:exported="false"
        android:grantUriPermissions="true">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/dcloud_file_provider" />
    </provider>

其餘配置

正式打包以前，還須要配置應用圖標和啓動界面。ide

  • icon.png爲應用的圖標。
  • push.png爲推送消息的圖標。
  • splash.png爲應用啓動頁的圖標。

在這裏插入圖片描述
在這裏插入圖片描述
注意：splash.png在不一樣設備上顯示效果不同，爲防止出現拉伸的情況，建議使用Android studio生成.9.png類型圖片。

資源配置

手動新建一個assets文件夾，位置與java目錄同級。而後，將SDK->assets->data文件夾拷貝到assets文件夾下，以下圖所示。
在這裏插入圖片描述

而後，在assets文件夾下建立apps文件夾，並將HBuilderX項目導出的資源複製到assets->apps文件中，以下圖所示。
在這裏插入圖片描述
生成HBuilderX項目資源能夠參考：生成本地打包 APP 資源。選擇項目 -> 發行 -> 原生App-本地打包 -> 生成本地打包App資源.
在這裏插入圖片描述

完成上述操做後，須要修改dcloud_control.xml文件，確保dcloud_control.xml中的appid與manifest.json中的id與文件夾名一致，以下圖所示。
在這裏插入圖片描述
生成自定義基座，須要在根節點下添加debug="true"和syncDebug="true"，以下圖。
在這裏插入圖片描述
這個自定義基座支持熱更新須要將debug-server-release.aar打入apk中，生成正式包時能夠刪除，能夠參考：詳細步驟可參考連接。

最後，按照Android代碼的運行方式同樣運行便可，效果以下圖。
在這裏插入圖片描述

iOS集成uni-app

1、下載離線SDK

和原生iOS工程集成其餘的SDK同樣，在Flutter工程中集成uni-app須要先下載離線的SDK。打開uni-app官網，而後下載iOS的最新離線SDK。
在這裏插入圖片描述

解壓後，文件的目錄結構以下圖。
在這裏插入圖片描述

|-- HBuilder-Hello       給用戶打uni-app項目的離線打包工程
    |-- Feature-iOS.xls      配置表（依賴的庫、資源文件、參數配置等）
    |-- SDK                 工程須要的庫文件，.h頭文件，配置文件，資源文件

咱們能夠直接運行HBuilder-Hello 工程來查看運行效果。

2、 添加基礎依賴庫及資源文件

基礎依賴庫及資源是必需要引入到工程中的，基礎依賴庫及資源存放在 UniMPSDK/Core 目錄，目錄結構以下所示。

|-- UniMPSDK/Core
    |-- Headers          // .h 頭文件
    |-- Libs             // 基礎依賴庫
    |-- Resources        // 資源文件

2.1 添加基礎庫

使用Xcode打開iOS工程，而後在 Xcode 項目左側目錄選中工程名，在 【TARGETS】->【Build Phases】->【 Link Binary With Libaries】 中點擊【+】按鈕，在彈出的窗口中點擊 【Add Other】 ->【 Add Files...】，而後打開 UniMPSDK/Core/Libs 基礎依賴庫目錄，選中目錄中的 .a 庫以及 .framework 庫單擊 open 按鈕將依賴庫添加到工程中。

在這裏插入圖片描述
在這裏插入圖片描述

2.2 添加系統依賴庫

在 Xcode 項目左側目錄選中工程名，在 TARGETS->Build Phases-> Link Binary With Libaries 中點擊「+」按鈕，在彈出的窗口中查找並選擇所需的庫（見下表），單擊 「Add」 按鈕，將庫文件添加到工程中。
在這裏插入圖片描述
須要依賴的庫有以下一些：

  • JavaScriptCore.framework
  • CoreMedia.framework
  • MediaPlayer.framework
  • AVFoundation.framework
  • AVKit.framework
  • GLKit.framework
  • OpenGLES.framework
  • CoreText.framework
  • QuartzCore.framework
  • CoreGraphics.framework
  • libc++.tbd
  • QuickLook.framework
  • CoreTelephony.framework
  • AssetsLibrary.framework
  • CoreLocation.framework
  • AddressBook.framework
  • libiconv.tbd

2.3 添加依賴資源文件

接下來，還須要添加依賴資源文件，建議在項目中新建一個 Group來管理資源文件。如示例在工程目錄中建立的 UniMP 文件夾，而後按功能模塊建立不一樣的目錄存放資源文件； 添加資源文件方法：在左側目錄中選中導入資源文件的位置（示例中是 UniMP/Core），在右鍵菜單中選擇Add Files to 「工程名...」，而後打開 UniMPSDK/Core 目錄，選擇 Resources 文件夾，而後點擊「Add」，將資源文件添加到工程中。
在這裏插入圖片描述

2.4 添加 .h 頭文件

在Xcode左側目錄中選中導入頭文件的位置（示例中是 UniMP/Core），在右鍵菜單中選擇Add Files to 「工程名...」，而後打開 UniMPSDK/Core 目錄，選擇 Headers 文件夾，而後點擊「Add」，將頭文件資源添加到工程中。
在這裏插入圖片描述

生成小程序應用資源

首先在 HBuilderX 中選擇您的 uni-app 項目，若是沒有請新建一個 uni-app 項目，以下圖。
在這裏插入圖片描述
而後，選中您的項目，右鍵->發行->原生App-製做應用wgt包。
在這裏插入圖片描述
點擊「瀏覽」 選擇wgt包導出路徑，點擊 「生成wgt」，以下圖。
在這裏插入圖片描述
項目編譯完成後會在控制檯輸出wgt包的路徑，點擊路徑打開 wgt 資源包所在目錄。
在這裏插入圖片描述

4、導入小程序資源

打開原生工程目錄在 UniMP 路徑中建立名稱爲Apps的文件夾，將以前導出的wgt包拷貝到Apps文件夾中，以下圖。
在這裏插入圖片描述
而後，在原生工程中左側目錄中選中導資源文件的位置（示例中是 UniMP/），在右鍵菜單中選擇Add Files to 「工程名...」，而後打開工程目錄，選擇 Apps 文件夾，而後點擊「Add」，將應用資源包添加到工程中，以下圖所示。
在這裏插入圖片描述

5、修改代碼

首先，須要初始化SDK引擎，並設置啓動參數，建議在application:didFinishLaunchingWithOptions 方法中添加，在 AppDelegate.m 中引用頭文件 #import "DCUniMP.h"和#import "WeexSDK.h"，以下所示。

#import "DCUniMP.h"
#import "WeexSDK.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    
    // 配置參數
    NSMutableDictionary *options = [NSMutableDictionary dictionaryWithDictionary:launchOptions];
    // 設置 debug YES 會在控制檯輸出 js log，默認不輸出 log，注：須要引入 liblibLog.a 庫
    [options setObject:[NSNumber numberWithBool:YES] forKey:@"debug"];
    // 初始化引擎
    [DCUniMPSDKEngine initSDKEnvironmentWithLaunchOptions:options];
    
    // 註冊 module 注：module的 Name 須要保證惟一， class：爲 module 的類名
    [WXSDKEngine registerModule:@"TestModule" withClass:NSClassFromString(@"TestModule")];
    // 註冊 component 注：component 的 Name 須要保證惟一， class：爲 component 的類名
    [WXSDKEngine registerComponent:@"testmap" withClass:NSClassFromString(@"TestMapComponent")];
    
    return YES;
}

而後，在 AppDelegate.m App 的生命週期方法中調用 SDK 相關方法，以下所示。

#pragma mark - App 生命週期方法
- (void)applicationDidBecomeActive:(UIApplication *)application {
    [DCUniMPSDKEngine applicationDidBecomeActive:application];
}

- (void)applicationWillResignActive:(UIApplication *)application {
    [DCUniMPSDKEngine applicationWillResignActive:application];
}

- (void)applicationDidEnterBackground:(UIApplication *)application {
    [DCUniMPSDKEngine applicationDidEnterBackground:application];
}

- (void)applicationWillEnterForeground:(UIApplication *)application {
    [DCUniMPSDKEngine applicationWillEnterForeground:application];
}

- (void)applicationWillTerminate:(UIApplication *)application {
    [DCUniMPSDKEngine destory];
}

而且，還能夠根據項目需求實現如下方法。

#pragma mark - 若是須要使用 URL Scheme 或 通用連接相關功能，請實現如下方法
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
    // 經過 url scheme 喚起 App
    [DCUniMPSDKEngine application:app openURL:url options:options];
    return YES;
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
    // 經過通用連接喚起 App
    [DCUniMPSDKEngine application:application continueUserActivity:userActivity];
    return YES;
}

接下來，須要打開小程序的文件中添加如下邏輯，參考示例工程 ViewController.m 。首先,須要引用頭文件。

#import "DCUniMP.h"

添加代理協議， DCUniMPEngineDelegate類，以下。

@interface ViewController () <DCUniMPSDKEngineDelegate>
@end

小程序應用資源必須部署到指定的沙盒路徑中才能夠正常運行，以下。

/// 檢查運行目錄是否存在應用資源，不存在將應用資源部署到運行目錄
- (void)checkUniMPResource {
    // 注意：isExistsApp: 方法僅是判斷運行目錄中是否存在應用資源，正式環境應該添加版本控制，內置新的wgt資源後須要判斷版本，決定是否須要釋放應用資源 
    if (![DCUniMPSDKEngine isExistsApp:k_AppId]) {
        // 讀取導入到工程中的wgt應用資源
        NSString *appResourcePath = [[NSBundle mainBundle] pathForResource:k_AppId ofType:@"wgt"];
        // 將應用資源部署到運行路徑中
        if ([DCUniMPSDKEngine releaseAppResourceToRunPathWithAppid:k_AppId resourceFilePath:appResourcePath]) {
            NSLog(@"應用資源文件部署成功");
        }
    }
}

最後是在原生代碼中打開小程序的代碼，以下。

/// 打開 uni 小程序
- (IBAction)openUniMP:(id)sender {
    // 初始化小程序的配置信息對象
    DCUniMPConfiguration *configuration = [[DCUniMPConfiguration alloc] init];
    [DCUniMPSDKEngine openUniMP:k_AppId configuration:configuration completed:^(DCUniMPInstance * _Nullable uniMPInstance, NSError * _Nullable error) {
        if (uniMPInstance) {
            // success
        } else {
            // error
        }
    }];
}

能夠經過示例代碼運行查看效果。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程