前言
在Compose跨平台第一弹:体验Compose for Desktop 中,我们已经了解了Compose-jb以及如何使用Compose-jb开发简单的桌面端应用,第二弹,我们就来了解下如何使用Compose-jb开发Web应用。相信看完这一弹之后你会对Compose-jb有新的了解。
环境要求
与Compose For Desktop的环境要求一致。
开发流程
创建项目
同样的,我们打开IDEA创建Compose Multiplatform项目,选择Single plaform,不过这里我们选择Platform为Web平台,如下图所示。
创建好项目后,来看项目目录结构,如下图所示。
可以看到同样的在配置文件中指定了平台配置,这一点是比较重要的,便于以后我们在原有项目基础上添加配置。并且以后我们会发现,这个配置也不一定在根目录中的build文件中,所以我们需要知道配置的含义,这一点目前规划在后续的弹中会单独分享。
项目结构
在jsMain文件夹下Main文件通过renderComposable的rootElementId属性与index.html中的div标签绑定,从而将页面在web中显示。index.html代码截图如下所示。
Main.kt代码截图如下所示。
当我看到这段代码之后,我心里是慌的,Div?style?attrs?这都是什么玩意啊,学了Compose的我都不知道,这也能叫跨平台?
这是Compose for Web专门提供的一套DOM API,Div组件也是为Web实现的对应Composeable组件,通过attrs方法设置标签属性。所以这些代码,都是无法直接在Android或Desktop平台上复用的。所以,从这一点来讲使用Compose实现跨平台,目前存在严重的割裂问题,和Flutter相比还是有一定的差距。
运行程序(./gradlew jsBrowserRun),页面如下图所示。
这是项目默认实现的一个加减计数器的功能。接下来我们来添加自己的组件。
添加输入框
和开发Desktop一样,我们先来添加一个输入框,在Compose for Web中输入框采用Input组件
,代码如下所示:
renderComposable(rootElementId = "root") {
Div {
P {
Input(type = InputType.Text) {}
}
P {
Input(type = InputType.Password)
}
P {
Button(attrs = {
onClick {
}
}) {
Text("Login")
}
}
}
}
通过type属性指定输入框的类别分别为文字和密码,运行程序,结果如下图所示。
接着我们通过添加Text标签为输入框添加属性说明,修改部分的代码如下所示:
P {
Text("用户名")
Input(type = InputType.Text) {}
}
P {
Text("密码")
Input(type = InputType.Password)
}
再次运行程序,结果如下图所示。
嗯,挺丑的。上述代码我们在最外层使用Div包裹是为了便于为这块区域设置一些属性,比如我们设置背景色为蓝色,代码如下所示。
Div({style {
backgroundColor(Color.blue)
}}){
...
}
运行程序,结果如下所示。
好吧,更丑了... , Compose for Web 允许开发者基于 DSL 定义 Style 样式,但是到目前为止我的感觉是写的很累,感觉如果不会Web就无法写好Compose for Web,这叫哪门子的跨平台?
添加超链接
超链接直接使用A标签即可,比如这里我们添加一个用户隐私协议,代码如下所示。
P {
A("https://www.baidu.com/") {
Text("用户协议")
}
}
运行程序,结果如下图所示。
如果想用Compose写好Web,我觉得最主要的是Style DSL,但是在这里我们没办法一一展示。需要我们在项目中去实战。接下来,我们来实现与Desktop一样的查询数据功能。
实现查询数据功能
本来打算仍然借用「wanandroid」中「每日一问」接口的,但是这个接口存在跨域问题,导致无法请求,所以我们这里将接口返回的json数据,定义为Api文件中的data变量,Ktor的使用方式是一样的,所以并不影响实际结果。
定义HttpUtil类并实现getData方法,代码如下所示。
class HttpUtil {
/**
* 获取数据
*/
suspend fun getData(): DemoReqData {
val rockets = Json.decodeFromString<DemoReqData>(string = Api.data)
return rockets
}
}
在Desktop中我们可以直接在Main 文件中直接调用取数据的方法,但是这里不行,因为renderComposable下无法启动协程。所以这里我们定义一个DataSource类继承自CoroutineScope,同样定义一个loadData方法,代码如下所示。
class DataSource : CoroutineScope {
private var job = Job()
override val coroutineContext: CoroutineContext
get() = job
private val _stateFlow = MutableStateFlow(DemoReqData())
var stateFlow = _stateFlow.asStateFlow()
fun loadData() {
launch {
_stateFlow.value = HttpUtil().getData()
}
}
}
这样我们可以在loadData方法中启动协程并调用HttpUtil中的getData方法,然后赋值给stateFlow,这一点得益于Flow 是 kotlinx 包下的组件,与平台无关。
最后,我们在Main中定义一个按钮,点击“请求数据”,然后将数据显示出来,代码如下所示。
renderComposable(rootElementId = "root") {
val dataSource = DataSource()
val data = dataSource.stateFlow.collectAsState()
Button(attrs = {
onClick {
dataSource.loadData()
}
}) {
Text("请求数据")
}
Div {
repeat(data.value.data?.datas?.size ?: 0) {
Div {
P {
Text("作者:" + data.value.data?.datas?.get(it)?.author)
}
P {
Text("标题:" + data.value.data?.datas?.get(it)?.title)
}
P({
style {
height(1.px)
backgroundColor(Color.red)
}
}) {}
}
}
}
}
这里将作者信息与标题显示出来,为了效果明显添加了一个红色的横线,运行程序,点击“请求数据”,结果如下图所示。
这样我们就使用Compose实现了一个Web端简单的查询数据功能。
写在最后
Compose For Web 中提供了更贴近 HTML 风格的 Composable API,所以UI代码无法与Android或Desktop的UI代码直接复用。但是逻辑层的代码都是可以共用的,目前Google也在推进解决这样的“割裂”问题,从目前来看,Compose跨平台还有一定的路要走,我们将在后续的第N弹中持续探索...