小程序构建骨架屏的探索-贵阳小程序开发_app开发_微商城/分销系统开发_h5网站开发建设-企驴云科技有限公司

小程序构建骨架屏的探索

发布时间: 浏览:343

        在H5中,骨架屏其实已经不是什么新奇的概念了,网上也有各种方案生成对应的骨架屏,包括我们经常使用的知乎、饿了么、美团等APP都有应用骨架屏这个概念。

                                        {{item}}                        {{motto}}                aaaaaaaaaaa

约定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,后面有时间再研究下有没有更好的方案吧~~



TAG