微信小程序后端Java接口开发与调试

https://blog.csdn.net/weixin_50823456/article/details/121166051

一.springboot 一般项目即可,主要是提供接口数据用来演示的

二.创建微信小程序项目
下载安装应用

https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

创建小程序

本机调试需要改下 :详情>本地设置>不校验合法域名>勾选

三. 方法演示 微信开发工具中的index.js 代码部分
get与post 请示的header 部分不同

1.post请求:

wx.request({
        url: 'https://..',
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        method: "POST",
        data: { name:'' },
      success: function (res) {
       //...
     
   }
})

//2.GET请求

wx.request({
    url: 'https://..',
    data: {
      page: page
    },
    method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  
    // header: {}, // 设置请求的 header  
    header: {
      'Content-Type': 'application/json'
    },
    success: function (res) {
      console.log(res.data)
      that.setData({
        list: res.data          //返回二维数组
        // views: res.data[0].views,     //查看数
        // praise: res.data[0].praise    //点赞数
      })
      page++;
    }
 })

getDate 与 getPostData 方法,绑定数据就是that.setData(),与vue 类似.

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    info: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
    var that = this;
    //this.getData(that);
    this.getPostData(that);
  },
  getData(that) {
    wx.request({
      url: 'http://localhost:8090/school/getList',
      method: 'GET',
      data: {
        page: 1,
      },
      header: {
        'content-type': 'application/json'  //默认值
      },
      success(res) {
        console.log(res.data);
        console.log(that);
        that.setData({
          result: res.data
        })
      }
    })
  },
  getPostData(that) {
    wx.request({
      url: 'http://localhost:8090/login',
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: "POST",
      data: { username: 'admin', password: 'JUNwei@2020', grade: '4' },
      success: function (res) {
        debugger;//设置断点(调试器>Source>index.js中与谷歌一致)
        that.setData({
          info: res.data.resultValue
        })
      }
    })
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

四 js 中 调试 ,我本机pc设置红色断点无效,直接在返回数据处写debugger
先打开调试器,再编译即可, wxml 相当于html ,{{ 变量名}}绑定js 中 page>data内的数据.
– 既然js名都一样了,html起个wxml [我先忙了]这名真蛋疼

真机调试,日志信息等