快捷導(dǎo)航

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

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

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

準(zhǔn)備

創(chuàng)建后端項(xiàng)目

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

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

在這里插入圖片描述

要勾選SpringWeb框架，當(dāng)然你也可以后面導(dǎo)入，確認(rèn)好設(shè)置后，創(chuàng)建項(xiàng)目。

然后在Maven依賴(lài)中調(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類(lèi)（后端接口，在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: 微信小程序請(qǐng)求接口
 */
@RestController
public class HelloWeXin {

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

測(cè)試，然后我們就可以在瀏覽器訪(fǎng)問(wèn)測(cè)試接口

在這里插入圖片描述

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

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

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

在這里插入圖片描述

具體的小程序?qū)W習(xí)請(qǐng)參考官方文檔
學(xué)習(xí)起來(lái)很簡(jiǎn)單，我這里直接寫(xiě)案例代碼了。
創(chuàng)建一個(gè)頁(yè)面，wxml代碼如下：

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

js代碼如下

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

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

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

})

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

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

在這里插入圖片描述