Wechat small program +Java background development

Full code link

Link: pan.baidu.com/s/1viujpT2E… Extraction code: WCVD

  • Through this blog, you can quickly build a micro channel small program front and background connected to a function, here I will explain in detail each step, is how to achieve small program front and back related to each other; This blog uses a local Tomcat server because it is a function of a simple applet, mainly to understand how the applet front end is connected to the background.

Tools used:

Idea for springmvc WeChat small program development tools tomcat WeChat small application API jars used by * * * * I have uploaded to the baidu cloud disk, if there is need to can go to the download link: pan.baidu.com/s/1KSqQLs9J… Extraction code: 9S0S

I mainly use Java to write the background, and the framework is SSM. Due to my shallow knowledge, I can only use my existing knowledge to develop and learn. Because the data transmission of wechat small program foreground and background is in Json data format, so I suggest that if you know springBoot, it is more convenient and fast.

Here I tell you what a JSON data format is, I hope to help you a little!!

  1. 2.1 Json objects: can be understood as Java objects, in the form of key-value pairs. 2.1.2 JSON Array: Example: [{“key”:value,”key”:value}]

First create a JavaEE project in idea, specific how to create, here I will not understand, if there is no, you can go to the Internet to search a ship, here I will directly open my previous create the next JavaEE project.

  1. First of all, create a new project in wechat small program development tool, and then write a page of their own, and then write content web. XML in the WXML file of their own page
<? 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"> <! -- Front-end controller --> <servlet> < servletname > Springmvc </ servletname > <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> <! Encoding </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>Copy the code
  1. Secondly, write the springMVC configuration file springmvc. XML in SRC /springmvc
<? 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>Copy the code
  1. Then you write code in your controllerMy reality is written in DemoController

    DemoController.java

@Controller
public class DemoController {
    @RequestMapping("getUser")
    @ResponseBody
    public List<String> getUser(){
        List<String> list = new ArrayList<>();
        list.add("North University of China");
        list.add("653");
        list.add("实验室");
        returnlist; }}Copy the code

At this point, the use of Java background has been basically completed, the next start tomcat, test to see if written successfully if the content appears, it indicates that the background is written successfully, to output in JSON format, because the small program front and background connected with json format output

  1. I implemented the front and back interaction with a simple button: index.wxml
<button bindtap='houduanRequest'</button> <view wx:for="{{list}}" wx:fot-item="item"</view>Copy the code

index.js

//index.js
const app = getApp()

Page({
  data: {
    list:' '
  },
  houduanRequest:function(){
    var that = this;
    wx.request({
      url: 'http://localhost:8888/xiaochengxu/getUser'// request the server address of the method:'GET',
      header: {
        'content-type': 'application/json'// Default value}, success:function (req) {
        var list = req.data;
        if (list == null) {
          wx.showToast({
            title: 'ErrorMessage',
            icon: 'false', // icon duration: 1500 // Prompt delay time})}else {
          that.setData({
            list: list
          })
        }
      }
    })
  },

  onLoad: function() {},})Copy the code

Now that the basic functional code is complete, let’s start Tomcat, run it, and see what the results are…

The public,

Hope you pay a lot of attention, inside the irregular distribution of dry goods to receive a full set of information: reply keywords [666]