Day 28: 拯救失足专案,在现有专案内引入KMM

Keyword: KMM in exist project


KMM这麽好,但是我们专案已经开发了五年了,整个Code Base十分庞大,里面还都是我多年的心血,现在转换成KMM还来得及嘛?

答案是:当然可以

再次请出第一天这张图

https://github.com/officeyuli/itHome2021/raw/main/day1/KMM-release-scheme_Blogpost.jpeg

根据KMM的架构图,只要把共用的商业逻辑抽出来到shared module内就可以,而双平台原本的画面呈现仍然可以保留,对於Android开发者来说,更是只要把商业逻辑以下的部分修改依赖即可.当然,如果你在里面用了像是LiveData,Room这些只有Android才有的组件的话,由於iOS不能理解这些,所以可能要重写或是修改.

这时候就只能祈祷大家平常有遵守架构与clean architecture来写了

建立shared Module

为了让双方能够共用,我们要先建立一个shared Module.首先,先用AndroidStudio打开已经先写好的Android专案,根据File ⇒New ⇒ Module来建立一个Module

然後拉到最下面,可以找到KMM Shared Module(如果有安装KMM Plugin的话),可以把Module 的名称改成熟悉的shared

https://github.com/officeyuli/itHome2021/raw/main/day28/sharedModule.png

按下Finish就可以看到熟悉的shared结构出现了

在Android使用shared Module

有了Module後,必须要在Gradle设定,让Android的部分可以享受到shared内的程序码.

在gradle(Android)的dependencies内 加上这行

implementation project(':shared')

然後同步Gradle.

接下来可以在专案的任意地方,尝试使用shared的内容,在shared中,有一些KMM帮我们预先建好的物件可以用来测试有没有成功.

比如说我在某个Fragment加上

Log.e("KMMExample", "Hello from shared module: " + (Greeting().greeting()))

执行出来有结果就是成功了

https://github.com/officeyuli/itHome2021/raw/main/day28/kmmLog.jpg

然後可以把商业逻辑一步一步的搬进shared中,记得不同平台的实作要使用Expect/Actual分开.

建立iOS专案

(下面的图都是偷官网的)

接下来建立一个iOS专案,打开Xcode,选择File ⇒New ⇒ Project.跳出专案精灵.

然後切换到iOS页签,选择建立一个App

https://github.com/officeyuli/itHome2021/raw/main/day28/ios-project-wizard-1.png

然後打上专案名称

https://github.com/officeyuli/itHome2021/raw/main/day28/ios-project-wizard-2.png

然後会需要选择专案的位置 ,这边请指向你的Android专案的Root .

然後你在Android Studio内应该就能看到刚刚建立的iOS专案了

https://github.com/officeyuli/itHome2021/raw/main/day28/ios-project-in-as.png

你可以把他改名成我们熟悉的iosApp

https://github.com/officeyuli/itHome2021/raw/main/day28/ios-directory-renamed-in-as.png

让iOS跑KMM

然後我们要追加一些设定,让iOS在编译的时期也能够执行KMM的Script产生必要档案.

首先,在Xcode左边点两下专案名称,来打开专案设定

在Build Phases的页签左上的地方,点加号 ,然後选择New Run Script Phase.来建立一个新的Script

https://github.com/officeyuli/itHome2021/raw/main/day28/xcode-run-script-phase-1.png

在script内加上这段

cd "$SRCROOT/.."
./gradlew :shared:embedAndSignAppleFrameworkForXcode

https://github.com/officeyuli/itHome2021/raw/main/day28/xcode-add-run-phase-2.png

然後把新增加的这段Run Script往上提到 Compile Sources之上 Dependencies之下

https://github.com/officeyuli/itHome2021/raw/main/day28/xcode-run-script-phase-3.png

接下来 切换上面的页签到Build Settings 找到Search Paths下面的Framework Search Path

(有点难找,可以直接搜寻)

https://github.com/officeyuli/itHome2021/raw/main/day28/xcode-add-framework-search-path.png

里面加上这段

$(SRCROOT)/../shared/build/xcode-frameworks/$(CONFIGURATION)/$(SDK_NAME)

再找到 Linking 下面的Other Linker flags

https://github.com/officeyuli/itHome2021/raw/main/day28/xcode-add-flag.png

同样加上

$(inherited) -framework shared

然後执行专案,如果正常设定应该会成功编译并且出现画面

https://github.com/officeyuli/itHome2021/raw/main/day28/iosSreen0.jpg

引入Shared Module

在Xcode中修改ContentView的内容

//这是swift
import SwiftUI
import shared //加入这行来使用shared

struct ContentView: View {
    var body: some View {
        Text(Greeting().greeting())
                .padding()//这行使用了shared里面的Greeting物件
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

如果正常编译通过,应该会出现以下画面

https://github.com/officeyuli/itHome2021/raw/main/day28/iosScreen.jpg

大功告成!接下来就跟一般的KMM专案相同的流程开发了!


<<:  【後转前要多久】# Day18 BootStrap - 快速看文件

>>:  [day-18] 认识Python的资料结构!(Part .5)

Day20 - GitLab CI 更新 Manifest Image Tag

如何建立 Deploy Stage 在 Day15 的教学里,我们透过 Helm Chart 在 K...

Day.2 「欢迎来到网页这个世界!」 —— 认识网页架构

网页世界是由什麽组成? 上一篇有讲到网页三兄弟,其中有一个老大哥负责撑起这个世界,那就是 HTML...

Day-2 Excel出现#字号!难道是中毒了吗!?

你是不是常常在编辑试算表时遇到”####”呢?别紧张,其实出现这个符号并不是你输入错误喔,而是你的栏...

Day-25 事件机制(1)

在网页中的JavaScript程序码,必须经由事件触发(如:按下按钮,又称事件驱动event-dri...

成为工具人应有的工具包-22 OpenedFilesView

OpenedFilesView 今天来认识 OpenedFilesView 顾名思义应该就是可以看到...