用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

为什么不在微信小程序中使用骨架屏,来提升用户体验?

Rolan 2020-5-21 00:25

历史回顾: 微信小程序原生性能优化实践 微信小程序自定义组件 - 表格组件来啦 通过微信小程序来实现 “钉钉打卡” 记一次微信小程序项目分包,以及分包预下载 微信小程序实践 骨架屏在前端的应用里很普及,不过大 ...

历史回顾:

骨架屏在前端的应用里很普及,不过大多都是在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: '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)
	}
})
复制代码

在微信小程序中使用骨架屏比较简单的,注意骨架屏组件的基础传参,以及显示和隐藏骨架屏的控制。

来看看骨架屏的实现原理

源码地址:github.com/jayZOU/skel…

作者是腾讯的一位大佬,是他

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 尤小小 来自: 掘金