小程序與后端Java接口交互實現(xiàn)HelloWorld入門

更新時間：2021年07月09日 16:25:13 作者：java1234_小鋒

本文主要介紹了小程序與后端Java接口交互實現(xiàn)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 南通小鋒網(wǎng)絡科技有限公司
 * @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({

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

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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
        })
      }
    })
  },


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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

helloWorld.wxml

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

運行報錯了：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-VbUvZLH6-1625492299100)(C:\Users\java1234\AppData\Roaming\Typora\typora-user-images\image-20210705161237399.jpg)]$

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

這里我們需要設置下：

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

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wlJpWUtu-1625492299101)(C:\Users\java1234\AppData\Roaming\Typora\typora-user-images\image-20210705161311798.jpg)]$

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

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-UFatifFk-1625492299102)(C:\Users\java1234\AppData\Roaming\Typora\typora-user-images\image-20210705161836824.jpg)]$

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

報錯：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FqTLuceq-1625492299103)(C:\Users\java1234\AppData\Roaming\Typora\typora-user-images\image-20210705161926525.jpg)]$

如若已在管理后臺更新域名配置，請刷新項目配置后重新編譯項目，操作路徑：“詳情-域名信息”
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 地址（小程序的局域網(wǎng) IP 除外）或 localhost；

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

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mcpKYzeB-1625492299104)(C:\Users\java1234\AppData\Roaming\Typora\typora-user-images\image-20210705162342230.jpg)]$