微信小程序与后端Java接口交互HelloWorld入门实例

Posted java1234_小锋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序与后端Java接口交互HelloWorld入门实例相关的知识,希望对你有一定的参考价值。

完整微信小程序(Java后端) 技术贴目录清单页面(必看)

第一步:后端简单建个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>

运行报错了:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VbUvZLH6-1625492299100)(C:\\Users\\java1234\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210705161237399.png)]

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

这里我们需要设置下:

详情->本地设置->勾选 “不校验合法域名、web-view (业务域名)、TLS版本以及HITPS证书”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wlJpWUtu-1625492299101)(C:\\Users\\java1234\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210705161311798.png)]

勾选后,重新编译,运行OK;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UFatifFk-1625492299102)(C:\\Users\\java1234\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210705161836824.png)]

扩展下,如果是域名调用,比如 http://localhost 改成 http://www.java1234.com

报错:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FqTLuceq-1625492299103)(C:\\Users\\java1234\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210705161926525.png)]

如若已在管理后台更新域名配置,请刷新项目配置后重新编译项目,操作路径:“详情-域名信息”
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;

服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mcpKYzeB-1625492299104)(C:\\Users\\java1234\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210705162342230.png)]

微信搜一搜【java1234】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

以上是关于微信小程序与后端Java接口交互HelloWorld入门实例的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序前端模糊搜索

微信支付后端篇

Java后端小程序微信登录怎么写??

微信小程序,后端用php写完接口,怎么把数据给前端,要带啥参数

微信小程序,后端用php写完接口,怎么把数据给前端,要带啥参数

微信小程序后端代码怎样上传阿里云