前端骨架屏

什么时候需要用到前端骨架屏呢？ 其实就是在首页还没完全加载出来，可以先把骨架屏弄出来，避免白屏给用户造成不好的用户体验。那么具体是要如何去弄出来呢？设置Dps.config.js，配置如下：

其中url字段输入待生成骨架屏页面的地址，比如百度（https://baidu.com）也可以。output主要代表输出。其中filepath代表生成骨架屏的存放页面，一般为项目的入口页面；然后injectSelector代表插入页面的某个节点。includeElement用于定制或排除某些节点的绘制行为，其中通过id来定位，比如需不需要在这个id上渲染。还能判断tagName是什么的时候，渲染什么。init的作用是生成骨架屏之前的操作，比如删除干扰节点。

基本配置字段说明

  const dpsConfig = {
    url: 'file:///Users/myname/Desktop/project/pro/scaleTips/dist/index.html#/',     
     // 待生成骨架屏页面的地址，用百度（https://baidu.com）试试也可以
    output: {
        filepath: '/Users/myname/Desktop/project/pro',
        // 生成骨架屏的存放页面，一般为项目的入口页面
        injectSelector: '#app'  
        // 生成的骨架屏插入页面的节点
    },
    // header: {
    //  height: 40,
    //  background: '#1b9af4'
    // },
    // background: '#eee',
    // 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;