小程序開發

思捷智聯 > 小程序開發 > 小程序構建骨架屏的探索

小程序構建骨架屏的探索

編輯時間:06-04 17:27 瀏覽次數:32

首屏

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

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

概念

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

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

圖片來源網絡,侵刪

方案

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

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

  2. 利用預渲染的方式生成靜態骨架屏

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

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

調研了下H5生成骨架屏的方案,對于小程序生成骨架屏的方案也有了一個大致的想法,主要有2個難點需要實現

  1. 預渲染

  2. 獲取節點

預渲染

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

//index.jsPage({	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<view class="container">    <view class="userinfo">
        <block>
            <image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
                   mode="cover"></image>
            <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
        </block>
    </view>
    <view style="margin: 20px 0">        <view wx:for="{{lists}}" class="lists">
            <icon type="success" size="20" class="list skeleton-radius"/>
            <text class="skeleton-rect">{{item}}</text>
        </view>
    </view>

    <view class="usermotto">        <text class="user-motto skeleton-rect">{{motto}}</text>
    </view>

    <view style="margin-top: 200px;">
        aaaaaaaaaaa
    </view></view>

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

節點

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

<view class="container">    <view class="userinfo">
        <block>
            <image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
                   mode="cover"></image>
            <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
        </block>
    </view>
    <view style="margin: 20px 0">        <view wx:for="{{lists}}" class="lists">
            <icon type="success" size="20" class="list skeleton-radius"/>
            <text class="skeleton-rect">{{item}}</text>
        </view>
    </view>

    <view class="usermotto">        <text class="user-motto skeleton-rect">{{motto}}</text>
    </view>

    <view style="margin-top: 200px;">
        aaaaaaaaaaa
    </view></view>

約定2個特殊的class作為獲取節點信息的標記skeleton-rectskeleton-radius,在頁面中獲取相應的topleftwidthheight進行骨架屏的繪制

結果

具體的調用方式和源碼,請看 github ,最后求start

總結

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

免責聲明:我司網站轉載此文,不代表本網的觀點和立場。不以盈利為目的,如有侵犯公司或個人權益,我司會第一時間刪除文章,歡迎咨詢免費獲取思維導圖!
    相關閱讀
感受專業服務,從來電咨詢開始
15821967367158-2196-7367
cache
Processed in 0.006154 Second.
浙江20选5几点开奖