从0使用Kuikly框架写一个小红书Demo-Day1

一、Kuikly初体验

1.1 Kuikly简介

在移动应用开发领域，跨平台解决方案一直是行业追求的目标。随着智能终端的多样化发展，尤其是鸿蒙系统推出后，开发者面临着需要为不同平台单独开发应用的困境，导致开发效率低下、维护成本高昂、多端体验不一致等问题。"一码多端" 技术通过一套代码 base 实现多平台部署，能够有效解决这些痛点，成为当前前端和客户端开发的重要发展方向。

Kuikly正是在此背景下腾讯给出的解决方案！Kuikly 框架基于 Kotlin Multiplatform (KMP) 技术构建，旨在提供一套一码多端、极致易用、动态灵活的全平台高性能开发框架。根据官方的说法， Kuikly 已在 15+ APP 中落地 500 + 页面，包括 QQ、腾讯新闻、QQ 音乐、搜狗输入法、QQ 浏览器、全民 K 歌、腾讯自选股等知名应用，经过多个开发团队的持续打磨与优化，该框架已具备出色的稳定性和可用性。

Kuikly官网给出了详细的上手教程，接下来我们来深入体验Kuikly流畅的开发过程吧。

1.2 环境搭建

工欲善其事，必先利其器！首先跟着Kuikly详细的官方教程，把开发环境搭建好，并编写Kuikly的第一个“Hello，Kuikly”页面

Kuikly是基于Kotlin MultiPlatform(KMP)实现的一套跨平台应用框架，因此开发环境与KMP要求的环境一致, 环境安装步骤如下:

1.2.1 下载并安装Android Studio

谷歌搜索Android Studio下载安装即可

如果你的 Android Studio 版本大于等于 (2024.2.1)，请将 Gradle JDK 版本切换为 JDK17 (该版本默认 Gradle JDK 为 21，与项目使用的配置不兼容）

切换方式: Android Studio -> Settings -> Build,Execution,Deployment -> Build Tools -> Gradle -> Gradle JDK

1.2.2 安装Kotlin、Kotlin MultiPlatform和Kuikly插件

1.在Android Studio中安装Kotlin和Kotlin MultiPlatform插件，路径为Setting->Preferences->Plugins->Marketplace

安装完成后restart IDE即可

1.2.3 注意事项

若想通过插件生成Ohos工程，请更新插件至1.1.0版本以上。

目前Kuikly Android Studio插件提供了以下功能

• 新建Kuikly业务工程: 一键生成Kuikly业务工程与 Android/iOS/Ohos App 宿主工程，自动集成Kuikly依赖等
• 新建Kuikly的ComposeView类: 自动帮业务开发者生成组合组件的模板代码
• 新建Kuikly的Pager类: 自动帮业务开发者生成Pager的模板代码
• 下载jdk 17并配置环境变量

使用KMP提供的KDoctor检查环境(仅限Mac用户)

注意：这一步为检查本地的环境是否满足KMP的环境要求，非必需执行。

安装kdoctor，在命令行执行：

brew install kdoctor 

安装完毕后，命令行输入kdoctor, 检查环境是否准备好

1.3 编写第一个Kuikly页面

1.3.1 新建Kuikly工程

使用Android Studio新建Kuikly工程。 File -> New -> New Project -> Kuikly Project Template

新建Kuikly工程

1.3.2 工程自动构建

若环境搭建无误，工程将自动构建，如遇以下问题，可根据解决方案进行处理并手动触发sync：

Gradle安装依赖失败

如果遇到Gradle版本不匹配情况，请将Gradle版本切换成7.x(如7.5.1)。

File -> Project Structure -> Project -> Gradle Version

如果Gradle版本低于7.4.1会出现报错，需要在根目录 setting.gradle.kts 添加 enableFeaturePreview("VERSION_CATALOGS")

找不到pod程序

确保iOS运行环境安装无误

没有启动配置

工程构建完以后没有提供预设的启动配置，一般是由于之前出现异常导致的，解决异常后重新sync即可

1.3.3 运行androidApp

运行后，可以看到Kuikly的初始化页面

说明环境搭建正确无误！

1.3.4 运行iOSApp

如果是首次运行iOS的话，需要先进入iosApp目录，执行pod install --repo-update，并将运行的scheme改为iosApp。

插件自动创建的工程iosApp在编译时会执行KMP脚本，如果遇到脚本读写文件权限报错，需要在Xcode -> Build Setting中将User Script Sandboxing设置为No

1.3.5 运行鸿蒙App

注意：

当前kuikly鸿蒙跨端产物仅支持Mac编译，Windows可以使用编译好的跨端产物运行Ohos宿主APP

若想通过插件生成Ohos工程，需要更新插件至1.1.0版本以上

如果是首次运行Ohos的话，需要用鸿蒙DevEco-Studio打开ohosApp目录，若初次打开鸿蒙IDEsync出错，打开ohosApp目录下的.npmrc文件，右上角点击sync重新sync即可

在运行之前App之前，需要执行签名操作 File -> Project Structure -> Signing Configs

可以选择在 DevEco-Studio 内运行 或 Android Studio 内运行ohosApp

1.3.6 开始编写代码

我们来看如何使用 Kuikly 编写经典 HelloWorld

在share/src/commonMain/kotlin/xxx.xxx.xxx/ 目录下新建 pages 目录并创建HelloWorldPage类

接着我们让HelloWorldPage继承Pager, 并重写body方法

internal class HelloWorldPage : Pager() {

    override fun body(): ViewBuilder {
    }
}
 

在body方法中，我们添加一个居中的Text组件

internal class HelloWorldPage : Pager() {

    override fun body(): ViewBuilder {
        return {
            attr {
                allCenter()
            }

            Text {
                attr {
                    text("Hello Kuikly")
                    fontSize(14f)
                }
            }
        }
    }
}

接着我们在HelloWorldPage类加上@Page注解，指定Page的名字，供Kuikly在运行时创建该Page

@Page("HelloWorld")
internal class HelloWorldPage : Pager() {
    ...
}

完整的代码如下:

@Page("HelloWorld")
internal class HelloWorldPage : Pager() {

    override fun body(): ViewBuilder {
        return {
            attr {
                allCenter()
            }

            Text {
                attr {
                    text("Hello Kuikly")
                    fontSize(14f)
                }
            }
        }
    }
}

我们以Android平台作为效果演示，运行androidApp, 在Kuikly路由页面输入我们加在HelloWorldPage上的注解名字HelloWorld，最后点击跳转

最后，成功运行app并打印出“Hello，Kuikly”，我们的第一个Kuikly页面就搭建完成了！

可以看到，Kuikly整体的搭建和上手还是很快的，这也得益于全面的官方文档教程。同时，官方表示 Kuikly 对于 Android 的同学基本没有学习成本，只要使用过响应式开发的都能上手，而对于 iOS 同学而已，大概就是需要熟悉一下 Kotlin 语法，不过 Kotlin 和 Swift 相近度挺高，所以上手也不会太困难。那么，Kuikly会是你跨端的第一选择吗？