一、寫(xiě)在前面

最近接觸了小程序的開(kāi)發(fā)，后端選擇Java，因?yàn)樾〕绦虻拇a運(yùn)行在騰訊的服務(wù)器上，而我們自己編寫(xiě)的Java代碼運(yùn)行在我們自己部署的服務(wù)器上，所以一開(kāi)始不是很明白小程序如何與后臺(tái)進(jìn)行通信的，然后查找資料發(fā)現(xiàn)結(jié)合了官方提供的api后好像和我們普通的web前后端通信也沒(méi)有多大的區(qū)別，有想法后就寫(xiě)了這個(gè)測(cè)試程序。

二、API文檔

wx.request(OBJECT)

發(fā)起網(wǎng)絡(luò)請(qǐng)求。使用前請(qǐng)先閱讀說(shuō)明。

OBJECT參數(shù)說(shuō)明：

參數(shù)名類(lèi)型必填默認(rèn)值說(shuō)明

url	String	是	?	開(kāi)發(fā)者服務(wù)器接口地址
data	Object/String	否	?	請(qǐng)求的參數(shù)
header	Object	否	?	設(shè)置請(qǐng)求的 header，header 中不能設(shè)置 Referer。
method	String	否	GET	（需大寫(xiě)）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType	String	否	json	如果設(shè)為json，會(huì)嘗試對(duì)返回的數(shù)據(jù)做一次 JSON.parse
success	Function	否	?	收到開(kāi)發(fā)者服務(wù)成功返回的回調(diào)函數(shù)
fail	Function	否	?	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	?	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

success返回參數(shù)說(shuō)明：

參數(shù)類(lèi)型說(shuō)明最低版本

data	Object/String	開(kāi)發(fā)者服務(wù)器返回的數(shù)據(jù)	?
statusCode	Number	開(kāi)發(fā)者服務(wù)器返回的 HTTP 狀態(tài)碼	?
header	Object	開(kāi)發(fā)者服務(wù)器返回的 HTTP Response Header	1.2.0

data 數(shù)據(jù)說(shuō)明：

最終發(fā)送給服務(wù)器的數(shù)據(jù)是 String 類(lèi)型，如果傳入的 data 不是 String 類(lèi)型，會(huì)被轉(zhuǎn)換成 String 。轉(zhuǎn)換規(guī)則如下：

• 對(duì)于?header['content-type']?為?application/json?的數(shù)據(jù)，會(huì)對(duì)數(shù)據(jù)進(jìn)行 JSON 序列化
• 對(duì)于?header['content-type']?為?application/x-www-form-urlencoded?的數(shù)據(jù)，會(huì)將數(shù)據(jù)轉(zhuǎn)換成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

示例代碼

wx.request({url: 'test.php', //僅為示例，并非真實(shí)的接口地址data: {x: '' ,y: ''},header: {'content-type': 'application/json' // 默認(rèn)值},success: function(res) { console.log(res.data) } })

三、基本思路

將數(shù)據(jù)通過(guò)get方式傳到Java servlet類(lèi)，servlet得到微信小程序的數(shù)據(jù)打印出來(lái)并返回一個(gè)數(shù)據(jù)給微信小程序，從而實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的前后端通信。

四、關(guān)鍵代碼

微信小程序代碼

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' // 默認(rèn)值}, success:function(res){ console.log(res.data); }, fail:function(res){ console.log(".....fail....."); } }) },

Java serlvet類(lèi)代碼

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.setContentType("text/html;charset=utf-8"); /* 設(shè)置響應(yīng)頭允許ajax跨域訪(fǎng)問(wèn) */ response.setHeader("Access-Control-Allow-Origin", "*"); /* 星號(hào)表示所有的異域請(qǐng)求都可以接受， */ response.setHeader("Access-Control-Allow-Methods", "GET,POST"); //獲取微信小程序get的參數(shù)值并打印 String username = request.getParameter("username"); String password = request.getParameter("password"); System.out.println("username="+username+" ,password="+password); //返回值給微信小程序 Writer out = response.getWriter(); out.write("進(jìn)入后臺(tái)了"); out.flush(); }

五、效果演示

前端控制臺(tái)

ecplise控制臺(tái)

至此說(shuō)明微信小程序與Java后臺(tái)通信成功！當(dāng)然這是最簡(jiǎn)單的通信，比較復(fù)雜的是需要對(duì)Json數(shù)據(jù)的處理，以后有時(shí)間再總結(jié)下。

轉(zhuǎn)載于:https://www.cnblogs.com/dichuan/p/7932442.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序与Java后台的通信的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。