骨架屏可以理解為是當數據還未加載進來前，頁面的一個空白版本，一個簡單的關鍵渲染路徑。可以看到在頁面完全渲染完成之前，用戶會看到一個樣式簡單，描繪了當前頁面的大致框架的骨架屏頁面，然后骨架屏中各個占位部分被實際資源完全替換，這個過程中用戶會覺得內容正在逐漸加載即將呈現，降低了用戶的焦躁情緒，使得加載過程主觀上變得流暢，如下圖：

　　微信小程序骨架屏主要分為兩種方案，下面來說說這兩種方案。

1、為每個需要使用骨架屏的頁面定制一套靜態頁面。

　　這種方法缺點很明顯，需要為每個頁面單獨定制，布局如果修改則需要同時修改兩個頁面，增加了維護成本。但這種特別適用于長列表，只需要做用戶可見的部分，可在一定程度上增加響應速度。

2、利用工具渲染頁面

　　獲取指定的DOM節點和對應樣式，生成灰色塊覆蓋在原來的樣式結構上，從而實現骨架屏。這種方式簡單易用好維護，個人感覺不太適合在長列表頁面。https://github.com/jayZOU/skeleton 這款骨架屏組件輕量、方便、快捷，里面有教程，強烈推薦。

以下使用第二種方法制作微信小程序骨架屏

安裝組件：

npm install --save miniprogram-skeleton

引入skeleton自定義組件

{
  "usingComponents": {
    "skeleton": "../miniprogram_npm/miniprogram-skeleton"
  }
}

小程序中npm的配置及使用：

• 在微信開發者工具中，設置 —> 項目設置—> 勾選使用npm模塊。

• 在微信開發者工具中，工具 —> 構建npm，構建完成會生成 miniprogram_npm 文件夾，項目用到的npm包都在這里。

• 按照頁面的使用路徑，從 miniprogram_npm 引入需要的包。

使用骨架屏組件

1.在wxml頁面需要用到的地方使用，如下：

<!--引入骨架屏模版 -->
<skeleton wx:if="{{showSkeleton}}"></skeleton>

<!--index.wxml-->
<!--給頁面根節點class添加skeleton, 用于獲取當前頁面尺寸，沒有的話就默認使用屏幕尺寸-->
<view class="container skeleton">
    <view class="userinfo">
        <block>
	        <!--skeleton-radius 繪制圓形-->
            <image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
                   mode="cover"></image>
             <!--skeleton-rect 繪制矩形-->
            <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.在js頁面需要用到的地方使用，如下：

//index.js
//初始化默認的數據，用于撐開頁面結構，讓骨架屏可以獲取到整體的頁面結構
Page({
	data: {
		motto: 'Hello World',
		userInfo: {
			avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132',
			nickName: 'jayzou'
		},
		lists: [
			'aslkdnoakjbsnfkajbfk',
			'qwrwfhbfdvndgndghndeghsdfh',
			'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',
		],
		showSkeleton: true   //骨架屏顯示隱藏
	},
	onLoad: function () {
		const that = this;
		setTimeout(() => {     //3S后隱藏骨架屏
			that.setData({
				showSkeleton: false
			})
		}, 3000)
	}
})