国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小程序構(gòu)建骨架屏的探索

shiweifu / 536人閱讀

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

首屏

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

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

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

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

圖片來(lái)源網(wǎng)絡(luò),侵刪

方案

先從H5生成骨架屏方案開(kāi)始說(shuō)起,總的來(lái)說(shuō)H5生成骨架屏的方案有2種

完全靠手寫(xiě)HTML和CSS方式給每個(gè)頁(yè)面定制一套骨架屏

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

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

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

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

預(yù)渲染

獲取節(jié)點(diǎn)

預(yù)渲染

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

//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 之后,就有了一個(gè)初始化的頁(yè)面結(jié)構(gòu),接下來(lái)就需要拿到節(jié)點(diǎn)信息

節(jié)點(diǎn)

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


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

    
        {{motto}}
    

    
        aaaaaaaaaaa
    

約定2個(gè)特殊的class作為獲取節(jié)點(diǎn)信息的標(biāo)記skeleton-rectskeleton-radius,在頁(yè)面中獲取相應(yīng)的topleftwidthheight進(jìn)行骨架屏的繪制

結(jié)果

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

總結(jié)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/96561.html

相關(guān)文章

  • 前端骨架屏方案結(jié)

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

    IntMain 評(píng)論0 收藏0
  • 前端骨架屏方案結(jié)

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

    TerryCai 評(píng)論0 收藏0
  • 前端骨架屏方案結(jié)

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

    MasonEast 評(píng)論0 收藏0
  • Skeleton Screen -- 骨架

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

    waterc 評(píng)論0 收藏0
  • Skeleton Screen -- 骨架

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

    shmily 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<