週末很早起來了，折騰一上午終於把小demo搞定了。

1.微信小程式的發起網路請求，使用wx.request(OBJECT)，OBJECT的引數說明如下

（1）其中只有url為必填項，其餘選填即可。

（2）header中‘content-type’預設為application/json，會對資料進行JSON序列化。

（3）在該demo中我們還需使用success回撥函式，進行資料處理。下表為success返回引數的說明↓

2.首先我們來看api.wxml檔案，期望是通過點選button請求學生的名字和性別資料，並將資料展示到view中。

<view class="container wxml-container">
  <text class="topic-group">網路請求(學生詳情)</text>
  <view wx:for="{{students}}">
    {{item.student.name}}:{{item.student.sex}}
  </view>
  <button class="button" bindtap="requestStudent">請求資料</button>
</view>
 

3.再來看一下api.js檔案

（1）我們需要初始化wxml中引用的陣列students，並在收到伺服器成功響應時更新其值。

（2）定義button繫結的requestFromServer函式，設定url。（url設定為伺服器的介面，該處我使用tomcat，通過ip地址訪問了我電腦中的js檔案，在下一點我會說明）

// pages/api/api.js
Page({
  data: {
    students: []
  },
  requestStudent: function () {
    var THIS = this
    wx.request({
      url: 'http://xxx.xxx.xxx.xxx:8080/wxapp/students.js',
      header: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        var data = res.data
        THIS.setData({
          students: data
        })
      }
    })
  }
})

4.我們需要使用安裝並執行tomcat將自己電腦作為可訪問的伺服器。我安裝的是tomcat7，均可。具體安裝過程不再贅述，根據提示點選下一步即可。（安裝tomcat前電腦需配置java環境，今天我的tomcat一直啟動不起來，檢視日誌發現原因是java版本升級了，路徑中的jdk7失效。）

5.tomcat環境配置好以後，新建一個student.js檔案放到docs目錄下，我將students.js放到了新建的wxapp資料夾中。（txt直接改字尾為js是行不通的，我們可以在小程式的專案中新建一個js格式的檔案，剪下到目標資料夾。）檢視一下students.js中的內容。

[
    {"student":{
	"name":"Alice",
	"sex":"girl"
	}
     },	

     {"student":{
	"name":"Bob",
	"sex":"boy"
	}
      },

    {"student":{
	"name":"Crab",
	"sex":"girl"
	}
     }
]

6.啟動tomcat後，檢視自己的ip地址，填入到api.js中url的前面xxx.xxx.xxx.xxx的部分，可以實現資料訪問。

7.來看一下效果圖

8.附上api.wxss中的樣式↓

.wxml-container{
  padding: 0 20rpx ;
  align-items: center;
}

.topic-group{
  background: pink;
  width: 100%;
  text-align: center;
  margin-top: 40rpx;
}

text{
  width: 100%;
  text-align: center;
}

.button{
  width: 100%;
  margin-top: 20rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

總結：很簡單的一個demo，編寫過程中遇到了各種各樣的問題，很開心都獨自解決了！希望自己可以記住，出現問題多看log，並且以後程式設計中也應多編寫log語句，方便排除問題。