2.3.3 快递查询例子

1.需求

 页面需要输入 手机号 ，点击 查询 ，显示多条数组数据即可

2.index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    phoneNum:null,
    resultInfo:null
  },


  //给input 绑定事件
  //输入框每输一个字，就会调用此方法
  inputXXX:function(event){
    //input 输入的值 会通过该事件event 传递过来
    this.setData({phoneNum:event.detail.value})
  },

  
  //按钮单击，执行查询后台请求的方法
  btnclick:function(){
    // 回调函数 返回data
   // console.log(this.data.phoneNum)
    //如果函数调用函数，this 就不是当前page 对象了
    var thisPage = this
    app.getWeatherInfo(this.data.phoneNum,function(data){
      thisPage.setData({resultInfo:data})
     // console.log(data)
    })
  },


})

2.index.wxml

<view class="container">
  测试外边距margin,内边距padding
  <input placeholder="请输入手机号"maxlength="100" bindinput='inputXXX' /> <!--输入框的绑定事件,获取输入的数据-->


  <button type="primary" bindtap='btnclick' > 查询 </button><!--单击按钮的绑定事件-->
  <view wx:for="{{resultInfo}}">
    {{item.name}}--{{item.age}}
  </view>
</view>

 

app.js

//app.js
App({
  onLaunch: function () {
   
  },

  getWeatherInfo:function(num,cb){
    wx.request({
      url: 'http://localhost:8080/test/data', 
      data: {
       phoneNum:num
      },
      method:'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success: function (res) {
       // console.log(res.data)
       //该函数可以将数据返回
       cb(res.data);
      }
    })
  }

 
})