小程序骨架屏怎么開發(fā),小程序骨架效果如何實(shí)現(xiàn)
一般情況下,在首屏數(shù)據(jù)未拿到之前,為了提升用戶的體驗(yàn),會(huì)在頁面上展示一個(gè)loading的圖層。就是這篇文章需要分享的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)上也有各種方案生成對應(yīng)的骨架屏,包括我們經(jīng)常使用的知乎、餓了么、美團(tuán)等APP都有應(yīng)用骨架屏這個(gè)概念
方案先從H5生成骨架屏方案開始說起,總的來說H5生成骨架屏的方案有2種
- 完全靠手寫HTML和CSS方式給每個(gè)頁面定制一套骨架屏
- 利用預(yù)渲染的方式生成靜態(tài)骨架屏
第一套方案,毫無疑問是最簡單最直白的方式,缺點(diǎn)也很明顯,假如頁面布局有修改的話,那么除了修改業(yè)務(wù)代碼之外還需要額外修改骨架屏,增加了維護(hù)的成本。
第二套方案,一定程度上改善了第一套方案帶來的維護(hù)成本增加的缺點(diǎn),主要還是使用工具預(yù)渲染頁面,獲取到DOM節(jié)點(diǎn)和樣式,保留頁面結(jié)構(gòu),覆蓋樣式,生成灰色塊蓋在原有文本、圖片或者是canvas等節(jié)點(diǎn)上面,最后將生成的HTML和CSS打包出來,就是一個(gè)帶有骨架屏的頁面。最后再利用webpack工具將生成的骨架屏插入到HTML里面,詳細(xì)的話可以看看餓了么的分享,這里就不多描述了。
調(diào)研了下H5生成骨架屏的方案,對于小程序生成骨架屏的方案也有了一個(gè)大致的想法,主要有2個(gè)難點(diǎn)需要實(shí)現(xiàn)
- 預(yù)渲染
- 獲取節(jié)點(diǎn)
再說回餓了么提供的骨架屏的方案,使用 puppeteer 渲染頁面(或者使用服務(wù)端渲染,vue或者react都有提供相應(yīng)的方案),拿到DOM節(jié)點(diǎn)和樣式,這里有一點(diǎn)需要注意的是,頁面的渲染是需要初始化的數(shù)據(jù),數(shù)據(jù)的來源可以是初始化的data(vue)或者mock數(shù)據(jù),當(dāng)然小程序是無法直接使用 puppeteer 來做預(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 <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 之后,就有了一個(gè)初始化的頁面結(jié)構(gòu),接下來就需要拿到節(jié)點(diǎn)信息
節(jié)點(diǎn)
小程序基礎(chǔ)庫1.4.0之后小程序基礎(chǔ)庫提供了一組新的API,可用于獲取節(jié)點(diǎn)信息,具體API戳這里。
跟H5方式一樣,根據(jù)class或者id獲取節(jié)點(diǎn)信息,不同的是只能獲取到當(dāng)前的節(jié)點(diǎn)信息,無法獲取到其父或者子節(jié)點(diǎn)信息,所以只能手動(dòng)給需要渲染骨架屏的節(jié)點(diǎn)添加相應(yīng)的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個(gè)特殊的class作為獲取節(jié)點(diǎn)信息的標(biāo)記skeleton-rect和skeleton-radius,在頁面中獲取相應(yīng)的top、left、width、height進(jìn)行骨架屏的繪制
具體的調(diào)用方式和源碼,請看 github ,最后求start
總結(jié)
上文有說到小程序也可以使用 page-skeleton-webpack-plugin 方式一樣生成骨架屏,最重要的一點(diǎn)就是需要將小程序跑在chrome上面,后面的流程就一樣了,至于怎么將小程序跑在chrome上面呢?可以利用 wept ,缺點(diǎn)就是目前作者已經(jīng)停止維護(hù)這個(gè)工具了,不支持新版小程序的API。
說回來我這個(gè)生成骨架屏的方案,其實(shí)跟 page-skeleton-webpack-plugin 有點(diǎn)相似,不同的是,page-skeleton-webpack-plugin 采用離線渲染的方式生成靜態(tài)骨架屏插入路由中,而我采用運(yùn)行時(shí)先渲染頁面默認(rèn)結(jié)構(gòu),然后根據(jù)默認(rèn)結(jié)構(gòu)再繪制骨架屏。從性能角度出發(fā)確實(shí)不如 page-skeleton-webpack-plugin,但是也差不了多少了,主要還是小程序并沒有提供類似服務(wù)端渲染的方案。目前從使用上來講,還是有點(diǎn)小麻煩,需要默認(rèn)數(shù)據(jù)撐開頁面結(jié)構(gòu),需要給相應(yīng)的節(jié)點(diǎn)添加class,后面有時(shí)間再研究下有沒有更好的方案吧~~~
第二部分:如何開通一個(gè)小商店