微信小程序與Java后臺的通信

一、寫在前面

最近接觸了小程序的開發，后端選擇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 stubresponse.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數據的處理，以后有時間再總結下。