我家小花儿

这个屌丝很懒，什么也没留下！

热门标签

用Kotlin创建你的第一个Web页面_kotlin写前端

作者：我家小花儿 | 2024-05-16 23:51:09

踩

kotlin写前端

Kotlin可以开发Android, IOS, JavaScript和后端，是不是很激动？一门语言统一世界有木有～今天就写一篇傻瓜式教程，让你轻松学会用Kotlin开发Web页面。

环境准备

IntelliJ 2017.3.4 Ultimate Edition
Kotlin 1.2.3
Java 1.8
macOS Sierra 10.12.6

创建工程

1.png

2.png

3.png

创建好以后的空项目目录是这样的：

4.png

build.gradle文件的内容如下：


buildscript {
    ext.kotlin_version = '1.2.30'
 
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}
 
group 'com.jiang.yanghai'
version '1.0-SNAPSHOT'
 
apply plugin: 'java'
apply plugin: 'kotlin2js'
 
sourceCompatibility = 1.8
 
repositories {
    mavenCentral()
}
 
dependencies {
    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    testCompile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version"
    testCompile group: 'junit', name: 'junit', version: '4.12'
}

创建文件

创建包名com.jiang.yanghai，并创建Main.kt


package com.jiang.yanghai
 
fun main(args: Array<String>) {
}

在resources目录下创建创建index.html，内容如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kotlin JavaScript Example</title>
</head>
<body>
 
<div id="root"></div>
 
</body>
</html>

我们会用到kotlinx:kotlinx-html-js这个库，所以在build.gradle的dependency中加入

compile "org.jetbrains.kotlinx:kotlinx-html-js:0.6.9"

Tips:

使用默认配置，你不一定能够下载这个库，所以如果你遇到问题请将 mavenCentral()改为jcenter()

另外我所用的环境会遇到依赖下载下来但是在编译的时候依然出现 can not find org.jetbrains.kotlinx:kotlinx-html-js:0.6.9的错误，在Project Structure中将对应的依赖库先删除然后再下载一次依赖，即可解决

6.png

好啦，一切准备就绪，我们可以开始写代码咯！

编码

我们在Main.kt中加入一下代码


package com.jiang.yanghai
 
import kotlinx.html.*
import kotlinx.html.dom.create
import kotlinx.html.js.onClickFunction
import kotlin.browser.document
 
fun main(args: Array<String>) {
    // get the root tag of html file
    var root = document.getElementById("root")
    //  create a div tag which contains a h1 tag and a button
    var div = document.create.div {
        h1() {
            + "Hello JavaScript"
        }
        button(classes = "btn") {
            + "Click Me!"
            onClickFunction = { println("Clicked!!!")}
        }
    }
    // add div tag to root
    root!!.appendChild(div)
}

在resources目录下创建创建styles/main.css，内容如下：


.btn {   // 这是为了告诉你如何显示的设置class
    color: red;
}
 
h1 {  // 隐式设置class
    color: blue;
}

在build.gradle文件中加入以下内容


sourceSets.main {
    kotlin.srcDirs += 'src/main/kotlin'
    resources.srcDirs += 'src/main/resources'
}

编译

注意：这里编译分为两种形式，第一种点击 Build > Build Project，第二种使用gradle build 或者点击Gradle面板中的Tasks下面的build任务，我猜可能是目前Intellij对Kotlin支持方面的问题，这两种编译行为的结果是不太一样的。因此对应的index.html的写法也会稍微的有点不一样，这是因为我们要在index.html中去引用编译出来的js文件。

使用第一种方式编译，会在项目路径下生成out目录

7.png

要让页面正确展示，我们需要将index.html的内容写成这样：


<!DOCTYPE html>
<html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sample Default</title>
    <link rel="stylesheet" href="styles/main.css">  // css文件
</head>
 
<body id="BODY">
<h1>Hello World</h1>
<div id="root"/>
 
<script type="text/javascript" src="../classes/lib/kotlin.js"></script>  // kotlin javascript标准库文件
<script type="text/javascript" src="../classes/lib/kotlinx-html-js.js"></script>  // kotlinx-html 库文件
<script type="text/javascript" src="../classes/KotlinJSExample_main.js"> </script>  //  Main.kt编译出来的 js 文件
</body>
</html>

好了，到这里你已经可以在浏览器打开index.html文件看看效果啦！大功告成！

点击按钮可以在console中看到打印出来的信息Clicked!!!

8.png

使用第二种方式编译会比较复杂一点，但能让我们能更好的控制编译过程和产出的产品目录，所以有必要掌握！

首先在build.gradle中加入以下内容

注意：经过笔者的亲测，这里的moduleKind只能选择 umd，否则编译出来的js文件无法正常运行！


 
compileKotlin2Js {
    kotlinOptions.outputFile = "${projectDir}/web/scripts/main.js"
    kotlinOptions.moduleKind = "umd"  //这里注意哦，一定是umd
    kotlinOptions.sourceMap = true
}
 
build.doLast() {
    // Copy kotlin.js and kotlin-meta.js from jar into web directory
    configurations.compile.each { File file ->
        copy {
            includeEmptyDirs = false
 
            from zipTree(file.absolutePath)
            into "${projectDir}/web/lib"
            include { fileTreeElement ->
                def path = fileTreeElement.path
                path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/"))
            }
        }
    }
    
    // Copy resources to web directory
    copy {
        includeEmptyDirs = false
        from new File("src/main/resources")
        into "web"
    }
}

接着我们需要修改index.html文件的内容如下


<!DOCTYPE html>
<html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sample Default</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
 
<body id="BODY">
<h1>Hello World</h1>
<div id="root"/>
 
<script type="text/javascript" src="lib/kotlin.js"></script>
<script type="text/javascript" src="lib/kotlinx-html-js.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>

这样编译出来的目录包含两部分，下半部分就可以作为最终的产品部署到服务器上！

9.png

打开浏览器试试吧！

后记

这篇文章中讲的是使用纯kotlin库开发web页面，其实目前JetBrains官方已经适配了React，kotlin-wrappers 就是github上的代码，并且还发布了一个工具包create-react-kotin-app，对于做前端开发的你，这名字是不是很眼熟？后续我会写一篇教程讲讲如何用Kotlin开发React应用。

转载地址：https://www.jianshu.com/p/df38cfb89838

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/580962