WeChatアプレット開発の章：落とし穴の記録

最近、会社初のミニプログラムの開発に参加しました。開発経験は基本的にWebViewをベースとしたハイブリッド開発と似ています。公式の強力なAPIを呼び出すことができますが、落とし穴や慣れていない点もあります。この記事では、実用性の観点から開発プロセスにおけるいくつかの問題を記録します。

1. スタイルの優先順位が混乱している

ボタンコンポーネントを使用すると、クラスで幅を設定しても効果がないことがわかりました。コードは次のとおりです。

.my-button{
 幅: 140rpx;
 高さ: 60rpx;
 行の高さ: 60rpx;
 パディング: 0;
}

WeChat デバッグツールで確認したところ、ユーザーエージェントのスタイル優先度が、自分で記述したスタイルクラスよりも高いことがわかりました。これはブラウザでは基本的に不可能です。

解決策は実はとても簡単です。width または style="width:140rpx" に接尾辞 !important を追加するだけです。変更後の効果を見てみましょう。

!important を追加した後、幅の実際の効果は期待どおりになりましたが、WeChat デバッグツールでは依然としてユーザーエージェントスタイルが優先されることが示されています。これはデバッグツールのバグと見なす必要があります。

2. 通常のUIコンポーネントのカプセル化、面倒なパラメータ定義

一般的に、ボタンなどの UI ビジュアルドラフトの基本コンポーネントには、背景色やフォントなどの特定のスタイルがあります。ミニプログラムの Component 機能を使用してコンポーネントにカプセル化し、デフォルトのスタイルを記述して外部から渡されたクラスを受け取ることで、その後の開発が容易になります。

React には <tag {...props}></tag> という記述方法があり、これはコンポーネントが props を受け取っても処理せずに次のコンポーネントに渡すことを意味します。ただし、ミニプログラムはこの記述方法をサポートしていません (検索しても結果は得られず、公式ドキュメントにも説明されていません)。

つまり、ボタンコンポーネントでサポートされているすべてのパラメータをプロパティにリストする必要があります。

プロパティ:
  クラス: {
   タイプ: 文字列、
   価値： ''、
  },
  タイプ： {
   タイプ: 文字列、
   値: 'デフォルト'、
  },
  無地：
   タイプ: ブール値、
   値: false、
  },
  サイズ： {
   タイプ: 文字列、
   値: 'デフォルト'、
  },
  ......
 },

3. グローバルスタイルセレクター*が無効になっています

*{
 ボックスのサイズ: 境界線ボックス;
}

上記のコードは、アプレットがこのタイプのセレクターを禁止しているため、コンパイル時にエラーを報告します。具体的な理由を大胆に推測すると、比較的広い範囲を持つこのタイプのセレクターは、カスタムコンポーネントのスタイル分離と競合するのではないかということです。 ?

では、ミニプログラムにグローバル共通スタイルを追加するにはどうすればよいでしょうか?使用されているタグはすべて手動で記述するしかないようです。幸いなことに、インターネット上には貼り付け可能な既製のコードがあります。

ビュー、スクロール ビュー、スワイパー、スワイパー項目、移動可能領域、移動可能ビュー、カバー ビュー、カバー画像、アイコン、テキスト、リッチ テキスト、進行状況、ボタン、チェックボックス グループ、チェックボックス、フォーム、入力、ラベル、ピッカー、ピッカー ビュー、ラジオ グループ、ラジオ、スライダー、スイッチ、テキスト領域、ナビゲーター、機能ページ ナビゲーター、画像、ビデオ、カメラ、ライブ プレーヤー、ライブ プッシャー、マップ、キャンバス、オープン データ、Web ビュー、広告{
 ボックスのサイズ: 境界線ボックス;
}

4. カスタムコンポーネント、bind:tapが2回呼び出される

ボタンなどの基本コンポーネントをカプセル化する場合は、次のことを避ける必要があります。

タップすると{
 （！このデータが無効で、＆！このデータがロード中）{
  this.triggerEvent('タップ', e.detail)
 }
},

