stevenjoezhang / live2d-widget

把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform
https://zhangshuqiao.org/2018-07/在网页中添加Live2D看板娘
GNU General Public License v3.0
8.86k stars 2.4k forks source link

Needing A live widget for android home screen #163

Open Stretch379 opened 5 months ago

Stretch379 commented 5 months ago

shared_report.png

nicocatxzc commented 3 months ago

shared_report.png

Change the code of loading parts of "autoload.js" to this:

//判断移动端用户方法
function isMobile() {
    var userAgent = navigator.userAgent || window.opera;

    if (/android/i.test(userAgent) || /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return true;
    }
}
// 加载 waifu.css live2d.min.js waifu-tips.js
if (isMobile()) {
    //移动端用户
    Promise.all([
        loadExternalResource(live2d_path + "waifu-mobie.css", "css"),
        loadExternalResource(live2d_path + "live2d.min.js", "js"),
        loadExternalResource(live2d_path + "waifu-tips.js", "js")
    ]).then(() => {
        // 配置选项的具体用法见 README.md
        initWidget({
            waifuPath: live2d_path + "waifu-tips.json",
            //apiPath: "https://live2d.fghrsh.net/api/",
            cdnPath: "**Your javascript path**",
            tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
        });
    });
} else {
    //pc端用户
    Promise.all([
        loadExternalResource(live2d_path + "waifu.css", "css"),
        loadExternalResource(live2d_path + "live2d.min.js", "js"),
        loadExternalResource(live2d_path + "waifu-tips.js", "js")
    ]).then(() => {
        initWidget({
            waifuPath: live2d_path + "waifu-tips.json",
            //apiPath: "https://live2d.fghrsh.net/api/",
            cdnPath: "**Your javascript path**",
            tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
        });
    });
}  

Then,copied the waifu.css and edit the part of it into this:

#waifu-toggle {
    background-color: #fa0;
    border-radius: 5px;
    bottom: 10px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    left: -10px;
    margin-left: -100px;
    padding: 5px 2px 5px 5px;
    position: fixed;
    transition: margin-left 1s;
    width: 30px;
    writing-mode: vertical-rl;
}

And then renamd it into "waifu-mobie.css" for phone visitors to load it and show the live widget.