双人舞 發表於 2020-4-13 18:43:00

Flutter混合开发-Android

<div>
<h3>Why Flutter ?</h3>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="2638" data-height="5076"><img src="//upload-images.jianshu.io/upload_images/14594750-22d1ce5237a79159.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>
</div>
<div class="image-caption">older_crossed_platform.png</div>
</div>
<h3>Flutter框架与应用</h3>
<h4>框架与Source Code</h4>
<h5>整体框架</h5>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="1100" data-height="864"><img src="//upload-images.jianshu.io/upload_images/14594750-67cc95161ffeafd7.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1100/format/webp"></div>
</div>
<div class="image-caption">flutter_struct_base.jpg</div>
</div>
<h5>Source Code</h5>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="864" data-height="544"><img src="//upload-images.jianshu.io/upload_images/14594750-8fe030d6184cff73.png?imageMogr2/auto-orient/strip|imageView2/2/w/864/format/webp"></div>
</div>
<div class="image-caption">flutter_struct_function.png</div>
</div>
<p>所以从上面的分析可以看出,为了实现Flutter的平台无差异性，Google主要在 PlatForm Integration和Dart:UI部分做了适配工作。</p>
<h4>APK(Android应用)结构</h4>
<p>我们通过解压一个release的混合开发APK包，来探索一下加入了Flutter之后的包到底发生了哪些变化以及这些变化对应的作用是什么。</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="600" data-height="747"><img src="//upload-images.jianshu.io/upload_images/14594750-82ea90fd897b4997.png?imageMogr2/auto-orient/strip|imageView2/2/w/600/format/webp"></div>
</div>
<div class="image-caption">flutter._apk_change_graffle.png</div>
</div>
<p>从上图的标记中可以清楚的看出变化点</p>
<ul>
<li>
<p>变化1</p>
<p>未在图中标出，但是我相信大部分的开发者应该可以猜的到，就是在dex中打入了 PlatForm Integration的代码(FutterActivity，FlutterApplication，FlutterView etc.)</p>
</li>
<li>
<p>变化2</p>
<p>assets下面的4个文件,内容均为arm指令</p>
<ul>
<li>
<p>isolate_snapshot_data/isolate_snapshot_instr</p>
<p>对应了我们的Flutter代码进行AOT编译，用于创建一个新isolate</p>
</li>
<li>
<p>vm_snapshot_data/vm_snapshot_instr</p>
<p>用于初始化Dart VM,提供 runTime,gc等服务</p>
</li>
</ul>
<p>由于该部分内容通过gen_snapshot编译生成，且存放在App的data目录下面，所以</p>
<p>为以后的动态更新提供了可能。</p>
</li>
<li>
<p>变化3</p>
<p>ICU Dart Language包，提供语言相关的数据信息。</p>
</li>
<li>
<p>变化4</p>
</li>
</ul>
<p>​ Flutter Engine层的代码</p>
<h3>Flutter混合模式</h3>
<p>相信对于绝大多数应用来说，从零开始重新做一个App的成本是相当高的，所以混合开发成了它们尝试Flutter的首选。</p>
<h4>闲鱼模式</h4>
<h5>双Branch共存（Flutter模式 &amp;&amp; Standalone模式）</h5>
<p>Standalone模式：纯Native开发或者是平台打包下的模式</p>
<p>Flutter模式：进行flutter相关功能的开发，库生成，编译和调试走的都是Flutter定义的流程。</p>
<ul>
<li>优点</li>
</ul>
<p>在Standalone模式下，纯Native开发者和打包平台，对Flutter是无感知的。在这种情况下，Flutter相关的代码可以认为是一个常规的第三方库文件。</p>
<ul>
<li>
<p>前期准备</p>
<p>理清Standalone模式下对Flutter的依赖并将它们提取成一个aar库。</p>
</li>
<li>
<p>开发步骤</p>
<ol>
<li>在Flutter模式下进行flutter相关功能的开发。</li>
<li>将代码打包成一个aar库上传到repository中去进行版本控制。</li>
<li>切换分支到Standalone模式，修改相关依赖包的版本号。</li>
</ol>
<p>当然这种方法在实际的开发过程中还会遇到很多其他问题，比如复杂流程下生成aar库脚本的编写，比如两个模式下的代码同步等。</p>
</li>
</ul>
<h4>Google模式</h4>
<p>对与方便的进行Flutter的混合模式开发呼声有多高，Google专门为了这个问题建立了Wiki并且进行了持续4个月42个版本的更新。</p>
<h5>创建Flutter Module模式</h5>
<h6>1.1.1 切换flutter分支</h6>
<p>假如直接使用</p>
<div class="cnblogs_Highlighter">
<pre class="brush:java;gutter:true;">$ cd some/path/
$ flutter create -t module my_flutter
</pre>
</div>
<p>　　</p>
<p>会出现无法识别 command module的错误,查找其原因发现我们默认clone的分支是flutter的beta版本并不支持module命令所以首先需要</p>
<div class="cnblogs_Highlighter">
<pre class="brush:java;gutter:true;">flutter channel
flutter channel master
flutter upgrade
</pre>
</div>
<p>　　</p>
<p>将分支切换到master并且进行upgrade操作。</p>
<h6>1.1.2 创建Flutter module模版</h6>
<div class="cnblogs_Highlighter">
<pre class="brush:java;gutter:true;">flutter create -t module flutter_module
</pre>
</div>
<p>　　</p>
<p>这个时候会看到project中新增加了一个flutter_module，其中包含了.android,.ios和关键的include_flutter.groovy文件</p>
<h6>1.1.3 将Flutter添加到现有工程中</h6>
<ul>
<li>
<p>在android工程的根目录的settings.gradle中添加</p>
</li>
<li>
<div class="cnblogs_Highlighter">
<pre class="brush:java;gutter:true;">include ':app'                                     // assumed existing content
setBinding(new Binding())                                 // new
evaluate(new File(                                                      // new
settingsDir.parentFile,                                             // new
'flutter_module/.android/include_flutter.groovy'                      // new
))
</pre>
</div>
<p>　　</p>
</li>
</ul>
<ul>
<li>
<p>在app的build.gradle中添加依赖</p>
</li>
<li>
<div class="cnblogs_Highlighter">
<pre class="brush:java;gutter:true;">dependencies {
implementation project(':flutter')
</pre>
</div>
<p>　</p>
</li>
</ul>
<h6>1.1.4 总而言之</h6>
<p>简单的说，Google在兼顾维护成本和开发成本的前提下，为了Insert flutter module ,建立了一个逻辑依赖链</p>
<div class="cnblogs_Highlighter">
<pre class="brush:java;gutter:true;">flutter_module/.android/include_flutter.groovy -&gt;
flutter_module/.android/Flutter/build.gradle -&gt;
$flutterRoot/packages/flutter_tools/gradle/flutter.gradle
</pre>
</div>
<p>　　</p>
<p>利用 $flutterRoot/packages/flutter_tools/lib/中的flutter command &amp;&amp;</p>
<p>$AndroidRoot/build-tools/buildToolsVersion/中的android command</p>
<p>完成混合开发模式下的打包操作。</p>
</div>
<p><br><br>作者：Flutter编程指南<br>链接：https://www.jianshu.com/p/48daeb72c44c</p><br><br>
来源：https://www.cnblogs.com/wjw334/p/12693178.html
頁: [1]
查看完整版本: Flutter混合开发-Android