博主：??不許代碼碼上紅
歡迎：??點贊、收藏、關注、評論。

一、創(chuàng)建javaweb（idea）

點擊新建項目

這里記得選擇web application

點擊下一步

這是我們需要的目錄結構

二、servlet代碼

package com.example.demo2;

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");

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

        String number=request.getParameter("number");
        System.out.println(number);

        //像小程序端傳遞數(shù)據(jù)
        Writer out = response.getWriter();
        out.write("后臺數(shù)據(jù),你好微信小程序！");
        out.flush();


    }

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

三、配置tomcat

如果沒有如下圖這個東西

可以點擊+號 選擇Artifact

即可

四、微信小程序端

4.1、創(chuàng)建一個新的頁面pages

目錄結構

4.2、demo2.js

const app = getApp()

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


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


})

4.3、demo2.wxml

<view>
    <button bindtap='bindtest'>數(shù)據(jù)交互</button>
    <text>接收到后臺的數(shù)據(jù)：{{tt}}</text>
</view>

五、運行結果

微信小程序端

idea
文章來源地址http://www.zghlxwxcb.cn/news/detail-493643.html

到了這里，關于【微信小程序】前端+后端 ：第一篇（基于javaweb 案例）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！