<button bindtap="onTap"></button>

このようにカプセル化されたコンポーネントは、ミニプログラム自体によって 1 つ、triggerEvent によって 1 つの 2 つのタップイベントをトリガーします。

クリックなど、アプレットに組み込まれていないイベントタイプに変更できます。

タップすると{
 （！このデータが無効で、＆！このデータがロード中）{
  this.triggerEvent('クリック', e.detail)
 }
},

タップイベントのバブルを防ぐことでも問題を解決できます。

<button catchtap="onTap"></button>

5. wxml の型変換には Boolean() を使用する

たとえば、コンポーネントでは、String 型のパラメータをリッスンします。空でない場合はテキストラベルが表示され、空の場合は表示されません。

// プレーヤー.wxml
<text class="text1" wx:if="{{ Boolean(leftText) }}">{{ leftText }}</text>

// インデックス.wxml
<player leftText="読む"></player>

この方法では、leftText フィールドは渡されますが、テキストラベルはまだ表示されません。別の方法で記述すると、次のようになります。

// プレーヤー.wxml
<text class="text1" wx:if="{{ leftText }}">{{ leftText }}}</text>

これは正しく、私たちの期待に応えています。

すごいですよね？

6. InnerAudioContextがseekメソッドを呼び出した後、onTimeUpdateコールバックは無効になります。

InnerAudioContext はオーディオの再生に使用されます。現在の再生の進行状況を取得するには、onTimeUpdate コールバックを渡します。

ただし、再生のために指定された位置にジャンプするために seek メソッドが呼び出されると、onTimeUpdate は呼び出されなくなります。

ミニプログラムコミュニティの多くの人がこの問題を提起しています。約1年半が経過しましたが、WeChatチームはまだこれを修正していません。一時的に妥協案を使用することしかできません。解決策は実際には非常に簡単です。

進捗状況の変更(e) {
 this.properties.src と this.data.innerAudioContext の場合 {
  定数 innerAudioContext = this.data.innerAudioContext;
  内部オーディオコンテキストを一時停止します。
  innerAudioContext.seek(innerAudioContext.duration * e.detail.value / 100);
  タイムアウトを設定する(() => {
   内部オーディオコンテキストを再生します。
  }, 500);
 }
},

まず再生を一時停止し、次に seek メソッドを実行し、次に約 500 ミリ秒の遅延を設定して play メソッドを呼び出します。

7. InnerAudioContext で継続時間を取得するタイミング

オーディオが再生される前の継続時間を取得したいのですが、できません。onPlay と onCanplay の呼び出しに関するインターネット上の記述はあまり信頼できません。1 つの解決策は次のとおりです。

innerAudioContext.onCanplay(() => {
 タイムアウトを設定する(() => {
  this.setData({
   継続時間Str: secondToTimeStr(innerAudioContext.duration) || '--:--',
  });
 }, 500);
});

setTimeout を設定するのに適切なミリ秒数は言うまでもなく、実際のマシンでは無効です。

したがって、onTimeUpdate を使用する方が適切です。

innerAudioContext.onTimeUpdate(() => {
 this.setData({
  継続時間Str: secondToTimeStr(innerAudioContext.duration) || '--:--'
 })
});

すべての onTimeUpdate を計算するとパフォーマンスが過度に低下すると思われる場合は、自分で実装して 1 回だけ計算することもできます。

8. ページの背景色を設定する

現在のページの json ファイルには backgroundColor フィールドがありますが、設定後に無効になっています。後で調べたところ、このフィールドは表示されている領域の背景色を表すのではなく、ページをプルダウンしたときのウィンドウの背景色を表すことがわかりました。

ページの背景色を設定する必要がある場合は、ページタグのスタイルを通じて設定できます。

ページ{
 背景: #f9fafb;
}

要約する

WeChatミニプログラム開発の落とし穴に関するこの記事はこれで終わりです。WeChatミニプログラム開発の落とし穴に関する関連コンテンツの詳細については、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません: