微信小程序与后端交互(ssm)

2020-5-18更新

App({
          
   

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
          
   
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
          
   
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
          
   
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
          
   
    
  }
})

app.js是面向全局的，可以把全局变量放在这里。

app.json ,配置显示的页面顺序，这里先显示index页面

{
          
   
  "pages": [
    "pages/index/index"
  ]
}

index.wxml wxml格式类似于html，都是便签语言，他们的特性也类似。具体可以到开发者文档详查。

<navigator url="http://localhost:81/toWechat/get.do">
  
  <text>id:{
          
   {
          
   user.id}}
</text>
  <text>name:{
          
   {
          
   user.name}}</text>
</navigator>

该页面从index.js中拿数据

id:,
    name:
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
          
   

    wx.request({
          
   
      url: http://locahost:8080/toWechat/get.do, //仅为示例，并非真实的接口地址
      header: {
          
   
        content-type: application/json // 默认值
      },
      success: function (res) {
          
   
        console.log(res.data)
        this.setDate({
          
   
          id:res.id,
          name:res.name
        })
      }
    })
  },
  
})

但是问题就出在这里：wx.request中的url路径是不能包含localhost的，如下： 一般开发中都要在个人电脑上进行测试，这里我们要把小程序编译器的不验证合法域名打开，这样我们就可以在本地服务器上进行测试了，也可以使用localhost本地地址来测试了。

接下来就开始前后端交互了

SSM与微信小程序

创建index.js，index.json，index.wxml，index.wxss

index.wxml页面布局

<button bindtap=houduanButton1>点击发起请求</button>
<!-- 触发事件后，在js中，到后端获取数据，赋给list -->
<view wx:for="{
          
   {list}}">
    id:{
          
   {
          
   item.id}}
    姓名：{
          
   {
          
   item.name}}

  </view>
  <view>
    {
          
   {
          
   list[0].name}}
  </view>

点击按钮触发houduanButton1，到后端获取数据 index.js

Page({
          
   
  /**
   * 页面的初始数据
   */
  data: {
          
   
    list: 
  },
  //触发事件
  houduanButton1: function () {
          
   
    var that = this;
    wx.request({
          
   
      url: http://localhost:8080/toJson.do,
      method: GET,
      header: {
          
   
        content-type: application/json // 默认值
      },
      success: function (res) {
          
   //成功交互后触发
        console.log(res.data)//打印到控制台
        var list = res.data.list;
        if (list == null) {
          
   
          var toastText = 数据获取失败;
          wx.showToast({
          
   //弹窗提示
            title: toastText,
            icon: ,
            duration: 2000
          });
        } else {
          
   
          that.setData({
          
   
            list: list
          })
        }
      }
    })
  } ,
  
})

下面是后端的代码实现： 使用的是springmvc来处理前端请求，且小程序接收的是json格式的数据，要加上@RequestBody将返回的数据转为json格式。

@RequestMapping("/toJson.do")
    @ResponseBody
    public Map<String,String> toJson(){
          
   

        Map<String,String> map= new HashMap<String,String>;
        map.put("id","1");
        map.put("name","lin");

        return map;

    }

这时候启动服务器，点击小程序的按钮，就可以获取到数据了。 (提示，如果springmvc有加拦截器的话，要把上面的请求地址设为不拦截，不然就会没响应)