来和我一起瞧瞧元气壁纸库里的动态壁纸叭

小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

本文已参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金。

最近电脑安装了 lively wallpaper 后可以跑动态壁纸，但是这资源有点感人，只能想办法自谋出路。功夫不负有心人（我也不知道咋发现的），元气壁纸居然对资源不加门槛，只要去看就随便下？资源直接明文路径拉了就跑，简直了

元气壁纸动态资源

不过，在用的时候发现一个蛋疼的细节，资源只加载了首屏共 24 个？？调试请求发现总计 777 个？大哥，你的下一页呢？？这怕不是耍猴的宗师吧？

老规矩，资源走的 search 接口，右键请求复制为 fetch，拉到控制台改改

ok，首屏的资源解析出来了，顺带看到了分页的参数，改个页码看看是否可用

好~的，接口正常，他们家的前端真是逆了大天

这种玩法看着难受，资源全部在控制台输出，根本没法好好看，那就只能帮忙打一个补丁了咯

增强后的代码如下：

function search(page) {
    let key = document.getElementsByClassName('nav-item-input')[0].value;
    fetch("https://pcwallpaper.zhhainiao.com/v20526/wplive/search", {
        "headers": {
            "accept": "application/json, text/plain, */*",
            "accept-language": "zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7",
            "content-type": "application/json;charset=UTF-8",
            "sec-ch-ua": "\"Google Chrome\";v=\"95\", \"Chromium\";v=\"95\", \";Not A Brand\";v=\"99\"",
            "sec-ch-ua-mobile": "?0",
            "sec-ch-ua-platform": "\"Windows\"",
            "sec-fetch-dest": "empty",
            "sec-fetch-mode": "cors",
            "sec-fetch-site": "cross-site"
        },
        "referrer": "https://bizhi.cheetahfun.com/",
        "referrerPolicy": "strict-origin-when-cross-origin",
        "body": `{"kw":"${key}","page":${page},"pageSize":24}`,
        "method": "POST",
        "mode": "cors",
        "credentials": "omit"
    }).then(r=>r.json()).then(d=>{
        let childs = document.getElementsByClassName('wallpaper-wrapper')[0].children;
        d.data.list.forEach((n,i)=>{
            let child = childs[i];
            child.getElementsByTagName('img')[0].setAttribute('src', n.preview_jpg);
            child.getElementsByTagName('video')[0].setAttribute('src', n.preview_video);
        })
    })
}
document.getElementsByClassName('paging-btn-next')[0].onclick = function() {
    console.log('111')
    let curr = document.getElementsByClassName('paging-item-active')[0].getElementsByTagName('a')[0].text;
    curr++;
    document.getElementsByClassName('paging-item-active')[0].getElementsByTagName('a')[0].text = curr;
    search(curr)
}

总结起来就是，让他的下一页按钮终于有了应有的作用，每次加载下一页，都会修改当前页面的资源配图和链接，由于是走的 search 接口，所以会使用页面右上角搜索的内容作为接口的请求参数

当然，代码部分可能也会有不到位的地方，欢迎大佬指出~