全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[商洛seo公司参考久澳]微信小程序中为什么不使用骨架屏,来提升用户体验?

  骨架屏在前端的应用里很普及▽▼,不过大多都是在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…
 

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

  作者的实现思路相对比较简单,所谓会者不难难者不会▷☆,了解了之后觉得听简单的-▷。实现思路是在网络请求接口数据的这段时间,通过获取到dom节点的大小填充底色▲△,当数据获取到了-◇,再将骨架屏隐藏。

  在这个过程中有两个点需要注意:

  

  •  

      在小程序里如何获取节点信息

      

  •  

      获取到节点信息了,如何绘制骨架屏组件

      

 

  1. 在小程序里如何获取节点信息

  利用微信小程序的 [selectorQuery](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html) 查找相关节点,提供了以下api=▼=:

  

  •  

      SelectorQuery SelectorQuery▽▽▷▪.in(Component component)将选择器的选取范围更改为自定义组件 component 内。(初始时◁★…-,选择器仅选取页面范围的节点☆▲▽,不会选取任何自定义组件中的节点)。

      

  •  

      NodesRef SelectorQuery●○▷.select(string selector)在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例,可以用于获取节点信息。

      

  •  

      NodesRef SelectorQuery★▪▷.selectAll(string selector)在当前页面下选择匹配选择器 selector 的所有节点◆-▷。

      

  •  

      NodesRef SelectorQuery.selectViewport()选择显示区域。可用于获取显示区域的尺寸▼●◁、[商洛seo公司参考久澳]滚动位置等信息

      

  •  

      NodesRef SelectorQuery•△▲▪.exec(function callback)执行所有的请求▽☆○。请求结果按请求次序构成数组,在callback的第一个参数中返回。

      

 

  骨架屏组件期望能获取匹配到的所有节点,作者使用的 SelectorQuery●▼-☆.selectAll()

  2…◆□. 如何绘制骨架屏组件

  先绘制一个层级较高的页面,19 2020.10 [厦门seo公司陈仁潘]微信小程序loading组件显示载入动画的用法介绍 这篇文章主要介绍了微信小程序loading组件显示载入动画用法○▪,结合实例形式分析了loading组件显示载入动画的相关事件操作与属性设置技巧,并附带源码供读者下载参考,需要的朋友可,填充背景色◁•,再讲获取到的节点,圆节点、长方形节点,用纯灰色绘制。通过绝对定位的方式绘制骨架屏。

  

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();
 },
 methods: {
 rectHandle: function () {
 const that = this=▼★;
 //绘制不带样式的节点
 wx.createSelectorQuery().selectAll(`.${this▼•.data.selector} >>> .${this▷=.data○•.selector}-rect`)●☆.boundingClientRect().exec(function(res){
 that.setData({
 skeletonRectLists: res[0]
 })
 console.log(that.data);
 })△■▲;
 }▼□,
 radiusHandle: function () {
 const that = this;
 wx.createSelectorQuery()◆□▪●.selectAll(`▷■▽•.${this.data•…▽▪.selector} >△☆;>>=▪▲■; .${this.data.selector}-radius`).boundingClientRect().exec(function(res){
 console.log(res)●▪;
 that.setData({
 skeletonCircleLists: res[0]
 })
 console••.log(that.data);
 })△-;
 },
 }

 

  >>> 为微信小程序跨自定义组件的选择器•○▪◁,用来获取节点信息,具体细节请戳源码◇▷○●。
 

  

 

  给骨架屏组件提交个PR - 封装为npm包

  我在使用的时候还是组件式的,把源码下载下来,拷贝到项目里去,再使用,这种方式不是不行▼△=,就是不太方便。我前段时间封了个微信小程序自定义table组件为npm,周下载量100+,就想着骨架屏也可以封装成npm,使用起来多香。

  于是你们就看到上面的npm的使用方式,邵武市小程序开发哪家好我给这个项目提了 pull request,原作者 review 过代码,改了一波合并了。这让我开森了许久。以后也想●▷,多给开源项目提些PR•▲=,给前端社区做些贡献。

  推荐教程:《微信小程序》

  以上就是微信小程序中为什么不使用骨架屏,来提升用户体验?的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[商洛seo公司参考久澳]微信小程序中为什么不使用骨架屏,来提升用户体验?

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。