ミニプログラム開発「エクスプレスクエリ」

ステップ 1: 製品要件。以下に示すように関数を実装する必要があります。テキスト ボックスに速達番号を入力し、[クエリ] をクリックすると、必要な速達情報が下に表示されます

ステップ 2: 準備します

まず、エクスプレス API インターフェース を見つけます

。

インターフェースアドレスといくつかのパラメーターが表示されます。準備ができたら、コーディング作業を開始します...

ステップ 3: コーディング作業

新しい Express ファイルを作成すると、デフォルト ファイルの準備が整います

app.js、頭の navigation を緑色の背景色

に変更します

Index.json でナビゲーションの名前を設定します: "Express Query"

Index.wxml でデフォルトを削除しますコードを入力し、テキスト入力ボックスの 1 つとクエリ ボタン

<!--index.wxml--><view class="container">
   <input placeholder="请输入快递单号" bindinput="input" />
   <button type="primary" bindtap="btnClick"> 查询 </button> </view>

を配置します。 次に、テキスト ボックスとボタンにスタイルを追加する必要があります。index.wxss に

/**index.wxss**/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-top:20px;}

を設定します。これまでのところ、レイアウトは次のように準備できています。以下に示します:

次に、事前に準備した API Express クエリ インターフェイスを呼び出す必要があります。まず、app.js でネットワーク リクエスト メソッド getExpressInfo を設定する必要があります。内部には、express パラメータと 2 つのパラメータが設定されています。リターンメソッド。

ドキュメントで提供されている wx.request を使用して、ネットワーク リクエスト URL: アドレス パスを開始します。これには、完全なデータの複数行を返すためのいくつかのパラメーター muti=0、新しいものから古いものまで時間順に並べられた order=desc、名前が含まれていますcom Express (宅配会社の名前)、nu 宅配便番号、ヘッダー: 要求されたパラメーターの値 apikey は、当社独自の Baidu アカウントの apikey です (自分の Baidu アカウントにログインして、パーソナル センターで表示できます) )

//设置一个发起网络请求的方法
  getExpressInfo:function(nu,cb){
    wx.request({
      url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&com=zhongtong&nu='+nu,  
      data: {
        x: '' ,
        y: ''
      },
      header: {          'apikey': '247d486b40d7c8da473a9a794f900508'
      },
      success: function(res) {        //console.log(res.data)        cb(res.data);
      }
    })
  },
  globalData:{
    userInfo:null
  }

このようなリクエストメソッドを使用して、次にクリックイベントをクエリボタンに追加する必要があります:bindtap="btnClick"、index.jsにクエリイベントを追加し、記述されたリクエストメソッドgetExpressInfoを呼び出します。その前に、まずテキスト ボックスに入力された配送業者番号を取得する必要があります。

テキスト ボックスにbininput イベントをバインドし、

入力された配送業者番号を取得します。データ内に 2 つの 変数 を定義します: オブジェクト 、1 つは入力ボックスの値用、もう 1 つは表示される配送業者情報用です。

//index.js//获取应用实例var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}, 
    einputinfo:null,//输入框值
    expressInfo:null //快递信息  },  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../todos/todos'
    })
  },
  onLoad: function () {
    console.log('onLoad')    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){      //更新数据      that.setData({
        userInfo:userInfo
      })
    })
  },  //快递输入框事件
  input:function(e){     this.setData({einputinfo:e.detail.value});
  },  //查询事件
  btnClick:function(){ 
    var thisexpress=this;  
    app.getExpressInfo(this.data.einputinfo,function(data){
        console.log(data);
        thisexpress.setData({expressInfo:data})
    })
  }
})

最後に、クエリされたエクスプレス情報をindex.wxmlに表示し、vx:forを使用して配列をループする必要があります。

<!--index.wxml--><view class="container">
   <input placeholder="请输入快递单号" bindinput="input" />
   <button type="primary" bindtap="btnClick"> 查询 </button> </view>
    

      
{{item.context}}
      
{{item.time}}
 
    
 

最後のステップは、表示される速達情報のスタイルを設定することです:

/**index.wxss**/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-top:20px;}
 .expressinfo{font-size:12px; line-height: 18px;padding:10px; text-align:left;}  
 .expressinfo li{display:block}

この時点で、クエリ全体が完了しました...

【関連する推奨事項】

1. WeChat アプレットのソース コードダウンロード

2.

WeChat ミニプログラムデモ: Yangtao

最近、WeChat ミニ プログラムが本格化しており、私もたまたまこのブームに追いつきました。ここ数日、チュートリアルに基づいてケースを手書きしました。今日はExpressクエリの小さなデモを書きました。大きく分けて3つのステップ

製品要件、APIの準備、コードの作成です。

以上がミニプログラム開発「エクスプレスクエリ」の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。