在微信的官方文档中有相应的请求方法可以让我们使用，这里后端使用的java编写的。
后端项目构成：springboot+mybatis+IDEA+mysql

1后端代码

因为后端代码太简单，所以我们先介绍后端代码。后端只需要新建一个数据库和一个对象就可以了。代码太简单就不贴出来了，有问题的小伙伴可以在下面留言给我。

2小程序页面

我们创建一个小程序将里面的代码改造成我们想要的样子，如果不清楚的可以参考我之前的博客。
在index页面里面添加一个点击按钮：

viewbutton bindtap="setDisabled"获取后端数据/button/view

在index的js页面中添加一个点击事件：

Page({  /**   * 页面的初始数据   */  data: {    name: '',  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function() {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function() {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function() {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function() {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function() {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function() {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function() {  },  setDisabled: function() {    wx.request({      url: 'http://localhost:8082/user', //仅为示例，并非真实的接口地址       method: 'GET',      header: {        'content-type': 'application/json' // 默认值      },      success(res) {        console.log(res.data)      }    })  }})

到了这一步我们还不能获取我们想要的数据，因为微信小程序是对于没有在开发平台上注册的地址是不允许访问的，所以我们要配置一下。

这样我们就可以访问我们自己的后台了。

那么我们如何将这个数据展示在我们的小程序里面呢？
当我们按照官方文档展示数据的方式：会报错

 setDisabled: function(e) {    this.setData({      disabled: !this.data.disabled    })  },

这里涉及到的在小程序中this的作用域问题，这是原本在es5中存在的问题，我们可以使用es6的箭头函数就不会存在这样的问题。
当然我们也可以使用重新定义变量的方式来解决这个问题：

 setDisabled: function(e) {    var th=this;    wx.request({      url: 'http://localhost:8082/user', //仅为示例，并非真实的接口地址       method: 'GET',      header: {        'content-type': 'application/json' // 默认值      },      success(res) {        console.log(res.data)        th.setData({          name:res.data        })      }    })  }

这样我们在获取数据的时候就不会报上面的错误了。

注意：后端传过来的是一个对象，我们取数据的方式就像原始的js取数据的方式一样，也是通过.的方式来获取的。

现在我们就想要把我们从后台取到的数据展示在我们的小程序里面：对代码的修改如下：
wxml文件的代码：

viewbutton bindtap="setDisabled"获取后端数据/buttonviewid:{{name.id}}姓名：{{name.wxname}}账号：{{name.wxcount}}/view/view

js文件代码：

Page({  /**   * 页面的初始数据   */  data: {   name: '',//定义变量用来接受后端的数据  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function() {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function() {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function() {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function() {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function() {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function() {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function() {  },  setDisabled: function(e) {    var th=this;    wx.request({      url: 'http://localhost:8082/user', //仅为示例，并非真实的接口地址       method: 'GET',      header: {        'content-type': 'application/json' // 默认值      },      success(res) {        console.log(res.data)        th.setData({          name:res.data        })      }    })  }})

这样我们就可以在小程序中展示我们数据库中的数据了。