微信小程序电商实战-骨架屏实现

本文章是一个系列文章，以一个完整的可用于生产的实际项目探索微信小程序开发中我们经常会遇到的问题，希望能提供完美的解决方案，这次是本系列文章的第二篇了，以下列出该系列文章链接。

微信小程序及h5，基于Taro，zoro最佳实践探索 
微信小程序电商实战-登录模块设计 
微信小程序电商实战-自定义顶部导航栏

工作忙碌，难得有时间继续开发研究这个项目，目前完成了，基础设施开发及首页得开发，话不多说，老规矩，先来看下效果吧

骨架屏效果演示.png

这是根据页面布局自动生成得骨架屏，目前非常流行的一种提升体验的办法 
为了能看到骨架屏的渲染，我调慢了所有接口的响应速度，因此演示响应较慢

整体效果还不错吧（沾沾自喜中～）

骨架屏的思路

骨架屏的实现思路相对较简单，使用方法也很方便 
我们知道微信小程序已经开发了选择器功能，可以利用此特性获取到dom节点，为了能让骨架屏组件知道该如何绘制，我们需要做如下约定：

约定.skeleton样式类为骨架屏查找绘制节点的根节点 
约定.skeleton-square样式类，表示绘制当前节点的骨架节点样式为方形（如商品卡片） 
约定.skeleton-circular样式类，表示绘制当前节点的骨架节点为圆形（如logo） 
约定.skeleton-cylinder样式类，表示绘制当前节点的骨架节点为长条形（如搜索框） 
约定.skeleton-light与.skeleton-dark为块元素背景骨架样式

骨架屏的使用

首先我们需要引入skeleton组件到页面中，并且在页面根元素上加上.skeleton样式

<View className={classNames(styles.home, 'skeleton')}>
  {initialize && <ComponentCommonSkeleton />}
然后在对应元素中加入不同的样式类，绘制骨架


eton-light'  {styles.header}>
eton-square'>
</View>
      每日推荐，超值抢购
</View>