微信小程序和Java后台連接，進行數據交互

實現功能

小程序端和后台進行連接，並且向后台傳遞數據，同時接收后台傳遞回來的數據。基於idea、Java后台。

小程序和Java后台連接交互其實和web端的交互差不大，都是通過url。唯一的區別就是jsp頁面和后台的servlet連接是通過路徑，小程序和后台的servlet連接是需要在路徑前面加上服務器的地址，比如"http://localhost:8080/"

步驟一

創建一個Java Web項目

步驟二

創建一個servlet類，在這個類里進行數據的傳輸，可以接收小程序的數據，也可以向小程序發送數據

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.Writer;

@WebServlet(name = "Servlet", urlPatterns = "/Servlet")
public class Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");

        /*設置響應頭允許ajax跨域訪問*/
        response.setHeader("Access-Control-Allow-Origin", "*");

        /* 星號表示所有的異域請求都可以接受， */
        response.setHeader("Access-Control-Allow-Methods", "GET,POST");

        //獲取微信小程序傳遞的參數值並打印
        String transInfo = request.getParameter("transInfo");
        System.out.println("接收到小程序端傳遞的數據:" + transInfo);

//        像小程序端傳遞數據
        Writer out = response.getWriter();
        out.write("汰，這是后台給小程序端的數據");
        out.flush();


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

最終后台項目的目錄結構是這樣的




到這一步后台的內容就搞定了，只要把這個項目放到服務器里面，就可以啟動后台了，tomcat或者node.js都可以

步驟三

創建一個小程序項目

步驟四

先把小程序的界面寫好,在index.wxml里面寫以下代碼

<view>
    <button bindtap='bindtest'>數據交互</button>
    <text>接收到后台的數據：{{tt}}</text>
</view>

步驟五

在index.wxjs里面寫交互代碼

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    tt: ''
  },


  bindtest: function(options) {
    var that = this;
    wx.request({
      url: 'http://localhost:8080/testOne_war_exploded/Servlet', //本地服務器地址
      data: { //data中的參數值就是傳遞給后台的數據
        transInfo: '吶，這是小程序端給后台的數據'
      },
      method: 'get',
      header: {
        'content-type': 'application/json' //默認值
      },
      success: function(res) { //res就是接收后台返回的數據
        that.setData({
          tt: res.data
        })
        console.log(res.data);
      },
      fail: function(res) {
        console.log("失敗");
      }
    })
  }


})

wx.request({})里面放到就是交互代碼，url是交互地址，data是給后台傳遞數據的，success是接收后台返回的數據，格式和Ajax是差不多的。

最后看下實現效果