ホームページ  >  記事  >  WeChat アプレット  >  ユーザーエクスペリエンスを向上させるために、WeChat ミニプログラムでスケルトン画面を使用してみませんか?

ユーザーエクスペリエンスを向上させるために、WeChat ミニプログラムでスケルトン画面を使用してみませんか?

hzc
hzc転載
2020-06-08 16:44:213305ブラウズ

スケルトン画面はフロントエンド アプリケーションで非常に人気がありますが、そのほとんどは H5 アプリケーションで使用されます。今日は WeChat ミニ プログラムでのスケルトン画面の使用方法と、ミニ プログラムでのスケルトン画面の実装原理について話したいと思います。スケルトン画面プロジェクト用 PR を送信し、npm パッケージの形式でサードパーティとしてパッケージ化し、フロントエンド コミュニティに少額の貢献をすることもできます。

WeChat アプレットでスケルトン画面を使用するにはどうすればよいですか?


1. インストールと紹介

1. コンポーネントのインストール:

npm install --save miniprogram-skeleton

2. スケルトン カスタム コンポーネントを導入します。

{
  "usingComponents": {
    "skeleton": "../miniprogram_npm/miniprogram-skeleton"
  }
}

アプレットでの npm の構成と使用: WeChat 開発者ツールの

  • —> プロジェクト設定—> [npm モジュールを使用する] をオンにします。

  • WeChat 開発者ツールで、[ツール] -> [npm のビルド] をクリックします。ビルドが完了すると、miniprogram_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: &#39;Hello World&#39;,
		userInfo: {
			avatarUrl: &#39;https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132&#39;,
			nickName: &#39;jayzou&#39;
		},
		lists: [
			&#39;aslkdnoakjbsnfkajbfk&#39;,
			&#39;qwrwfhbfdvndgndghndeghsdfh&#39;,
			&#39;qweqwtefhfhgmjfgjdfghaefdhsdfgdfh&#39;,
		],
		showSkeleton: true   //骨架屏显示隐藏
	},
	onLoad: function () {
		const that = this;
		setTimeout(() => {     //3S后隐藏骨架屏
			that.setData({
				showSkeleton: false
			})
		}, 3000)
	}
})

WeChat アプレットでスケルトン画面を使用するのは比較的簡単ですが、スケルトン画面コンポーネントの基本パラメータとスケルトン画面の表示/非表示の制御に注意してください。

スケルトン画面の実装原理を見てみましょう


ソースコードアドレス: github.com/jayZOU/skel…

著者は Tencent の大ボスであり、

ユーザーエクスペリエンスを向上させるために、WeChat ミニプログラムでスケルトン画面を使用してみませんか?

#著者の実装アイデアは比較的単純です。いわゆる会議は次のとおりです。分からない人にとっては難しくないので、聞いてみると簡単だと思いました。実装アイデアは、ネットワークがインターフェースデータを要求している期間にDOMノードのサイズを取得して背景色を塗りつぶし、データを取得した時点でスケルトン画面を非表示にします。

このプロセスでは 2 つの注意点があります。

  • ミニ プログラムでノード情報を取得する方法

  • Getノード情報の取得、スケルトン画面コンポーネントの描画方法

##1. ミニプログラムでのノード情報の取得方法# #WeChat ミニ プログラムの使用

[selectorQuery](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html)

関連ノードを見つけるために、次の API が提供されています:

    SelectorQuery SelectorQuery.in(コンポーネントコンポーネント)は、セレクターの選択範囲をカスタムコンポーネントコンポーネント内に変更します。 (最初は、セレクターはページ範囲内のノードのみを選択し、カスタム コンポーネント内のノードは選択しません)。
  • NodesRef SelectorQuery.select(string selector) 現在のページの下のセレクター セレクターに一致する最初のノードを選択します。ノード情報を取得するために使用できる NodesRef オブジェクト インスタンスを返します。
  • NodesRef SelectorQuery.selectAll(string selector) 現在のページの下のセレクター セレクターに一致するすべてのノードを選択します。
  • NodesRef SelectorQuery.selectViewport() は表示領域を選択します。表示領域のサイズ、スクロール位置、その他の情報を取得するために使用できます。
  • NodesRef SelectorQuery.exec(関数コールバック)は、すべてのリクエストを実行します。リクエストの結果はリクエストの順序で配列を形成し、コールバックの最初のパラメータで返されます。
  • スケルトン画面コンポーネントは、一致したすべてのノードを取得することを期待しています。作成者は
SelectorQuery.selectAll()

2 を使用します。 screen Component

まず上位ページを描画し、背景色で塗りつぶしてから、取得したノード、円ノード、長方形ノードを純粋なグレーで描画します。絶対配置を使用してスケルトン画面を描画します。

ready: function () {
        const that = this;
        //绘制背景
        wx.createSelectorQuery().selectAll(`.${this.data.selector}`).boundingClientRect().exec(function(res){
            that.setData({
                &#39;systemInfo.height&#39;: 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);
            });
        },
 }

>>> は、WeChat アプレットのカスタム コンポーネント間のセレクターであり、ノード情報を取得するために使用されます。詳細については、
ソース コード

をクリックしてください。

スケルトン画面コンポーネントに PR を送信します - npm パッケージとしてパッケージ化します

これを使用するときは、まだコンポーネントベースです。ソース コードをダウンロードして、それをプロジェクトにコピーして使用しますが、この方法は不可能か不便です。少し前に、私は

WeChat アプレット カスタム テーブル コンポーネント

を npm として封印し、毎週のダウンロード ボリュームを 100 に設定しました。スケルトン画面も npm にパッケージ化でき、非常に使いやすいだろうと考えました。 npm の使用方法は上記で確認できます。私はこのプロジェクトに

プル リクエスト

を送信しました。元の作成者は コードをレビューし、マージに変更を加えました。 。これは長い間私を悩ませました。将来的には、オープンソース プロジェクトの PR をさらに強化し、フロントエンド コミュニティに貢献したいと考えています。

推奨チュートリアル: 「WeChat ミニ プログラム

以上がユーザーエクスペリエンスを向上させるために、WeChat ミニプログラムでスケルトン画面を使用してみませんか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。