一、寫在前面
最近接觸了小程序的開發，后端選擇Java，因為小程序的代碼運行在騰訊的服務器上，而我們自己編寫的Java代碼運行在我們自己部署的服務器上，所以一開始不是很明白小程序如何與后台進行通信的，然后查找資料發現結合了官方提供的api后好像和我們普通的web前后端通信也沒有多大的區別，有想法后就寫了這個測試程序。
二、API文檔
wx.request(OBJECT)
發起網絡請求。使用前請先閱讀說明。
OBJECT參數說明：
| 參數名 | 類型 | 必填 | 默認值 | 說明 |
|---|---|---|---|---|
| url | String | 是 | 開發者服務器接口地址 | |
| data | Object/String | 否 | 請求的參數 | |
| header | Object | 否 | 設置請求的 header，header 中不能設置 Referer。 | |
| method | String | 否 | GET | （需大寫）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
| dataType | String | 否 | json | 如果設為json，會嘗試對返回的數據做一次 JSON.parse |
| success | Function | 否 | 收到開發者服務成功返回的回調函數 | |
| fail | Function | 否 | 接口調用失敗的回調函數 | |
| complete | Function | 否 | 接口調用結束的回調函數（調用成功、失敗都會執行） |
success返回參數說明：
| 參數 | 類型 | 說明 | 最低版本 |
|---|---|---|---|
| data | Object/String | 開發者服務器返回的數據 | |
| statusCode | Number | 開發者服務器返回的 HTTP 狀態碼 | |
| header | Object | 開發者服務器返回的 HTTP Response Header | 1.2.0 |
data 數據說明：
最終發送給服務器的數據是 String 類型，如果傳入的 data 不是 String 類型，會被轉換成 String 。轉換規則如下：
-
對於
header['content-type']為application/json的數據，會對數據進行 JSON 序列化 -
對於
header['content-type']為application/x-www-form-urlencoded的數據，會將數據轉換成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
示例代碼
wx.request({
url: 'test.php', //僅為示例，並非真實的接口地址 data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json' // 默認值 },
success: function(res) {
console.log(res.data)
}
})
三、基本思路
將數據通過get方式傳到Java servlet類，servlet得到微信小程序的數據打印出來並返回一個數據給微信小程序，從而實現一個最簡單的前后端通信。
四、關鍵代碼
微信小程序代碼
index.wxml
<view> <button bindtap='bindtest'>test</button> </view>
index.js
bindtest: function(){
wx.request({
url: 'http://localhost:8080/Demo01/servlet02',
data:{
username:'001',
password:'abc'
},
method:'GET',
header: {
'content-type': 'application/json' // 默認值 },
success:function(res){
console.log(res.data); },
fail:function(res){
console.log(".....fail.....");
}
})
},
Java serlvet類代碼
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=utf-8");
/* 設置響應頭允許ajax跨域訪問 */
response.setHeader("Access-Control-Allow-Origin", "*");
/* 星號表示所有的異域請求都可以接受， */
response.setHeader("Access-Control-Allow-Methods", "GET,POST");
//獲取微信小程序get的參數值並打印
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("username="+username+" ,password="+password);
//返回值給微信小程序
Writer out = response.getWriter();
out.write("進入后台了");
out.flush();
}
五、效果演示
前端控制台
ecplise控制台
至此說明微信小程序與Java后台通信成功！當然這是最簡單的通信，比較復雜的是需要對Json數據的處理，以后有時間再總結下。