小程序構建骨架屏的探索

shiweifu 發(fā)布于2019-08-23 10:39 / 531人閱讀

摘要：第二套方案，一定程度上改善了第一套方案帶來的維護成本增加的缺點，主要還是使用工具預渲染頁面，獲取到節(jié)點和樣式，保留頁面結構，覆蓋樣式，生成灰色塊蓋在原有文本圖片或者是等節(jié)點上面，最后將生成的和打包出來，就是一個帶有骨架屏的頁面。

首屏

一般情況下，在首屏數(shù)據(jù)未拿到之前，為了提升用戶的體驗，會在頁面上展示一個loading的圖層，類似下面這個

其中除了菊花圖以外網(wǎng)上還流傳這各種各樣的loading動畫，在PC端上幾乎要統(tǒng)一江湖了，不過最近在移動端上面看到不同于菊花圖的加載方式，就是這篇文章需要分享的Skeleton Screen，中文稱之為"骨架屏"

概念

A skeleton screen is essentially a blank version of a page into which information is gradually loaded.

在H5中，骨架屏其實已經(jīng)不是什么新奇的概念了，網(wǎng)上也有各種方案生成對應的骨架屏，包括我們經(jīng)常使用的知乎、餓了么、美團等APP都有應用骨架屏這個概念

圖片來源網(wǎng)絡，侵刪

方案

先從H5生成骨架屏方案開始說起，總的來說H5生成骨架屏的方案有2種

完全靠手寫HTML和CSS方式給每個頁面定制一套骨架屏

利用預渲染的方式生成靜態(tài)骨架屏

第一套方案，毫無疑問是最簡單最直白的方式，缺點也很明顯，假如頁面布局有修改的話，那么除了修改業(yè)務代碼之外還需要額外修改骨架屏，增加了維護的成本。

第二套方案，一定程度上改善了第一套方案帶來的維護成本增加的缺點，主要還是使用工具預渲染頁面，獲取到DOM節(jié)點和樣式，保留頁面結構，覆蓋樣式，生成灰色塊蓋在原有文本、圖片或者是canvas等節(jié)點上面，最后將生成的HTML和CSS打包出來，就是一個帶有骨架屏的頁面。最后再利用webpack工具將生成的骨架屏插入到HTML里面，詳細的話可以看看餓了么的分享，這里就不多描述了。

調(diào)研了下H5生成骨架屏的方案，對于小程序生成骨架屏的方案也有了一個大致的想法，主要有2個難點需要實現(xiàn)

預渲染

獲取節(jié)點

預渲染

再說回餓了么提供的骨架屏的方案，使用 puppeteer 渲染頁面（或者使用服務端渲染，vue或者react都有提供相應的方案），拿到DOM節(jié)點和樣式，這里有一點需要注意的是，頁面的渲染是需要初始化的數(shù)據(jù)，數(shù)據(jù)的來源可以是初始化的data（vue）或者mock數(shù)據(jù)，當然小程序是無法直接使用 puppeteer 來做預渲染（有另外的方案可以實現(xiàn)），需要利用小程序初始化的 data + template 渲染之后得到一個初始化結構作為骨架屏的結構

//index.js
Page({
    data: {
        motto: "Hello World",
        userInfo: {
            avatarUrl: "https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132",
            nickName: "jay"
        },
        lists: [
            "aslkdnoakjbsnfkajbfk",
            "qwrwfhbfdvndgndghndeghsdfh",
            "qweqwtefhfhgmjfgjdfghaefdhsdfgdfh",
        ],
        showSkeleton: true
    },
    onLoad: function () {
        const that = this;
        setTimeout(() => {
            that.setData({
                showSkeleton: false
            })
        }, 3000)
    }
})

//index.wxml

    
        
            
            {{userInfo.nickName}}
        
    
    
        
            
            {{item}}
        
    

    
        {{motto}}
    

    
        aaaaaaaaaaa

有了上面的 data + template 之后，就有了一個初始化的頁面結構，接下來就需要拿到節(jié)點信息

節(jié)點

小程序基礎庫1.4.0之后小程序基礎庫提供了一組新的API，可用于獲取節(jié)點信息，具體API戳這里。
跟H5方式一樣，根據(jù)class或者id獲取節(jié)點信息，不同的是只能獲取到當前的節(jié)點信息，無法獲取到其父或者子節(jié)點信息，所以只能手動給需要渲染骨架屏的節(jié)點添加相應的class或者id


    
        
            
            {{userInfo.nickName}}
        
    
    
        
            
            {{item}}
        
    

    
        {{motto}}
    

    
        aaaaaaaaaaa

