编写第一个Kuikly页面

注意

在此之前请确保已经完成Kuikly环境搭建，如还未搭建环境，请移步环境搭建文档

新建Kuikly工程

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

新建Kuikly工程

工程自动构建

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

Gradle安装依赖失败

Gradle版本不匹配，切换成7.x(如7.5.1)。 File -> Project Structure -> Project -> Gradle Version

找不到pod程序

参照环境搭建文档，确保iOS运行环境安装无误或者已注释相关构建逻辑(忽略iOS编译打包)

没有启动配置

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

运行androidApp

1. 接着运行androidApp

运行AndroidApp

2. 当手机出现以下页面时，说明已经成功运行androidApp

运行iosApp

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

3. 运行iosApp

运行iosApp

4. 当手机出现下面界面时，说明已运行成功

开始编写代码

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

1. 在share/src/commonMain/kotlin/xxx.xxx.xxx/ 目录下新建 pages 目录并创建HelloWorldPage类
2. 接着我们让HelloWorldPage继承Pager, 并重写body方法

internal class HelloWorldPage : Pager() {

    override fun body(): ViewBuilder {
    }
}

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

internal class HelloWorldPage : Pager() {

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

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

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

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

5. 完整的代码如下:

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

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

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

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

7. 最后的运行效果:

更多示例

Kuikly源码工程，根目录下demo工程模块，提供了丰富的可体验Demo供日常体验和开发参考。 demo工程模块需要编译源码方可进行体验。 可参考Readme 源码编译构建步骤，编译源码中提供的各平台APP Demo进行体验。

APP原型Demo

组件Demo

同时，demo工程模块，也提供了框架各个组件的样式和属性的使用Demo。

下一步

• 如果你的应用还没接入Kuikly的话，建议先移步Kuikly接入，查看如何将Kuikly接入您的应用。
• 如果您的应用已经接入Kuikly，那么建议您继续浏览Kuikly教程，从理解Kuikly中的Pager概念开始