小程序怎么與后端Java接口交互實現HelloWorld

本篇內容主要講解“小程序怎么與后端Java接口交互實現HelloWorld”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“小程序怎么與后端Java接口交互實現HelloWorld”吧!

第一步：后端簡單建個SpringBoot項目，提供一個 helloWorld接口；

版本選用 2.2.6.RELEASE

package com.java1234.controller;

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

/**
 * @author java1234_小鋒
 * @site www.java1234.com
 * @company 南通小鋒網絡科技有限公司
 * @create 2021-07-04 17:43
 */
@RestController
public class HelloWorldController {

    @GetMapping("/helloWorld")
    public String helloWorld(Integer id){
        return "helloWorld "+id;
    }
}

application.yml

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

瀏覽器訪問：http://localhost/helloWorld?id=1

頁面顯示：

helloWorld 1

第二步：新建一個helloWorld 微信小程序，請求后端

helloWorld.js

通過微信小程序API wx.request調用后端接口

// pages/helloWorld.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    result:"請求后臺中..."
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that=this;
   this.getData(that);
  },

  getData(that){
    wx.request({
      url: "http://localhost/helloWorld",
      method:"GET",
      data:{
        id:100
      },
      header: {
        "content-type": "application/json" // 默認值
      },
      success(res){

        console.log(res.data);
        console.log(that)
        that.setData({
          result:res.data
        })
      }
    })
  },


  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

helloWorld.wxml

<!--pages/helloWorld.wxml-->
<text>返回值:{{result}}</text>

運行報錯了：

VM8 asdebug.js:1 Cannot send network request to localhost.(env: Windows,mp,1.05.2105170; lib: 2.18.0)

這里我們需要設置下：

詳情->本地設置->勾選 “不校驗合法域名、web-view (業務域名)、TLS版本以及HITPS證書”

勾選后，重新編譯，運行OK；

擴展下，如果是域名調用，比如 http://localhost 改成 http://www.java1234.com

報錯：

如若已在管理后臺更新域名配置，請刷新項目配置后重新編譯項目，操作路徑：“詳情-域名信息”
VM8 asdebug.js:1 http://www.java1234.com 不在以下 request 合法域名列表中

微信小程序對于域名調用會有一些限制，還需要配置，比如僅支持https，?域名不能使用 IP 地址（小程序的局域網 IP 除外）或 localhost；

服務器域名請在 「小程序后臺-開發-開發設置-服務器域名」 中進行配置：

到此，相信大家對“小程序怎么與后端Java接口交互實現HelloWorld”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！