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 [我先忙了]这名真蛋疼

真机调试,日志信息等