hsCBY 2019-10-22 10:58 采纳率: 0%
浏览 802

draw-page-structure 自动生成骨架屏

按照网上教程
全局安装,npm i draw-page-structure – g
dps init 生成配置文件 dps.config.js
修改 dps.config.js 进行相关配置
dps start 开始生成骨架屏


const dpsConfig = {
    url: 'https://baidu.com',      // 待生成骨架屏页面的地址,用百度(https://baidu.com)试试也可以
    output: {
        filepath: '/Users/zl/Desktop/demo/demo_/src/views/index.html',   // 生成骨架屏的存放页面,一般为项目的入口页面
        injectSelector: '#app'  // 生成的骨架屏插入页面的节点
    },
    background: 'red',
    animation: 'opacity 1s linear infinite;',
    includeElement: function(node, draw) {
        // 定制某个节点画出来的样子,带上return false
        if(node.id == 'ui-alert') {
            跳过该节点及其子节点
            return false;
        }
        if(node.tagName.toLowerCase() === 'img') {
            // 对该图片生成宽100%,高8%,颜色为红色的色块
            draw({
                width: 100,
                height: 8,
                left: 0,
                top: 0,
                zIndex: 99999999,
                background: 'red'
            });
            return false;
        } 
    },
    writePageStructure: function(html) {
        // 自己处理生成的骨架屏
        // fs.writeFileSync(filepath, html);
        // console.log(html)
    },
    init: function() {
        // 生成骨架屏之前的操作,比如删除干扰节点
    },
}


module.exports = dpsConfig;

这是我dps.config.js的配置

但是一键生成出来的index.html只有

<html>
<head>
    <style>
    </style>
</head>
<body>
    <div></div>
</body>
</html>

换了好几个网址都一样

说evalDom.js是核心函数,但是没介绍具体怎么用。。。新手求教

  • 写回答

1条回答 默认 最新

  • 技术青菜 2023-03-13 16:11
    关注

    1.你可能要先在dps start 之前,先把
    output 里面的 filepath
    这个路径重新确认一下,因为,这个路径里的文件必须包含id=“App”的标签
    要是不这样走,你的首页拿不到生成的骨架屏

    2.dps start 之后,你的id=“App”标签里面会有你生成的骨架屏,如果这一步他改变了你的入口文件内容,除了id=“App”标签里面用他改的以外,其他都要改回来,否则启动项目会报错

    评论

报告相同问题?

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)