約定2個特殊的class作為獲取節(jié)點信息的標記skeleton-rect和skeleton-radius，在頁面中獲取相應的top、left、width、height進行骨架屏的繪制

結果

具體的調(diào)用方式和源碼，請看 github ，最后求start

總結

上文有說到小程序也可以使用 page-skeleton-webpack-plugin 方式一樣生成骨架屏，最重要的一點就是需要將小程序跑在chrome上面，后面的流程就一樣了，至于怎么將小程序跑在chrome上面呢？可以利用 wept ，缺點就是目前作者已經(jīng)停止維護這個工具了，不支持新版小程序的API。
說回來我這個生成骨架屏的方案，其實跟 page-skeleton-webpack-plugin 有點相似，不同的是，page-skeleton-webpack-plugin 采用離線渲染的方式生成靜態(tài)骨架屏插入路由中，而我采用運行時先渲染頁面默認結構，然后根據(jù)默認結構再繪制骨架屏。從性能角度出發(fā)確實不如 page-skeleton-webpack-plugin，但是也差不了多少了，主要還是小程序并沒有提供類似服務端渲染的方案。目前從使用上來講，還是有點小麻煩，需要默認數(shù)據(jù)撐開頁面結構，需要給相應的節(jié)點添加class，后面有時間再研究下有沒有更好的方案吧~~~

云服務器 GPU云服務器構建微信小程序服務器騰訊云數(shù)據(jù)庫應用程序構建器不黑屏的云服務器小程序小程序

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96561.html

前端骨架屏方案小結

摘要：常用于文章列表動態(tài)列表頁等相對比較規(guī)則的列表頁面。很多項目中都有應用餓了么版本知乎等網(wǎng)站中都有應用。歡迎討論，點個贊再走吧骨架屏最近在項目不時有用到骨架屏的需求,所以抽時間對骨架屏的方案作了一下調(diào)研,骨架屏的實踐已經(jīng)有很多了,也有很多人對自己的方案作了介紹.在這里按照個人的理解做了一個匯總和分類,分享給大家. 關于骨架屏(簡介) 骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大...

IntMain 2019-08-29 16:58 評論0 收藏0
前端骨架屏方案小結

摘要：常用于文章列表動態(tài)列表頁等相對比較規(guī)則的列表頁面。很多項目中都有應用餓了么版本知乎等網(wǎng)站中都有應用。歡迎討論，點個贊再走吧骨架屏最近在項目不時有用到骨架屏的需求,所以抽時間對骨架屏的方案作了一下調(diào)研,骨架屏的實踐已經(jīng)有很多了,也有很多人對自己的方案作了介紹.在這里按照個人的理解做了一個匯總和分類,分享給大家. 關于骨架屏(簡介) 骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大...

TerryCai 2019-08-02 11:42 評論0 收藏0
前端骨架屏方案小結

摘要：常用于文章列表動態(tài)列表頁等相對比較規(guī)則的列表頁面。很多項目中都有應用餓了么版本知乎等網(wǎng)站中都有應用。歡迎討論，點個贊再走吧骨架屏最近在項目不時有用到骨架屏的需求,所以抽時間對骨架屏的方案作了一下調(diào)研,骨架屏的實踐已經(jīng)有很多了,也有很多人對自己的方案作了介紹.在這里按照個人的理解做了一個匯總和分類,分享給大家. 關于骨架屏(簡介) 骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大...

MasonEast 2019-08-23 12:22 評論0 收藏0
Skeleton Screen -- 骨架屏

摘要：原文鏈接骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結構，直到請求數(shù)據(jù)返回后再渲染頁面，補充進需要顯示的數(shù)據(jù)內(nèi)容。請求處理無論是端還是移動端，只要有數(shù)據(jù)請求都會出現(xiàn)一定的延遲時間，之前對于這段等待時間的處理也是各不相同。 showImg(https://segmentfault.com/img/bV9l7N?w=700&h=312);用戶體驗一直是前端開發(fā)需要考慮的重要部分，...

waterc 2019-08-22 16:41 評論0 收藏0
Skeleton Screen -- 骨架屏

摘要：原文鏈接骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結構，直到請求數(shù)據(jù)返回后再渲染頁面，補充進需要顯示的數(shù)據(jù)內(nèi)容。請求處理無論是端還是移動端，只要有數(shù)據(jù)請求都會出現(xiàn)一定的延遲時間，之前對于這段等待時間的處理也是各不相同。用戶體驗一直是前端開發(fā)需要考慮的重要部分，在數(shù)據(jù)請求時常見到鎖屏的loading動畫，而現(xiàn)在越來越多的產(chǎn)品傾向于使用Skeleton Screen Load...

shmily 2019-08-29 14:15 評論0 收藏0