干货 | 携程机票Skip原生跨端框架探究

携程技术 · 公众号 · 架构 · 2025-05-22 17:00

正文

请到「今天看啥」查看全文

工具链支持 ：Skip提供了完整的工具链支持，包括代码生成、调试工具和构建脚本，帮助开发者快速上手并优化开发流程。

实际运行效果 ：不仅逻辑部分可共享，UI部分也可以做到一码双端。

二、Skip的使用方法

2.1 环境搭建

Skip的环境初始化配置非常简单：

1）安装Kotlin和Swift开发环境

2）通过Homebrew安装Skip CLI工具：

brew install skip-dev/tap/skip

3）初始化一个新的Skip项目：

skip init MyApp

2.2 编写共享代码

在Skip项目中，共享代码位于shared目录下。开发者可以使用Kotlin或Swift编写业务逻辑，例如网络请求、数据存储等。

class MyApp {    fun greet(): String {        return "Hello, Skip!"    }}

2.3 实现原生UI

在Android和iOS项目中，分别使用Jetpack Compose和SwiftUI实现UI层，并调用共享逻辑代码。

Swift编写共享代码

public struct RootView: View {    public init() {}
    public var body: some View {        ContentView()            .task {                logger.log("Welcome to Skip on \(androidSDK != nil ? "Android" : "Darwin")!")                logger.warning("Skip app logs are viewable in the Xcode console for iOS; Android logs can be viewed in Studio or using adb logcat")            }    }}
public struct ContentView: View {    @AppStorage("tab") var tab = ContentTab.welcome11    @State var viewModel = ViewModel()    @State var appearance = ""
    public init() {}
    public var body: some View {        TabView(selection: $tab) {            NavigationStack {                WelcomeView()            }            .tabItem { Label("Welcome1234885z211", systemImage: "heart.fill") }            .tag(ContentTab.welcome11)
            NavigationStack {                ItemListView()                    .navigationTitle(Text("\(viewModel.items.count) Items"))            }            .tabItem { Label("Home2", systemImage: "house.fill") }            .tag(ContentTab.home22)
            NavigationStack {                SettingsView(appearance: $appearance)                    .navigationTitle("Settings")            }            .tabItem { Label("Settings3", systemImage: "gearshape.fill") }            .tag(ContentTab.settings33)        }        .environment(viewModel)        .preferredColorScheme(appearance == "dark" ? .dark : appearance == "light" ? .light : nil)    }}

iOS接入

#if !SKIPpublic protocol SwiftToAndroidApp: App {}
public extension SwiftToAndroidApp {    var body: some Scene {        WindowGroup {            RootView()        }    }}#endif

Android接入

open class MainActivity: AppCompatActivity {    constructor() {}
    override fun onCreate(savedInstanceState: android.os.Bundle?) {