微信小程序+Java后台开发(详细解释，附代码)

微信小程序+Java后台开发

全部代码链接

链接：https://pan.baidu.com/s/1viujpT2EcgA8zFasHicflA
提取码：wcvd

• 通过这个博客，你可以快速的搭建一个微信小程序前端和后台相连的一个功能，在这里我会详细的解说每一个步骤，就是如何实现小程序的前后台相互关联；因为是实现简易的小程序的某个功能，主要是为了了解小程序前台如何和后台相连，所以在此博客中使用的是本地tomcat服务器。*

使用的工具：

idea
springmvc
微信小程序开发工具
tomcat
微信小程序API
所使用的jar包
我已经上传到百度云盘里了，如果有需要可以去下载
链接：https://pan.baidu.com/s/1KSqQLs9JMWB2SqgVVEwhKw
提取码：9s0s

1.JAV后端详解

我写后台主要使用的是Java，框架是SSM，由于自己的知识浅薄，只能使用自己已有的知识进行开发学习，因为微信小程序前台和后台数据传输是以Json数据格式传送的，所以建议如果了解过springBoot的话，用它更加方便快捷。

在这里我给大家说一个json数据格式究竟是什么，希望对大家有点帮助！！！

2. json数据格式
   2.1 jso有两种格式：一个是json对象，另一种是json数组
   2.1.1 json对象：可以理解为Java中对象，是以键值对形式存在的
   例子： {“key”:value, “key1”:value1}
   2.1.2 json数组：
   例子：[{“key”:value,“key”:value}]

首先在idea中创建一个JavaEE项目，具体如何创建，在这里我就不祥解了，如果有不会的，可以去网上搜一艘，在这里我会直接打开我先前创建下个JavaEE项目。

3. 首先在微信小程序开发工具中新建一个项目，然后再自己所写的某一个页面中，其次在自己页面的wxml文件中编写内容
   web.xml

    
    
        springmvc
        org.springframework.web.servlet.DispatcherServlet
        
            contextConfigLocation
            classpath:springmvc.xml
        
        1
    
    
        springmvc
        /
    
    
    
        encoding
        org.springframework.web.filter.CharacterEncodingFilter
        
            encoding
            utf-8
        
    
    
        encoding
        /*
    

4. 其次在src/springmvc.xml编写springMVC的配置文件
   springMVC.xml

5. 然后在控制器中编写代码
   我的实在DemoController中编写的
   
   DemoController.java

@Controller
public class DemoController {
    @RequestMapping("getUser")
    @ResponseBody
    public List getUser(){
        List list = new ArrayList<>();
        list.add("中北大学");
        list.add("653");
        list.add("实验室");
        return list;
    }
}

至此，使用Java编写的后台已经基本完成，接下来启动tomcat，测试看是否编写成功
如果出现一下内容，则说明后台编写成功，要以json格式输出，因为小程序前台和后台相连是以json格式输出的

5. 我以简单的按钮实现前后台交互：
   index.wxml

获取信息

  姓名：{{item}}

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() {
    
  }, 

})

到此基本的功能代码已经完成了，现在我们开始启动tomcat，进行运行，看看结果究竟是什么…

到此，实现小程序前后台相连已经实现了
希望对大家有点帮助！！！