首頁 >微信小程式 >小程式開發 >為什麼微信小程式中不使用骨架屏，來提升使用者體驗？

為什麼微信小程式中不使用骨架屏，來提升使用者體驗？

hzc轉載: 2020-06-08 16:44:213342瀏覽

骨架屏在前端的應用裡很普及，不過大多都是在H5的應用中，今天想談的是微信小程式中如何使用骨架屏，以及小程式骨架屏的實作原理，針對骨架屏項目也可以提個PR，封裝出來一個npm套件形式的第三方，為前端社群做點小貢獻。

如何在微信小程式中使用骨架螢幕？

一、安裝與引入

#1.安裝元件：

npm install --save miniprogram-skeleton

2.引入skeleton自訂元件

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

小程式中npm的設定及使用：

在微信開發者工具中，設定—> 項目設定—> 勾選使用npm模組。
在微信開發者工具中，工具 —> 建立npm，建置完成會產生 miniprogram_npm 資料夾，專案用到的npm套件都在這裡。
依照頁面的使用路徑，從 miniprogram_npm 引入需要的套件。

注意下小程式中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: &#39;Hello World&#39;,
		userInfo: {
			avatarUrl: &#39;https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132&#39;,
			nickName: &#39;jayzou&#39;
		},
		lists: [
			&#39;aslkdnoakjbsnfkajbfk&#39;,
			&#39;qwrwfhbfdvndgndghndeghsdfh&#39;,
			&#39;qweqwtefhfhgmjfgjdfghaefdhsdfgdfh&#39;,
		],
		showSkeleton: true   //骨架屏显示隐藏
	},
	onLoad: function () {
		const that = this;
		setTimeout(() => {     //3S后隐藏骨架屏
			that.setData({
				showSkeleton: false
			})
		}, 3000)
	}
})