家喻户晓，不论是Flutter还是uni-app，其实都是一个UI框架，他们都是运行在原生零碎之上的。天然，咱们能够在Flutter工程中集成uni-app。
Android 集成uni-app
一、下载离线SDK
首先，咱们创立一个Flutter一般利用，并应用Android Studio关上Android工程。接下来，关上uni-app官网，下载最新Android离线SDK，如下图所示。
解压后，能够应用Android Studio关上外面的我的项目HBuilder-Integrate-AS查看运行成果。关上下载的uni-app SDK目录，如下图所示。
SDK目录阐明如下：
|-- HBuilder-Hello App离线打包演示利用 |-- HBuilder-Integrate-AS 集成uni-app的最简示例 |-- SDK SDK库文件目录 |-- Feature-Android.xls Android平台各扩大Feature API对应的具体配置 |-- Readme.txt 版本阐明文件及注意事项 |-- UniPlugin-Hello-AS uni原生插件开发示例二、 配置工程
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目录下。
在build.gradle中增加资源援用，因为下面都是aar形式，那么只须要增加include: ['*.aar', '*.jar']即可引入进来。
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配置，如下所示。
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。
<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以下机型上将无奈失常应用。
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>其余配置
正式打包之前，还须要配置利用图标和启动界面。
- 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
一、下载离线SDK
和原生iOS工程集成其余的SDK一样，在Flutter工程中集成uni-app须要先下载离线的SDK。关上uni-app官网，而后下载iOS的最新离线SDK。
解压后，文件的目录构造如下图。
|-- HBuilder-Hello 给用户打uni-app我的项目的离线打包工程 |-- Feature-iOS.xls 配置表（依赖的库、资源文件、参数配置等） |-- SDK 工程须要的库文件，.h头文件，配置文件，资源文件咱们能够间接运行HBuilder-Hello 工程来查看运行成果。
二、 增加根底依赖库及资源文件
根底依赖库及资源是必须要引入到工程中的，根底依赖库及资源寄存在 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 资源包所在目录。
四、导入小程序资源
关上原生工程目录在 UniMP 门路中创立名称为Apps的文件夹，将之前导出的wgt包拷贝到Apps文件夹中，如下图。
而后，在原生工程中左侧目录中选中导资源文件的地位（示例中是 UniMP/），在右键菜单中选择Add Files to “工程名...”，而后关上工程目录，抉择 Apps 文件夹，而后点击“Add”，将利用资源包增加到工程中，如下图所示。
五、批改代码
首先，须要初始化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 } }];}能够通过示例代码运行查看成果。