前言

为了迎合新技术,并且可以一端开发两端受用,于是乎在引入新的功能模块的时候,尝鲜使用flutter来进行开发。众所周知,在尝鲜新技术的时候总会有种畏惧感,人类总是喜欢使用熟悉的东西,而作为程序员更加喜欢用自己擅长的技术,但纵使有千般难,万般坑,既然选择了,总要把他跨过,踩完。

  1. Flutter工程介绍

1.1 模块介绍

目前工程包括基础模块和kds模块,两个模块都是单独的plugin,并且test依赖base插件。

CCDFlutterBase – flutter基础模块,包括
channel ---- 通信相关
data ---- 数据
int ---- 国际化
network ---- 网络请求封装
res ---- color,style等资源
sp ---- 存储
utils ---- 工具类
widget ---- 一些公用的widget
CCDTest – 相关业务
考虑到后续flutter工程会越来越多,所以使用repo来统一管理flutter工程。

1.2 flutter boost

为了原生和flutter路由跳转的方便,这里引入了闲鱼的开源项目flutter_boost。

对kds工程做了如下方式的修改,在单独运行的时候可以选择需要运行的页面,比如使用KdsOrder(),而在打包的时候,需要使用MyApp(),这个需要手动修改。

void main() => runApp(MyApp());
//void main() => runApp(Order());
//void main() => runApp(Setting());

class MyApp extends StatefulWidget {br/>@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {br/>@override
void initState() {
super.initState();

///register page widget builders,the key is pageName
FlutterBoost.singleton.registerPageBuilders({
  'ccd://Order': (pageName, params, _) => KdsOrder(),
  'ccd://Setting': (pageName, params, _) => KdsSetting(),
});

///query current top page and load it
FlutterBoost.handleOnStartPage();

}

@override
Widget build(BuildContext context) => MaterialApp(
title: 'Flutter CloudCashDesk',
builder: FlutterBoost.init(),

  ///init container manager
  home: Container());

}
1.3 通信

获取原生中的数据,暂时比较简单,只需要网络请求的数据,后续两边的交互,事件的触发,需要加更多的功能。

/// 获取sp信息,实时等待,调用方法:
/// UserModel userModel = await CCDMethodChannel.getUserInfo();
static Future getUserInfo() async {
try {
final String result =
await methodChannel.invokeMethod(ChannelConstant.get_user_info);
Map map = json.decode(result);
if (map == null) return null;
return UserModel.fromJson(map);
} on PlatformException {
print('Failed to get user.');
return null;
}
}
1.4 国际化

MaterialApp中加入国际化配置

//国际化
locale: _locale,
localizationsDelegates: [
CustomLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
//dialog
const FallbackCupertinoLocalisationsDelegate()
],
supportedLocales: CustomLocalizations.supportedLocales,
若使用了cupertino dialog需要加入

class FallbackCupertinoLocalisationsDelegate
extends LocalizationsDelegate {
const FallbackCupertinoLocalisationsDelegate();

@override
bool isSupported(Locale locale) => true;

@override
Future load(Locale locale) =>
DefaultCupertinoLocalizations.load(locale);

@override
bool shouldReload(FallbackCupertinoLocalisationsDelegate old) => false;
}
定义String

class Ids {
static String test1 = 'test1';
static String test2 = 'test2';
}

/// 简单多语言资源.
Map> localizedSimpleValues = {
// 'en': {
// Ids.test1: 'test1',
// Ids.test2: 'test2',
// },
'zh': {
Ids.test1: '测试1',
Ids.test2: '测试2',
},
};

在代码中引用string

IntlUtil.getString(context, Ids.test1)
1
1.5 网络

dio,只需要传入对应的网络api接口名和参数

charles代理设置
因为dio的网络请求默认不走设置中的代理,所以需要设置代理的ip地址和端口,一般默认端口8888,所以只需要设置ip地址,由于不同人使用的charles地址不一样,需要有一个设置入口,存储方式如下:

SpUtil.putString(SpHelper.charlesIp, ip_addr);
1
这里提供一个dialog用于设置代理ip

DialogUtils.showCharlesIpAddrDialog
1
1.6 资源文件

资源文件包括常用的颜色,字体大小和样式等。

使用方式,比如字体颜色是#333的使用

CCDColor.text_333
1
字体大小是15sp

Dimens.font_sp15
1
样式类型是列表的描述

CCDTextStyles.listDesc
1
1.7 存储

初始化

await SpUtil.getInstance();
1
存储用户数据

UserModel userModel = await CCDMethodChannel.getUserInfo();
SpHelper.putObject(SpHelper.userInfo, userModel);
1
2
获取用户数据

UserModel userModel = SpHelper.getObject(SpHelper.userInfo);
1

