wxapp img loader

wxapp-img-loader

これは、WeChat ミニ プログラムに適したネイティブ画像プリロード コンポーネントです ( Taro を使用している場合は、taro ブランチに移動してください)。JD Shopping などの多くのミニ プログラムで使用されています。使用手順は次のとおりです。

1. img-loader ディレクトリをプロジェクトにコピーします

2. 次のコードをページの WXML ファイルに追加して、コンポーネント テンプレートを導入します

 < import src =" ../../img-loader/img-loader.wxml " />
< template is =" img-loader " data =" {{ imgLoadList }} " > </ template >

3. ページの JS ファイルにコンポーネント スクリプトを導入します。

 const ImgLoader = require ( '../../img-loader/img-loader.js' )

4. ImgLoader オブジェクトをインスタンス化し、これ (現在の Page オブジェクト) を渡します。2 番目のパラメータはオプションであり、画像読み込み完了のデフォルトのコールバック メソッドです。

 this . imgLoader = new ImgLoader ( this )

5. ImgLoader インスタンスの load メソッドを呼び出してイメージをロードします。最初のパラメータはイメージ リンクで、2 番目のパラメータはオプションで、イメージがロードされるときのコールバック メソッドです。

 this . imgLoader . load ( imgUrlOriginal , ( err , data ) => {
    console . log ( '图片加载完成' , err , data . src , data . width , data . height )
} )

注: 画像の読み込みが完了した後のコールバック メソッドの最初のパラメーターはエラー メッセージ (読み込みが成功した場合は null) で、2 番目のパラメーターは画像情報 (src、幅、高さを含むオブジェクト タイプ) です。

使用方法については、単一のイメージをロードするシナリオと複数のイメージをロードするシナリオを含むデモ ディレクトリの例を参照してください。実行時の効果は次の図に示されています。

-eof-