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

本篇內容介紹了“小程序與后端Java接口交互實現HelloWorld”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

目錄

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

• 第二步：新建一個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://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html(env: Windows,mp,1.05.2105170; lib: 2.18.0)

我們打開 https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

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

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

“小程序與后端Java接口交互實現HelloWorld”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！