微信小程序 网络通信实现详解

关于网络通信，这里我使用的是wx.request,官方代码示例如下:

wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: {  x: '',  y: '' }, header: {  'content-type': 'application/json' // 默认值 }, success (res) {  console.log(res.data) }})

对于初学者而言，官方示例可能会看不怎么懂，所以我就以我自己当初项目驱动学习的方式(开发个人的记账小程序)来作为学习实例。

以登录来说，效果图如下:

此次示例包含表单校验和网络请求，代码如下:

login.js

// pages/login/login.jsPage({ /**  * 页面的初始数据  */ data: {  username: "",  password: "" },  register:function(e){  wx.navigateTo({   url: '../register/register'  }) }, formSubmit: function(e) {  console.log(e.detail.value.email);  console.log(e.detail.value.pwd)  var username = e.detail.value.email;  var password = e.detail.value.pwd;  var emailReg = /^[A-Za-z/d]+([-_.][A-Za-z/d]+)*@([A-Za-z/d]+[-.])+[A-Za-z/d]{2,4}$/;  if (username == null || username == "") {   wx.showToast({    title: "用户名不能为空",    icon: 'none',    duration: 1500   })  } else if (!emailReg.test(username)) {   wx.showToast({    title: "邮箱有误",    icon: 'none',    duration: 1500   })  } else if (password == null || password == "") {   wx.showToast({    title: "密码不能为空",    icon: 'none',    duration: 1500   })  } else {   wx.request({    url: getApp().globalData.urlPath + "sysUser/login",    method: "POST",    data: {     username: username,     password: password    },    header: {     "Content-Type": "application/x-www-form-urlencoded"    },    success: function(res) {     console.log(res.data);     if (res.statusCode == 200) {      //访问正常      if (res.data.code == "000000") {       wx.showToast({        title: "登陆成功",        icon: 'success',        duration: 2000,        success: function() {         wx.navigateTo({          url: '../manage/manage'         })         wx.setStorage({          key: 'userId',          data: res.data.user.userCode         })         wx.setStorage({          key: 'userName',          data: res.data.user.userName         })         console.log("test:" + wx.getStorageSync('userName'));        }       })      } else if (res.data.code == "111111") {       wx.showToast({        title: "密码错误",        icon: 'none',        duration: 1500       })      } else {       wx.showToast({        title: "该用户不存在",        icon: 'none',        duration: 1500       })      }     } else {      wx.showLoading({       title: '系统异常',       fail      })      setTimeout(function() {       wx.hideLoading()      }, 2000)     }    }   })  } }})

关于login.js，主要是写通信逻辑的，与咱们平时写js差异并不大，唯一不同的就是api长得不样罢了。