您想在微信小程序中使用骨架屏来提高用户体验吗（百度小程序骨架屏实现）

骨架屏在前端应用中非常流行，但多用于h5应用。 今天，我想谈谈如何在微信小程序中使用骨架屏，以及骨架屏项目中小程序中骨架屏的实现原理。 还可以提交PR，以npm包的形式封装第三方。 为前端社区做出一点小小的贡献。

如何在微信小程序中使用骨架屏？

1.安装部署

1.npm install - ]-保存小程序-骨架

2.引入组件定义后的骨架

{ "usingComponents": { "sculpture": "../miniprogram_npm/miniprogram[ k3]sculpture" }}

在小程序中配置和使用npm：

在微信开发者工具中，进入设置->项目设置->使用npm模块。

在微信开发者工具中，工具 -> 构建npm下，构建完成后会生成一个miniprogram_npm文件夹，项目中使用的所有npm包都位于此处。

根据页面使用的路径从miniprogram_npm安装所需的包。

2. 使用骨架屏幕组件。

1. 在 wxml 页面中任何需要的地方使用它，如下所示：

{{userInfo.nickName}} {{item}} {{motto}} aaaaaaaaaaa

2. js页面中需要的地方：

初始化默认数据并扩展页面结构，使骨架屏捕获整个页面结构。

//index.jsPage({ data: {motto: 'Hello World',userInfo: { avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/ 132' ,昵称: u' },列表: ['aslkdnoakj bsnfkajbfk','qwrwfhbfdvndgndghndeghsdfh','qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',],showSkeleton: true //显示和隐藏骨架屏},onLoad: function () {const that = this;setTimeout(() => { //3S后隐藏骨架屏 that .setData({ showSkeleton : false})}, 3000)}})

在微信小程序中使用骨架屏还是比较容易的。 请关注骨架屏组件的基本参数以及骨架屏显示/隐藏的控件。

我们来看看骨架屏的实现原理

源代码地址：github.com/jayZOU/skel...

作者是大佬腾讯的老板。 他

作者的实现思路比较简单。 懂的人说不难，不懂的人说容易。 实现思路是在网络请求接口数据的同时，通过检索DOM节点的大小来填充背景颜色。 一旦获取到数据，骨架屏就会被隐藏。

在此过程中需要记住两件事。

如何用小程序获取节点信息

获取节点信息后，绘制骨架屏。 组件

1.如何使用小程序获取节点信息

微信小程序（https://developers.weixin.qq.com/miniprogram/dev/api/wxml/ 使用SelectorQuery.html 中的 [selectorQuery]）。 ）提供以下API来查找相关节点：

SelectorQuery SelectorQuery.in(Component组件)将选择器的选择更改为自定义组件组件。 （最初，选择器仅选择页面范围内的节点，而不选择自定义组件内的节点。）

当前页面的NodesRef SelectorQuery.select（字符串选择器）选择与选择器匹配的第一个节点。 返回可用于检索节点信息的 NodesRef 对象实例。

NodesRef SelectorQuery.selectAll(stringselector) 选择当前页面上与selector选择器匹配的所有节点。

NodesRef SelectorQuery.selectViewport()选择显示区域。 可用于获取显示区域的大小、滚动位置等信息。

NodesRef SelectorQuery.exec（函数回调）执行所有请求。 请求的结果按照请求的顺序形成一个数组，并在回调的第一个参数中返回。

骨架屏幕组件期望检索所有匹配的节点。 作者使用 SelectorQuery.selectAll()。

2.如何绘制骨架屏组件

先绘制将上层页面填充背景色，将得到的圆形和矩形节点用纯灰色绘制。 使用绝对定位绘制骨架屏幕。

ready: function () { const that = this; //绘制背景 wx.createSelectorQuery().selectAll(`.${this.data.selector}`).boundingClientRect().exec(function(res) ) { that.setData({ 'systemInfo.height': res[ 0][0].height + res[0][0].top }) }); // 绘制矩形 this.rectHandle();//画一个圆 this.radiusHandle(); }, method: {rectHandle:function(){const that = this; //画一个不带样式的节点 wx.createSelectorQuery().selectAll(`.${this .data .选择器} >>> .${this.data.selector}-rect`).boundingClientRect().exec(function) (res){ that.setData({ Skeleton RectLists: res[0] }) console.log (that.data) }); }, radiusHandle: function () { const that = this; }-radius`).boundingClientRect().exec(function(res){ Console.log(res); that.setData({ 骨架圆列表: res[0]}) console.log(that.data); }); }, }

将 PR - 发送到骨架屏幕组件并将其封装为 npm 包。

这样，它仍然是基于组件的。 ，下载源码，复制到你的项目中，然后使用。 这种方法要么不可能，要么不方便。 前段时间，我封装了一个微信小程序，自定义的表格组件为npm，每周下载量超过100次。 我想如果骨架屏也能打包到npm中使用就好了。

你可以在上面看到如何使用npm。 我已向该项目提交了拉取请求。 原作者审查了代码，进行了更改并合并。 这困扰了我很长时间。 未来，我想进一步推广我的开源项目，为前端社区做出贡献。

推荐教程：“微信小程序”

下载微信应用

微信是一款支持通过移动网络发送语音消息、视频、照片和文字的移动通讯软件。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：您想在微信小程序中使用骨架屏来提高用户体验吗（百度小程序骨架屏实现） https://zhujicankao.com/124029.html