WeChatミニプログラムにおける動的パラメータ転送について-ミニプログラム開発-php.cn

WeChatミニプログラムにおける動的パラメータ転送について

不言

リリース： 2018-06-27 14:31:37

オリジナル

2456 人が閲覧しました

この記事は主にWeChatミニプログラムの動的パラメータ引き渡し例の詳細な説明に関する関連情報を紹介しますので、必要な友達は参考にしてください

WeChatミニプログラムの動的パラメータ引き渡し例の詳細な説明

よく使用されます。 WeChat ミニプログラムの開発プロセスでパラメータを動的に転送するには、たとえば、特定のページに渡されたさまざまなパラメータに基づいて、さまざまな新しいページを読み込みます。次に、それを実現する方法を紹介します。

前回のブログでは、wx: for ループを使用して配列を表示する方法を紹介しました。一般に、実装したい機能は、別のページにある要素の詳細情報を読み込むなど、別の要素をクリックして別のページに移動することです。

ここでのジャンプはナビゲータージャンプを使用し、ナビゲーターがジャンプするリンクにパラメーターを追加します:

index.wxml (クリックされたページに応じてパラメーターが渡されます)

<view class="item" wx:for="{{showData}}"> 
 <navigator url="/pages/logs/logs?id={{item.id}}" class="title"> 
 <view class="td"> 
  {item.MTId}} {{item.status}} 
 </view> 
 </navigator> 
</view>

ログイン後にコピー

idはローカルデータに書き込まれていますので、お願いします各データのその他の詳細については、以前のブログを参照してください。このことから、次のレベルのページで渡されたパラメータ ID に基づいてローカルデータをクエリし、クエリ結果を表示するだけで、詳細情報をロードする機能を実現できることが想像できます。

logs.js (index.wxml によって渡されたパラメータを受け入れ、それらを処理します)

Page({ 
 onLoad: function (options) { 
 console.log(options.id) 
 var init = myData.searchmtdata(options.id) 
 this.setData({ 
  data_MTId: init.MTId, 
  data_status: init.status, 
  data_duration: init.Duration, 
  data_Operator: init.Operator, 
  data_IdleReason: init.IdleReason 
 }) 
 } 
})

ログイン後にコピー

searchmtdata このメソッドは、ID の値に基づいてクエリを実行し、特定の値を返すというもので、前のブログで説明されています。リスト内のオブジェクト、つまり特定の項目の詳細情報です。

onLoad:functionこの関数は、ページがロードされるときに一度実行されます。オプションは、受信したindex.wxmlから渡されるパラメータです。 ID に従って特定のリストオブジェクトをクエリし、値を割り当てます。このとき、data_** 内のデータは特定の項目の詳細情報です。

logs.wxml (アイテムの詳細情報を表示)

<view class="ar_item" style="border-top:1px solid #ddd;"> 
 <text class="ar_name">MTID</text> 
 <text class="ar_content">{{data_MTId}}</text> 
</view> 
<view class="ar_item"> 
 <text class="ar_name">Status</text> 
 <text class="ar_content">{{ data_status}}</text> 
</view> 
<view class="ar_item"> 
 <text class="ar_name">Duration</text> 
 <text class="ar_content">{{data_duration}}</text> 
</view> 
<view class="ar_item"> 
 <text class="ar_name">Operator</text> 
 <text class="ar_content">{{data_Operator}}</text> 
</view> 
<view class="ar_item"> 
 <text class="ar_name">Idle Reason</text> 
 <text class="ar_content">{{data_IdleReason}}</text> 
</view>

ログイン後にコピー

効果のスクリーンショット: