微信小程序與Java後臺的通信 小程序+Java後臺+Http通信+小程序Java後臺

之前研究過小程序 做了個簡單的Demo Java後端與小程序前端進行通信傳值等操作，現在有時間整理了下 供大家參考！！！（親測 真實案例 ）展示核心關鍵代碼

小程序的開發前端工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

後端選擇Java，之所以選擇http通信 ，因爲小程序的代碼運行在騰訊的服務器上，而我們自己編寫的Java代碼運行在我們自己部署的服務器上，官方提供的api跟我們普通的Java web 通信差不多 

API文檔 

wx.request(OBJECT)

發起網絡請求。使用前去微信公衆平臺看相關文檔 瞭解小程序

https://developers.weixin.qq.com/miniprogram/dev/

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控制檯

------------------------------------------------------------------------------------------------------------------

 

 

 

聲明本文有參考其他資料和圖片的使用