執行效果：

請求資料之前需要首先在小程式平臺設定伺服器域名

第一個介面的實現：介面傳值、radio-group的使用

first.wxml

<!--first.wxml-->
<view class="first_view">
  <text>請選擇快遞公司：</text>

  <!-- 單項選擇器控制元件 -->
  <radio-group class="radio_group" bindchange="listenRadioGroup">
  <!--用view包含每個實現垂直排列  -->
 

    <view wx:for="{{items}}" wx:key="key">
      <radio value='{{item.value}}' checked='{{false}}'>{{item.name}}</radio>
    </view>
  </radio-group>

  <!-- 輸入框控制元件 -->
  <input class="input_view" type="number" bindinput="getInputText" cursor-spacing='10' placeholder
 
="請輸入快遞單號" auto-focus/>

  <button bindtap="jump">查詢快遞</button>

</view>

first.wxss

/* first.wxss */

.first_view {
  display: flex;
  flex-direction: column;
}

.input_view {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  background-color: rgb(250, 250, 250);
}

first.js

// first.js
//建立兩個變數，儲存快遞單號和快遞型別
 

var kd_type
var kd_num

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    items: [
      { name: "申通", value: "shentong" },
      { name: "EMS", value: "ems" },
      { name: "順豐", value: "shunfeng" },
      { name: "圓通", value: "yuantong" },
      { name: "韻達", value: "yunda" },
      { name: "天天", value: "tiantian" },
      { name: "匯通", value: "huitongkuaidi" },
      { name: "全峰", value: "quanfengkuaidi" },
      { name: "德邦", value: "debangkuaidi" },
      { name: "宅急送", value: "zhaijisong" },
    ]
  },
  // 監聽單項選擇器radio_group的選中情況
  listenRadioGroup: function (value) {
    console.log(value)
    kd_type = value.detail.value
  },
  // 獲取文字框input的輸入內容
  getInputText: function (inputText) {
    console.log(inputText.detail.value)
    kd_num = inputText.detail.value
  },
  // “查詢快遞”按鈕點選事件
  jump: function () {
    wx.navigateTo({
      // 引數拼接傳到下一個介面
      url: '../second/second?postid=' + kd_num + '&type=' + kd_type,
    })
  }
})

第二個介面的實現：JSON資料請求和解析

JSON資料格式如下:

second.wxml

<!--second.wxml-->
<view class="container">

  <text class="title">
    快遞單號：{{result.nu}} 
    快遞公司：{{result.com}}
  </text>

  <block wx:for="{{result.data}}" wx:key="key">
    <text>
      {{item.time}}{{item.context}}
    </text>
  </block>
</view>

second.wxss

/**second.wxss**/

.title {
  font-size: 40rpx;
}

text {
  font-size: 30rpx;
}

second.js

//second.js
//獲取應用例項
var app = getApp()
Page({
  onLoad: function (option) {
    console.log('介面跳轉成功')
    var that = this

    // 資料請求
    wx.request({
      url: 'http://www.kuaidi100.com/query?',
      // 引數請求所需的引數
      data: { type: option.type, postid: option.postid },
      // 資料請求方式
      method: 'GET',
      // 請求成功
      success: function (res) {
        console.log("返回的資料為" + res)
        // 設定資料
        that.setData({
          result: res.data
        })
      },
      // 請求失敗
      fail: function () {
        console.log('fail');
      },
      // 請求完成
      complete: function () {
        console.log('complete');
      }
    })
    //呼叫應用例項的方法獲取全域性資料
    app.getUserInfo(function (userInfo) {
      //更新資料
      that.setData({
        userInfo: userInfo
      })
    })
  }
})