关于前端:Flutter-集成uniapp

48次阅读

共计 9457 个字符，预计需要花费 24 分钟才能阅读完成。

家喻户晓，不论是 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}
    }];
}

能够通过示例代码运行查看成果。

正文完
前端
发表至： 前端
2021-04-25
 0
关于前端:PiUI-高质量UI移动组件库发布啦
关于前端:uniappnvue实现仿微信App聊天应用-成功实现好友聊天语音视频通话功能
关于前端:一个互相信任的团队是怎样的
关于前端:前端该如何优雅地-Mock-数据