微信小程序+Java后臺開發(fā)(詳細解釋，附代碼)

發(fā)表時間：2021-1-11

發(fā)布人：葵宇科技

瀏覽次數(shù)：86

微信小程序+Java后臺開發(fā)

全部代碼鏈接

鏈接：pan.baidu.com/s/1viujpT2E… 提取碼：wcvd

通過這個博客，你可以快速的搭建一個微信小程序前端和后臺相連的一個功能，在這里我會詳細的解說每一個步驟，就是如何實現(xiàn)小程序的前后臺相互關聯(lián)；因為是實現(xiàn)簡易的小程序的某個功能，主要是為了了解小程序前臺如何和后臺相連，所以在此博客中使用的是本地tomcat服務器。

使用的工具：

idea
springmvc
微信小程序開發(fā)工具 tomcat
微信小程序API
**所使用的jar包 **
我已經(jīng)上傳到百度云盤里了，如果有需要可以去下載鏈接：pan.baidu.com/s/1KSqQLs9J… 提取碼：9s0s

1.JAV后端詳解

我寫后臺主要使用的是Java，框架是SSM，由于自己的知識淺薄，只能使用自己已有的知識進行開發(fā)學習，因為微信小程序前臺和后臺數(shù)據(jù)傳輸是以Json數(shù)據(jù)格式傳送的，所以建議如果了解過springBoot的話，用它更加方便快捷。

在這里我給大家說一個json數(shù)據(jù)格式究竟是什么，希望對大家有點幫助?。?！

json數(shù)據(jù)格式
json有兩種格式：一個是json對象，另一種是json數(shù)組
2.1 json對象：可以理解為Java中對象，是以鍵值對形式存在的
例子： {"key":value, "key1":value1}
2.1.2 json數(shù)組：
例子：[{"key":value,"key":value}]

首先在idea中創(chuàng)建一個JavaEE項目，具體如何創(chuàng)建，在這里我就不祥解了，如果有不會的，可以去網(wǎng)上搜一艘，在這里我會直接打開我先前創(chuàng)建下個JavaEE項目。

首先在微信小程序開發(fā)工具中新建一個項目，然后再自己所寫的某一個頁面中，其次在自己頁面的wxml文件中編寫內容 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--前端控制器-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <!--字符編碼-->
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>
復制代碼

其次在src/springmvc.xml編寫springMVC的配置文件 springMVC.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
         http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd"
       default-autowire="byName">

    <!--注解掃描-->
    <context:component-scan base-package="com.zb.lq.controller"/>
    <!--注解驅動-->
    <mvc:annotation-driven></mvc:annotation-driven>
</beans>
復制代碼

然后在控制器中編寫代碼 我的實在DemoController中編寫的
DemoController.java

@Controller
public class DemoController {
    @RequestMapping("getUser")
    @ResponseBody
    public List<String> getUser(){
        List<String> list = new ArrayList<>();
        list.add("中北大學");
        list.add("653");
        list.add("實驗室");
        return list;
    }
}
復制代碼

至此，使用Java編寫的后臺已經(jīng)基本完成，接下來啟動tomcat，測試看是否編寫成功如果出現(xiàn)一下內容，則說明后臺編寫成功，要以json格式輸出，因為小程序前臺和后臺相連是以json格式輸出的

我以簡單的按鈕實現(xiàn)前后臺交互： index.wxml

<button bindtap='houduanRequest'>獲取信息</button>
<view wx:for="{{list}}" wx:fot-item="item">
  姓名：{{item}}
</view>
復制代碼

index.js

//index.js
const app = getApp()

Page({
  data: {
    list:''
  },
  houduanRequest:function(){
    var that = this;
    wx.request({
      url: 'http://localhost:8888/xiaochengxu/getUser',//自己請求的服務器的地址
      method: 'GET',
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (req) {
        var list = req.data;
        if (list == null) {
          wx.showToast({
            title: 'ErrorMessage',
            icon: 'false',   //圖標
            duration: 1500  //提示的延遲的時間
          })
        } else {
          that.setData({
            list: list
          })
        }
      }
    })
  },

  onLoad: function() {
    
  }, 

})

復制代碼