ホームページ > 記事 > WeChat アプレット > ユーザーエクスペリエンスを向上させるために、WeChat ミニプログラムでスケルトン画面を使用してみませんか?
スケルトン画面はフロントエンド アプリケーションで非常に人気がありますが、そのほとんどは 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: '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ノードのサイズを取得して背景色を塗りつぶし、データを取得した時点でスケルトン画面を非表示にします。
このプロセスでは 2 つの注意点があります。
ミニ プログラムでノード情報を取得する方法
Getノード情報の取得、スケルトン画面コンポーネントの描画方法
##1. ミニプログラムでのノード情報の取得方法# #WeChat ミニ プログラムの使用
[selectorQuery](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html)関連ノードを見つけるために、次の API が提供されています:
2 を使用します。 screen Component
まず上位ページを描画し、背景色で塗りつぶしてから、取得したノード、円ノード、長方形ノードを純粋なグレーで描画します。絶対配置を使用してスケルトン画面を描画します。
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); }); }, }>>> は、WeChat アプレットのカスタム コンポーネント間のセレクターであり、ノード情報を取得するために使用されます。詳細については、
ソース コードスケルトン画面コンポーネントに PR を送信します - npm パッケージとしてパッケージ化します
これを使用するときは、まだコンポーネントベースです。ソース コードをダウンロードして、それをプロジェクトにコピーして使用しますが、この方法は不可能か不便です。少し前に、私は
WeChat アプレット カスタム テーブル コンポーネントを npm として封印し、毎週のダウンロード ボリュームを 100 に設定しました。スケルトン画面も npm にパッケージ化でき、非常に使いやすいだろうと考えました。 npm の使用方法は上記で確認できます。私はこのプロジェクトに
プル リクエスト を送信しました。元の作成者は コードをレビューし、マージに変更を加えました。 。これは長い間私を悩ませました。将来的には、オープンソース プロジェクトの PR をさらに強化し、フロントエンド コミュニティに貢献したいと考えています。
推奨チュートリアル: 「WeChat ミニ プログラム 」
以上がユーザーエクスペリエンスを向上させるために、WeChat ミニプログラムでスケルトン画面を使用してみませんか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。