Live2D看板娘-通过 WebView 写到Android 中,安卓版看娘来咯

本文链接：https://blog.csdn.net/As_thin/article/details/116495714

本文介绍了如何将HTML中的看娘功能通过Android的WebView控件引入，展示了如何在Android应用中实现实时交互，利用WebView展示HTML页面并利用JavaScript与模型进行互动的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无意间进入一个博客，被左下角的看娘给吸引了，感觉很高大上的感觉，而且还能互动，非常有趣。

经过面向百度操作，发现看娘功能的实现只需JS引入即可，无需自己添加操作（除自定义的那种）。

于是有一个大胆的想法----虽然看娘是在html 上实现的，但是Android 也支持 html ，只需通过WebView控件即可添加我们的html界面，并且只需通过Android调用web源生的方法就可以实现 Android 与 web端的交互，简直太方便了吧

各位看官先看效果图，我把界面放到右上角了，可随各位心意随便放置位置，满意的话继续往下看哦
在这里插入图片描述

话不多说，扛起键盘开始敲咯

首先要在web页面上实现看娘功能，然后通过Android 显示出来即可。

1.首先创建 assets 文件夹

右键-new-Folder-Assets Folder
然后新建一个www文件夹
然后把能够运行看娘的html文件放到里面
在这里插入图片描述
2.
把Activity设置为背景透明（这里需要注意MainActivity要继承Activity,否则会闪退哦）

 android:theme="@android:style/Theme.Translucent.NoTitleBar"

在这里插入图片描述
3.
设置xml文件，可以看到右上角为WebView 左上角，左下角，右下角，我分别设置了三个按钮，为了不影响整体效果，设置为透明色。

4.
为WebView控件添加本地界面即可显示可爱的小看娘咯

5.最后附上html的代码

<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>live2d模型</title>

    <style type="text/css">
		.rgba{
			background-color: rgba(0,0,0,1);
		}
		
	</style>
</head>

<body class="rgba">

</body>
<!-- 导入模型的脚本文件 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

<script>
    L2Dwidget.init({
        // 引用的模型
        "model": {
             jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json",
            //jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json",

            "scale": 1
        },
        // 模型的样式，可以自行更改
        "display": {
            "position": "right",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1,
            "opacityOnHover": 0.2
        }
    });
</script>



</html>