微信小程序與Java后端接口交互

更新時間：2022年07月20日 10:04:56 作者：鳳文Studying

本文主要介紹了微信小程序與Java后端接口交互，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

準備

創(chuàng)建后端項目

我這里就創(chuàng)建一個SpringBoot項目作為演示。

在創(chuàng)建項目中選擇Spring Initializr

在這里插入圖片描述

要勾選SpringWeb框架，當然你也可以后面導入，確認好設置后，創(chuàng)建項目。

然后在Maven依賴中調(diào)整SpringBoot的版本

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.8.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
        <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
<!--            <scope>test</scope>-->
        </dependency>
    </dependencies>

目錄結(jié)構(gòu)如下，缺少的自行創(chuàng)建：

在這里插入圖片描述

配置文件application.yml配置如下（僅供參考），

server:
  port: 80
  servlet:
    context-path: /
    tomcat:
      uri-encoding: utf-8

代碼HelloWeiXin類（后端接口，在controller層）：

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @Author: Forward Seen
 * @CreateTime: 2022/04/22 17:10
 * @Description: 微信小程序請求接口
 */
@RestController
public class HelloWeXin {

    @RequestMapping("/getMessage")
    public String getMessage(Integer userId) {
        return "Hello,微信用戶" + userId + "!";
    }
}

測試，然后我們就可以在瀏覽器訪問測試接口

在這里插入圖片描述

這樣我們的后端接口就創(chuàng)建完成了。

創(chuàng)建小程序項目

打開微信開發(fā)者工具，創(chuàng)建項目：
模板我使用javascript基礎模板（js比較主流，推薦這個），創(chuàng)建即可。

在這里插入圖片描述

具體的小程序?qū)W習請參考官方文檔
學習起來很簡單，我這里直接寫案例代碼了。
創(chuàng)建一個頁面，wxml代碼如下：

<!--pages/hello/helloworld.wxml-->
<text>后端返回的數(shù)據(jù)：{{message}}</text>

js代碼如下

// pages/hello/helloworld.js
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    message: "請求中。。。",
  },

  getData() {
    const that = this
    wx.request({
      url: 'http://localhost/getMessage',
      data: {
        userId: 666
      },
      method: 'GET',
      success(res) {
        console.log("請求狀態(tài)：" + res.statusCode)
        console.log(res.data)
        that.setData({
          message: res.data
        })
      }
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    this.getData()
  },

})

我對這幾行代碼有如下解釋：
wx.request(Object)是請求的方法，具體用法請參考文檔中API的網(wǎng)絡，
其中url，data，method都是該Object的屬性，顯而易見，url就是請求的接口地址，data中存放的是請求的參數(shù)，method是請求方式，默認是get。
success(response)是一個函數(shù)，或者說對象中的方法，它是將請求成功返回來的結(jié)果拿回來，也就是回調(diào)，回來的就是一個響應對象，數(shù)據(jù)在響應對象的data屬性中，我們操作它。

代碼中有幾個細節(jié)要注意：
我把回調(diào)過程都封裝在getData方法中，在onLoad方法中調(diào)用，onLoad你可以理解為內(nèi)置方法，它是在頁面加載是自動調(diào)用的。
其次，在getData方法中使用了另一個對象，這個對象若向訪問頁面對象，要提前聲明個that = this，否則作用域不用，在success方法中this用的就是wx對象了。
如果你遇到如下問題，提示域名不安全，注意這不是跨域問題，只是由于訪問的地址沒有正規(guī)的檢查。

在這里插入圖片描述