WeChat ミニプログラム開発 (4) ミニプログラム開発実践ガイド

作成されたデモ フォルダーを見つけて、プロジェクトをエディターにインポートします。ここでは Sublime Text エディターを使用します。

現時点では、プロジェクトのルートディレクトリの下に、ホームページにレンダリングされるいくつかのtabBarページと、アプリのいくつかの構成ファイルがあります。名刺ボックス プロジェクトの tabBar など、3 つの切り替えメニュー

まず、app.json ファイルを見つけて開き、これらのメニューを構成し、tabBar を構成し、構成ファイルを変更するだけです。あなた自身のデザインに。

App.jsonにはいくつかの設定項目があります:

• ページ: これは書かれたjsファイルです。サフィックス.jsをここで使用する必要はありません。正しいパスを設定すれば、通常通り呼び出すことができます。 (通話が機能しない場合は、WeChat 開発者ツールを再起動した直後にページ エラーが報告されます)。 ウィンドウ: 上部でいくつかのスタイルを設定します。ドキュメントはより詳細です。 tabBar: 下部のいくつかの構成はよく知られています。 networkTimeout: まだ使用方法が見つかりません。ドキュメントを読むことをお勧めします。実際のプロジェクトのニーズに基づいて追加や変更を加えます。 iconPath と selectedIconPath: クリックすると、下部のメニュー ボタンの画像が強調表示されます。 ※本文：全部外すと下のタブの高さがかなり低くなります。

Jsonファイルの設定が完了したら、プロジェクトに従ってファイルを作成します。デモ: この問題の開発ツールは require をサポートしています。内部のデータ構造は json と一致しています

。

次に、必要なデータを取得して入力します。これは非常に便利です; 画像: 画像パス; ページ: タブール以外のページ: サービス配信層 (実際のデータを共同でデバッグするときに使用します) Wxss: いくつかの公開 CSS ファイル; これを見ると、各ページが 3 つの異なるサフィックスに関連付けられていることがわかります。ページ、CSS、JS の分離は、現時点ではこの方法でのみ行うことができます。これは WeChat アプリケーション アカウントの標準です。

Wxss ファイルは、作成したスタイル ファイルをインポートします。または、スタイル ファイルに直接スタイルを記述することもできます。

すべての Js ファイルを有効にするには、ページ内で設定する必要があります。

次の章: WeChat ミニ プログラムのホームページの開発。

第 4 章 WeChat ミニプログラムのホームページ開発

さまざまな準備と設定を経て、ホームページの開発に入りました。まず、次のようにホームページのレンダリングを実装する必要があります:

テンプレート 名刺は多数あり、WeChat が提供する必要がある基本コンポーネントを使用する必要があります。ここに大まかに入力（検索ボックス）とアクションシート（右側には下部のドロップダウンメニューがあり、これにはドロップダウンメニューが必要です）、スクロールビュー（右側のABCジャンプ）、（まだいくつかの問題があります）この現在の実装では、これらは克服されつつあります)。

View はブロック要素であり、検索ボックス全体のスタイルです。

名刺ホルダー: このプロジェクトは名刺機能に焦点を当てているため、多くの場所で使用されるため、名刺をテンプレートで分離する必要があります。

テンプレート: テンプレートを定義します。テンプレートの名前は実際にはスコープです。
• ブロック: ループ制御。多くの名刺があり、データを操作する多くのフロントエンド フレームワークのループに似ています。

  オンライン名刺とオフライン名刺を決定するために使用されるカスタム属性データをサポートします。 ビューにはいくつかのデータインポートが含まれており、三項演算子をサポートしています。

テンプレートを導入する際に非常に便利です。nameと同じで、nameDataで渡されたデータがデータとして埋め込まれます。

すべてが中心点としてデータにバインドされます。

データを取得するための具体的な操作は、データ構造によって異なります。

ここでのデータ構造は、JSON データ構造と同じです

それをページに渡したい場合は、

this.<a href="http://www.php.cn/code/8209.html" target="_blank">set</a>Data({nameData:card_list_name.data.cards,timeData:card_list_time.data.cards});

はページが横断するためです。それらはnameData、timeData

です。印刷されたデータ構造を見て、構造に従って解析して転送できます。

