1.インターフェース
下のビデオバーをクリックしてビデオを再生します
弾幕送信ボタンをクリックします
2.関連知識ポイント
1.wx-for：
forループ配列の説明
他のプログラミング言語の配列ステートメントを確認します。例としてC言語を取り上げます
。inta[3] = {2、1、8};現在の項目がa [1]であるとすると、
a：配列名
1：現在アイテムの添え字変数名
a [1]：現在のアイテムの変数名
WeChatアプレットに戻り、コンポーネントの「wx：for」コントロールプロパティを使用して配列をバインドしてから、配列内の各アイテムのデータを使用してコンポーネントを繰り返しレンダリングします。デフォルト配列の現在のアイテムの添え字変数名はデフォルトで「index」になり、配列の現在のアイテムの変数名はデフォルトで「item」になります。
「wx：for-index」を
使用して配列の現在の添え字の変数名を指定し、「wx：for-item」を使用して配列の現在の要素の変数名を指定します。
wx：forはネストできます
印刷された掛け算の九九の効果は次のとおりです
wx：keyの公式説明：データの変更によってレンダリングレイヤーが再レンダリングされると、キーを持つコンポーネントが修正され、フレームワークによって、コンポーネントが独自の状態を維持するように、再作成されるのではなく、並べ替えられるようになります。リストを改善しますレンダリングの効率。
翻訳：wx：keyを使用せずに、配列内のデータが変更されると、各Itemオブジェクトが再作成され、リストがレンダリングされます（時間と労力がかかります）
wx：keyを使用する場合、配列内のデータが変更された場合は、対応するオブジェクトを並べ替えるだけです。変更されていないオブジェクトは再作成されません（非常に良い）
使用法：
1。最初のタイプ：wk：key = "string"。これは、forループ配列内のアイテムのプロパティを表します。プロパティの値（プロパティではありません！）は、リスト内の唯一の文字列である必要があります。数
このとき、wx：keyがないため、デバッガーに警告が表示され、wx：keyを追加する必要があることが通知されます。配列配列から、現時点ではid値がリスト内の唯一の数値であることがわかるため、wx：key = "id"を追加します。
この時点で、デバッガーの警告は消えます
2. 2番目のタイプ：wk：key = "* this"は、forループ内のアイテム自体を表します。この表現では、アイテム自体が一意の文字列または数値である必要があります。（これ以上のプレゼンテーションはありません）
2.ビデオコンポーネント
ビデオは、ローカルまたはネットワークのビデオリソースを再生するために使用できるビデオコンポーネントです。デフォルトの幅は300rpx、高さは225rpxです。
ビデオコンポーネントの具体的な内容については、次の開発ドキュメントのリンクを参照してください。
開発ドキュメント
3.コードの実装
index.wxml
index.wxss
index.js
4.機能分析
まず、ページ読み込み関数でwx.createContext関数を呼び出します。この関数はパラメーターを指定する必要があります。パラメーターはビデオコンポーネントのIDであり、この関数を呼び出した後、関数は値VideoContextを返します。
この時点で、this.videoCtxに戻り値を割り当て、対応するビデオコンポーネントをthis.videoCtxで操作できます。対応するビデオが
ビデオリストでクリックされると、playVideo関数が呼び出されます。この関数では、 WeChatに付属するビデオの停止とビデオの再生が定義されています。関数、および関数はイベントオブジェクトeとイベントパラメータdata-urlを渡します。データ内のsrcアドレスは、渡されたurlを介して変更できるため、ビデオは通常どおり再生されます
まず、ビデオコンポーネントでの弾幕送信を許可するように設定します
入力コンポーネントで弾幕関数をバインドし、ボタンコンポーネントで弾幕送信関数をバインドします
。getDanmu関数で、データ
内のdanmuTxt変数に弾幕を割り当てます。sendDanmu関数で、最初にデータ内の変数danmuTxtを変数に割り当てます。テキストの場合、これはwxAPI関数内で直接使用できないため、WeChatの組み込みのsend barrage関数を呼び出して弾幕値をテキストに割り当て、色の値は事前に準備された関数を呼び出してランダムを取得するためですカラー。
弾幕機能は、ビデオコンポーネントで使用することができ、この時点で送信し、複数の堰が送信されるとき、様々な色が画面上で見ることができます