  1. Android引入方式

Flutter有多种引入方式,常见的是:

源码集成:使用flutter modle方式将flutter整体框架依赖和打包脚本都集成到主项目中。
aar集成:把所有的项目都以aar的完整库集成形式添加到主项目。
第一种方式虽然编译运行非常方便,但是会对主工程有侵入。

第二种方式flutter独立运行,最终所有代码和资源打包后依赖,对主工程无任何的侵入,但是调试两端通信会比较不方便。

考虑到不是所有的同学都在本地安装了flutter,并且jenkins打包也可能会遇到问题,这里采用第二种aar的方式。

  1. Android打包实现

考虑到flutter的独立运行和打包两种方式的共同体存在,使用gradle.properties添加变量FLUTTER_AAR控制来实现:

FLUTTER_AAR = false
1
默认是flutter以apk方式运行,如需打包,则只要修改其变量为true即可打包上传到nexus仓库,并可以在android项目中直接引用。

修改app的build.gradle
区分指定类型

if (FLUTTER_AAR == "true") {
apply plugin: 'com.android.library'
} else {
apply plugin: 'com.android.application'
}

区分applicationid

if (FLUTTER_AAR == "false") {
applicationId "com.zmsoft.flutter.kds.kds_example"
}
区分AndroidManifest

if (FLUTTER_AAR == "false") {
sourceSets {
main {
manifest.srcFile "src/main/AndroidManifest.xml"
}
}
} else {
sourceSets {
main {
manifest.srcFile "src/main/library/AndroidManifest.xml"
}
}
}
由于flutter工程会依赖第三方插件,在android中引入nexus的时候会出依赖相关的问题,所以这里使用fat-aar把所有依赖的工程打成一个aar的包。所以需要做如下修改:

工程的build.gradle中buildscript的dependencies中添加

if (FLUTTER_AAR == "true") {
classpath 'com.kezong:fat-aar:1.1.7'
}

app的build.gradle中加入:

apply plugin: 'com.kezong.fat-aar'
1
app的build.gradle的dependencies添加

if (FLUTTERAAR == "true") {
def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
}
plugins.each { name,
->
println name
embed project(path: ":$name", configuration: 'default')
}
}

至此可以实现apk和aar的两种方式切换

上传nexus仓库
这里为了方便开发先使用本地的url

def mavenRepositoryUrl = 'file:///Users/jaredchen/Documents/repo'
def NEXUS_USERNAME = 'xxxxx'
def NEXUS_PASSWORD = 'xxxxx

uploadArchives {
repositories.mavenDeployer {
repository(url: mavenRepositoryUrl) {
authentication(userName: NEXUS_USERNAME, password: NEXUS_PASSWORD)
}
pom.groupId = 'com.test.modlue'
pom.artifactId = 'my-flutter'
pom.version = '1.0.1'
pom.whenConfigured { pom ->
pom.dependencies.remove(pom.dependencies.find { dep -> dep.artifactId == 'shared_preferences' })
pom.dependencies.remove(pom.dependencies.find { dep -> dep.artifactId == 'base_app_flutter' })
pom.dependencies.remove(pom.dependencies.find { dep -> dep.artifactId == 'test' })
pom.dependencies.remove(pom.dependencies.find { dep -> dep.artifactId == 'xservice_kit' })
pom.dependencies.remove(pom.dependencies.find { dep -> dep.artifactId == 'flutter_boost' })
}
}
}

因为是把所有的plugin打包成一个aar,这里需要去除对应模块的pom依赖,要不然依赖会有各种问题。

至此可以实现aar的发布。

  1. Android使用方式

在build.gradle中引用远程的aar包
implementation 'com.test.modlue:my-flutter:1.0.1'
1
flutter boost
class FlutterSetting : BoostFlutterActivity(), CCDMethodChannel.ChannelInterface {

override fun getContainerParams(): MutableMap? {
    return null
}

override fun getContainerName(): String {
    return FlutterRouterConstant.FlutterKDSSetting.ContainerName
}

override fun onRegisterPlugins(p0: PluginRegistry?) {
    GeneratedPluginRegistrant.registerWith(p0)
    CCDMethodChannel.getInstance().setChannelInterface(this)
}

override fun getUserInfo(): String {
    return FlutterChannelHelper.getUserInfo()
}

}

这里只需要return在flutter工程中的containername。就可以渲染flutter中编写好的代码,当然也支持fragment。www.lekaowang.com.cn/zxv/hix/irf/khg/