ここでデータに対するいくつかの操作を確認することもできます。 (定義されたjsonデータ形式に従って操作する必要があります)

名刺のスタイルは多くのページで使用する必要があるため、すべてのページでこのcommon.cssが必要になります。そしていくつかの初期化設定。 app.wxss で参照された後でのみ、グローバル APP にマッピングできます。

検索ボックス: ここで、bindChange は入力ボックス変更イベント

です。 WeChat が提供する bindingchange にはまだサポートの点で小さな問題があり、このイベントはフォーカスを失うことによってのみトリガーされます。将来的には改善され、この機能が最初に実装されます。

index.jsにイベントを記述する

bindInputChange:function(e){ //发生搜索事情var self = this; //this绑定，这个this指向微信的提供window var Text = e.detail.value.toUpperCase(); //取到输入的内容if(Text==""){ //如果输入为空 一些东西需要显示 否则不显示show_letter = "block"; }else{show_letter = "none";}this.setData({show_letter:show_letter, showSheet:true});var res = nameData; 获取到传递的数据if(data_type=="name"){}else if(data_type=="time"){res = timeData; };for(var k in res){ //for-in循环取到data里面的cardsvar data = res[k].cards; for(var i = 0;iIf(data[i].userName!=null && data[i].userName.indexOf(Text)!=-1){ data[i]["display"] = "block"; //存在就是赋值显示}else{data[i]["display"] = "none"; // 不存在赋值不显示}}}}

メニューバー: メニューバーを作成するには、WeChatが提供するドロップダウンメニューコンポーネントのアクションシートを使用します。トリガーされる条件は次のとおりです。ここ。

すべてはバインドイベントから始まります:

还是得先布好局才能被调动

![](http://upload-images.jianshu.io/upload_images/3113151-700fe4381ecb70c1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Js 配置：

![](http://upload-images.jianshu.io/upload_images/3113151-a29c120dbfb3e6ff.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Data 初始化数据：

![](http://upload-images.jianshu.io/upload_images/3113151-7ac34cbc72e90e98.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这里得取非，直接设置 false 调不出来: 调用事件。

![](http://upload-images.jianshu.io/upload_images/3113151-bfdd0f2e6ce40a96.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

调出来还得去掉它啊：如下相同即可

![](http://upload-images.jianshu.io/upload_images/3113151-e2536f3cad3ab6d0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

取消直接上事件即可。（分为菜单栏外部与底部）

![](http://upload-images.jianshu.io/upload_images/3113151-07ae959331529a76.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![](http://upload-images.jianshu.io/upload_images/3113151-5ea6156d3a6cf559.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

//好了，就是这么简单。实现效果简单，体验效果确实非常不错。

![](http://upload-images.jianshu.io/upload_images/3113151-31724704aa72189e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

还需要个 loading 效果（暂时没做动画，后期再考虑。）Loading 布局

![](http://upload-images.jianshu.io/upload_images/3113151-6b9e098615e2a5ce.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

首页的最外层 view

![](http://upload-images.jianshu.io/upload_images/3113151-ca2127936d0fa74b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

根据微信的生命周期

"Onload:function(e){this.setData({toastDisplay:”block”,htmlWrapDisplay:”none”})}, onShow:function(e){this.setData({toastDisplay:”none”,htmlWrapDisplay:”block”})}

ローディングバーが完了します。

スキャンして写真機能を直接呼び出し、ここからWeChatによって提供された写真を参照してください
api

使用は非常に速く、ニーズに応じて設定するだけです。

クリックしてスキャンすると、開発者ツールで次の効果​​を確認できます。

ここで説明しておきますが、domの長さに制限があり、ページの構造が長すぎるため、レンダリングできません。 当面の間、企業の並べ替えは削除されます。

左側のABCジャンプ（まだ改善中）。左にスワイプして名刺を削除する機能もありますが、モバイル端末では非常に実用的なこの機能が提供されていないのが残念です。後で自分でメモする必要があります。後で改善されるかもしれません）。

さて、今日の更新はここまでです。

【関連おすすめ】

1.

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

2. WeChatミニプログラムデモ: Kaka Auto

3. 簡単な左スワイプ操作とウォーターフォールフローレイアウト

以上がWeChat ミニプログラム開発 (4) ミニプログラム開発実践ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。