主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
骨架屏在前端应用中非常流行,但多用于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。 我已向该项目提交了拉取请求。 原作者审查了代码,进行了更改并合并。 这困扰了我很长时间。 未来,我想进一步推广我的开源项目,为前端社区做出贡献。
推荐教程:“微信小程序”
下载微信应用
微信是一款支持通过移动网络发送语音消息、视频、照片和文字的移动通讯软件。 微信带来了全新的移动通信体验,您可以单独或群组聊天,还可以根据您的地理位置查找附近的人。 有需要的朋友,请快来保存您的下载体验吧!
这几篇文章你可能也喜欢:
- 如何在电脑上玩微信小程序(如何在电脑上打开微信小程序)
- 微信小程序需要购买域名吗?(微信小程序需要申请域名吗?)
- 微信小程序502的含义(微信小程序502的含义)
- 如何爬取小程序源码(爬取小程序的爬虫)
- 自学微信小程序从零到一:搭建项目后封装http请求
本文由主机参考刊发,转载请注明:您想在微信小程序中使用骨架屏来提高用户体验吗(百度小程序骨架屏实现) https://zhujicankao.com/124029.html
评论前必须登录!
注册