小程序與後端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://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入門 的文章就介紹到這瞭,更多相關小程序與後端Java接口交互內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 微信小程序後端Java接口開發的詳細步驟
- 一文教會你微信小程序如何實現登錄
- 微信小程序獲取當前位置的詳細步驟
- 在.Net Framework應用中請求HTTP2站點的問題解析
- 從零開始學習Node.js