一、寫在前面

最近接觸了小程式的開發，後端選擇Java，因為小程式的程式碼執行在騰訊的伺服器上，而我們自己編寫的Java程式碼執行在我們自己部署的伺服器上，所以一開始不是很明白小程式如何與後臺進行通訊的，然後查詢資料發現結合了官方提供的api後好像和我們普通的web前後端通訊也沒有多大的區別，有想法後就寫了這個測試程式。

二、API文件

wx.request(OBJECT)

發起網路請求。使用前請先閱讀說明。

OBJECT引數說明：

success返回引數說明：

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