音楽アプレットプロジェクト
3.1 開発前の準備
3.1.1 プロジェクトの表示
音楽アプレット事業効果示す：
3.1.2 プロジェクト分析
音楽アプレットプロジェクトページ構造図：
- タブナビゲーションバー
- コンテンツ コンテンツエリア
- プレーヤー音楽プレーヤー制御
音楽アプレット プロジェクトディレクトリ構造：
3.1.3 プロジェクトの初期化
開発者ツールは空のプロジェクトを作成します。
3.2 【作業1】タブ切り替え
3.2.1 タスク分析
タブとページ(info.wxml、play.wxml、palylist.wxml) 構造図:
3.2.2 予備知識
スワイパーコンポーネントスライディング ページ構造を作成します。
スワイパーコンポーネント共通の属性:
スワイパーコンポーネントスライディング ページ構造を作成します。
含む主目的：
- コードを複数のファイルに分割すると、コードを見つけやすくなります。
- コードの共通部分を抽出します。外部ファイル経由で導入されます。
3.2.3 ページ構造とスタイルの記述
音楽アプレットの基本ページとスタイル:
テストページinfo.wxml、page.wxml、play.wxml書類：
3.2.4 タブ切り替えの実現
クリックナビゲーションバータブはタブ切り替えを実装します
。スクロールイベントページ切り替え効果:
3.3 [タスク 2] 音楽の推薦
3.3.1 タスク分析
音楽推薦ページの構造図:
3.3.2 予備知識
スクロールビューコンポーネント属性と説明:
スクロールビューコンポーネントイベントオブジェクト:
スクロールビューコンポーネントイベントオブジェクトパラメータの分析:
左にスクロール: 水平スクロールバーの左側からビューの左側までの距離。
スクロールトップ: 垂直スクロールバーの上端からビューの上部までの距離。
スクロール高さ: Y 軸上の垂直スクロールバーの最大スクロール距離。
スクロール幅: X 軸上の水平スクロールバーの最大スクロール距離。
デルタX: 水平スクロールバーのスクロール状態。
デルタY: 垂直スクロールバーのスクロール状態。
画像コンポーネントプロパティと説明:
画像コンポーネントズームモード:
画像コンポーネント9 つのトリミング モード:
画像コンポーネントズーム モードとクロップ モードのテスト:
3.3.3 コンテンツエリアのスクロール
スクロールビューコンポーネント：
3.3.4 カルーセル画像
スワイパーコンポーネントカルーセル マップを実現します。
3.3.5 機能ボタン
フレックスレイアウト機能ボタンを実現します。
3.3.6 ポピュラー音楽
フレックスレイアウトページ レイアウトを実装します。
3.4 [タスク 3] プレイヤー
3.4.1 タスク分析
プレーヤータブページの構造図:
プレーヤーの特定の機能を分析します:
音楽情報: 現在再生中の曲のタイトルとアーティストを表示します。
アルバムのジャケット: 音楽の再生中、アルバムアートが時計回りに回転します。
再生の進行状況: 再生の進行状況を表示し、音楽の進行状況を調整します。
3.4.2 予備知識
audioCtx オブジェクト申告方法：
オーディオ APIインターフェイスのプロパティと説明:
オーディオ APIインターフェイスのメソッドと説明:
インナーオーディオコンテキストケースの使用:
スライダーコンポーネントプロパティと説明:
スライダーコンポーネントの使用法:
3.4.3 基本データの定義
音楽プレイリストと音楽ステータス データ:
3.4.4 音楽再生機能の実現
音楽再生ロジック コード:
一番下のプレーヤーの構造コード:
一番下のプレーヤーのスタイル コード:
一番下のプレーヤーの一時停止/再生ボタン制御曲:
次の曲へのプレーヤーの切り替えを実現:
3.4.5 プレーヤーページを作成する
プレーヤー ページの構造コード:
プレーヤー ページのスタイル コード:
CSS3 アニメーションによるポスターの回転:
CSS3 アニメーションによるポスターの回転:
3.4.6 再生の進行状況を制御する
プレーヤー ページの下部にあるスライダー構造:
プレーヤー ページの下部にあるスライダー スタイル:
音楽再生の進行状況を表示:
プログレス バーの長さを制御する 曲の再生の進行状況を制御:
3.5 [タスク4] プレイヤーリスト
3.5.1 タスク分析
プログレスバーの長さを制御して、曲の再生の進行状況を制御します。
3.5.2 ページ構造とスタイルの記述
プログレス バーの長さを制御して、曲の再生の進行を制御します。
プログレス バーの長さを制御して、曲の再生の進行を制御します。
3.5.3 曲変更機能の実現
曲変更機能を実現:
要約する
この章では、音楽アプレット プロジェクトの完全な開発プロセスについて説明します。開発ステップには、ページ構造の分析、スタイルの設計、コンポーネントの使用が含まれます。この章の学習を通じて、読者はアプレットの基本的な対話型ロジックの開発を習得し、API を使用してプロジェクト内の特定の機能を実現し、開発プロセスにおける一般的な問題の解決方法を学ぶことができます。