検索
ホームページWeChat アプレットミニプログラム開発WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例

今日は新しいアイテムが追加されました!開発ログ自体に加えて、友人からのいくつかの質問にも答えました。早速、「名刺ボックス」詳細ページのレンダリングを見てみましょう:

WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例


WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例

一般的な要件に注意してください: 上部の後ろにはカルーセル画像があり、 QR コード ボタンがポップアップします。モーダル ボックス情報、WeChat バーをクリックし、クリックして電話に保存します。アドレス バーには地図が表示される必要があります。名刺共有もモーダル ボックス ガイドです。
最初はカルーセル画像、autoplay自動再生、インターバルカルーセル時間、継続時間の切り替え速度など、必要に応じて追加できます。
削除: 削除ボタンです。ロード後は非表示になります。ユーザーはカルーセル画像をクリックして入力する必要があります。そうすると、カルーセル画像が全画面で表示されます。
noClickImg と ClickImg: 全画面カルーセル画像と非全画面カルーセル画像を切り替えます。クリック イベントのchangeClick はスタイルを変更するだけです。
ブロック: 画像リスト。
Number_img: 現在のカルーセル インデックス (currentNumber) と画像の長さのセット (cardnum)。
Where currentNumber:

//カルーセルが変更されたときに番号を変更します

//データを初期化します

Data: {

currentNumber: 1

}

slidechange:function(e){

varnumber = e . detail.current;

this.setData({

currentNumber:number+1

})

},

WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例

ここで、閉じるボタンをクリックしたときの全画面stategetBackStyleを確認できます。スタンバイ状態で、changeClick を imgFullScrenn に切り替えます。

WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例

もう一度クリックすると元のスタイルに戻ります

WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例

切り替え後はgetBackStyleに戻りますので、柔軟にご利用ください。

WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例

開発者ツールを更新すると、次のような具体的な効果が確認できます:

WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例


詳細ページの情報が基本的に同じスタイルであることがわかり、 WeChatが提供するループブロック。以下は詳細ページの個人情報データです。データが無い場合は表示されません。ここでは

WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例

//中国語の情報を使用します。

var personMessage= []

           var chinaMessage = res.card.groups[0].fields;

具体的には json を使用します。 データ形式を処理するには、表示値をそれにバインドするだけで、それを呼び出すことができます。


WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例
このバージョンの WeChat の setData は非同期

updating

data をサポートしていないため、実際のネットワーク データ リクエストが発生した場合、最後に ForceUpdata() を追加して view レンダリングを強制する必要があります。そうしないと、不可解なバグが多い。

WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例
説明は次のとおりです: これはサーバーの実際のデータです。


WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例


この時点では、js の実行順序がまだリクエストされていることがわかります。


WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例
変数を定義するだけです。


WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例

もちろん、ここのデータはプッシュされます。



WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例
以下はQRコードのポップアップメッセージです。


WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例
ポップアップモーダルボックスのQRコード情報です。レイアウト初期化はなしの状態です。そこではデータを直接バインドする必要があります:

           for(var i = 0;i

            personMessage.push(chinaMessage[i])

           }

           //为空或者null是不显示判断

          for(var k in personMessage){

            if(personMessage[k].value==null || personMessage[k].value==""){

            personMessage[k]["display"] = "none";

            }else{

            personMessage[k]["display"] = "block";

            }

           }

その方法は、データを表示させることです。

WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例

必要な場所からメソッドを呼び出すだけです。 (繰り返し通話をサポート)
詳細ページの会社所在地マップは、WeChatが提供するインターフェースを直接呼び出します(グループ内のデモには実装メソッドがあります)。

WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例


WeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例

[関連する推奨事項]

1.

WeChat ミニプログラムの完全なソースコードのダウンロード

2.

3. 左スワイプの簡単操作と滝の流れのレイアウト

以上がWeChat ミニプログラム開発 (3) 名刺ホルダー詳細ページのチュートリアル例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません