「小程序JAVA实战」小程序注册与后端联调（35）

原创文章，欢迎转载。转载请注明：转载自IT人故事会，谢谢！
原文链接地址：「小程序JAVA实战」小程序注册与后端联调（35）

小程序的后端spring boot的注册接口已经完成了，下一步就是修改小程序的前端请求联调下。之前说过wx.request的api。源码：https://github.com/limingios/wxProgram.git 中的wx-springboot 和 No.15

注册与后端的联调

• 在app.js定义后端服务器的路径

这里需要提一下，假设在手机上测，如果手机开启的4G信号，跟电脑不是在同一个局域网的情况下。需要电脑端开启内网穿透的功能才可以在测试。如果在同一个局域网内可以通过内网ip的形式。localhost直接都是一台机器。

app.js

//app.js
App({
  serverUrl:"http://localhost:8081",
  userInfo:null
})

app.json

{
  "pages":[
    "pages/userRegister/userRegister"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序视频",
    "navigationBarTextStyle":"black"
  },
  "debug":true
}

userRegister.js

const app = getApp()

Page({
    data: {

    },

    doRegist: function(e) {
      var formObject = e.detail.value;
      var username = formObject.username;
      var password = formObject.password;

      // 简单验证
      if (username.length == 0 || password.length == 0) {
        wx.showToast({
          title: '用户名或密码不能为空',
          icon: 'none',
          duration: 3000
        })
      }else{
        wx.request({
          url: app.serverUrl +"/regist", 
          method:"POST",
          data: {
            username: username,
            password: password
          },
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data);
            var status = res.data.status;
            if(status == 200){
              wx.showToast({
                title: "用户注册成功~！",
                icon: 'none',
                duration: 3000
              })
              app.userinfo = res.data.data;
            }else if(status == 500){
              wx.showToast({
                title: res.data.msg,
                icon: 'none',
                duration: 3000
              })
            }
          }
        })
      }
    },
    goLoginPage:function(e){
      console.log("跳转到登录");
    }
})

• 程序测试

开启eclipse的spring boot的程序

http://localhost:8081 不在以下 request 合法域名列表中，请参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

调试的解决方案

• 成功运行

  
  

• 微信小程序模拟器在笔记本上input无法获取焦点，无法输入

在input框里面鼠标长按即可

PS：整个这个从前端到后端的针对注册接口已经开发完毕了。