스켈레톤 화면은 프런트 엔드 애플리케이션에서 매우 인기가 있지만 대부분은 H5 애플리케이션에 있습니다. 오늘은 WeChat 미니 프로그램에서 스켈레톤 화면을 사용하는 방법과 미니 프로그램에서 스켈레톤 화면의 구현 원리에 대해 이야기하고 싶습니다. 스켈레톤 스크린 프로젝트에도 사용됩니다. PR을 올리고 제3자를 npm 패키지 형태로 캡슐화하여 프론트엔드 커뮤니티에 작은 기여를 합니다.
WeChat 미니 프로그램에서 스켈레톤 화면을 사용하는 방법은 무엇인가요?
1. 설치 및 소개
1. 구성 요소 설치:
npm install --save miniprogram-skeleton
로그인 후 복사
2 스켈레톤 맞춤 구성 요소 소개
{
"usingComponents": {
"skeleton": "../miniprogram_npm/miniprogram-skeleton"
}
}로그인 후 복사
애플릿에서 npm 구성 및 사용:
-
위챗에서 개발자 도구에서 설정 -> 프로젝트 설정 -> npm 모듈 사용을 선택하세요.
WeChat 개발자 도구에서 도구 —> npm 빌드가 완료되면 프로젝트에 사용된 모든 npm 패키지가 여기에 생성됩니다.
페이지의 사용 경로에 따라 miniprogram_npm에서 필요한 패키지를 가져옵니다.
미니 프로그램에서 npm의 구성과 사용은 일반 npm 패키지를 사용하는 것보다 구성이 더 많기 때문에 miniprogram_npm이라는 개념이 탄생했습니다.
2. 스켈레톤 화면 구성 요소를 사용합니다.
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)
}
})로그인 후 복사
WeChat 애플릿에서 스켈레톤 화면을 사용하는 것은 비교적 간단합니다. 스켈레톤 화면 구성요소의 기본 매개변수와 스켈레톤 화면 표시 및 숨기기 제어에 주의하세요.
스켈레톤 화면의 구현 원리를 살펴보겠습니다
소스 코드 주소: github.com/jayZOU/skel…
저자는 Tencent의 빅 보스이며 그의
작가의 구현 아이디어는 비교적 간단해서 이해할 수 있는 사람에게는 어렵지 않지만, 그렇지 않은 사람에게도 어렵지 않다고 합니다. 구현 아이디어는 네트워크가 인터페이스 데이터를 요청하는 동안 DOM 노드의 크기를 얻어 배경색을 채우는 것입니다.
이 과정에서 주의할 점은 두 가지입니다.
1 . 미니 프로그램에서 노드 정보를 얻는 방법
WeChat 애플릿의 [selectorQuery](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html)를 사용하세요. > 관련 Node를 찾기 위해 다음 API를 제공합니다. <code> [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()选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息
NodesRef SelectorQuery.exec(function callback)执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。
骨架屏组件期望能获取匹配到的所有节点，作者使用的 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();
},
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
🎜🎜SelectorQuery SelectorQuery.in(컴포넌트 컴포넌트)은 선택기의 선택 범위를 커스텀 컴포넌트 컴포넌트 내로 변경합니다. (초기에는 선택기가 페이지 범위의 노드만 선택하고 사용자 정의 구성 요소의 노드는 선택하지 않습니다.) 🎜🎜🎜🎜NodesRef SelectorQuery.select(string selector) 현재 페이지 아래에서 선택기 선택기와 일치하는 첫 번째 노드를 선택합니다. 노드 정보를 얻는 데 사용할 수 있는 NodesRef 객체 인스턴스를 반환합니다. 🎜🎜🎜🎜NodesRef SelectorQuery.selectAll(string selector)는 현재 페이지 아래의 선택기 선택기와 일치하는 모든 노드를 선택합니다. 🎜🎜🎜🎜NodesRef SelectorQuery.selectViewport()는 표시 영역을 선택합니다. 표시 영역의 크기, 스크롤 위치 및 기타 정보를 얻는 데 사용할 수 있습니다🎜🎜🎜🎜NodesRef SelectorQuery.exec(함수 콜백)는 모든 요청을 실행합니다. 요청 결과는 요청 순서대로 배열로 구성되어 콜백의 첫 번째 매개변수로 반환됩니다. 🎜🎜🎜🎜스켈레톤 화면 구성 요소는 일치하는 모든 노드를 얻을 것으로 예상합니다. 작성자는
SelectorQuery.selectAll() 🎜🎜2을 사용합니다. 스켈레톤 화면 구성 요소를 그리는 방법🎜🎜먼저 상위 수준 페이지를 그립니다. , 배경색을 채우고 순수 회색으로 그린 획득된 노드, 원 노드 및 직사각형 노드에 대해 이야기해 보겠습니다. 절대 위치 지정을 사용하여 뼈대 화면을 그립니다. 🎜rrreee🎜🎜>>>는 노드 정보를 얻는 데 사용되는 WeChat 미니 프로그램의 맞춤 구성요소 선택기입니다. 자세한 내용을 보려면 🎜소스 코드🎜를 클릭하세요. 🎜🎜🎜🎜npm 패키지로 패키징된 뼈대 화면 컴포넌트에 대한 PR 제출🎜🎜사용할 때 여전히 컴포넌트 기반으로 소스 코드를 다운로드하여 프로젝트에 복사한 다음 사용합니다. 방법은 불가능하거나 매우 편리합니다. 주간 다운로드량이 100 이상인 npm용
WeChat 애플릿 사용자 정의 테이블 구성 요소 🎜를 차단했습니다. 저는 스켈레톤 화면을 npm으로 패키징할 수도 있어서 사용하기 좋을 것이라고 생각했습니다. 🎜🎜위에서 npm 사용 방법을 볼 수 있습니다. 이 프로젝트에 풀 요청을 제출했습니다. 원본 작성자가 코드를 검토하고 변경한 후 병합했습니다. 이것은 오랫동안 나를 짜증나게 했습니다. 앞으로는 오픈 소스 프로젝트에 대한 PR을 더 많이 올리고 프런트 엔드 커뮤니티에 기여하고 싶습니다. 🎜추천 튜토리얼: "WeChat 미니 프로그램"
위 내용은 사용자 경험을 개선하기 위해 WeChat 미니 프로그램에서 스켈레톤 화면을 사용하는 것은 어떨까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
