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

微信(小程序)  /  管理员 发布于 3年前   253

关于网络通信，这里我使用的是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长得不样罢了。

关于其中的getApp().globalData.urlPath，相当于全局变量，不用我每次都写一大串https之类的。

表单校验的效果如图:

代码说明:

显示消息提示框(相当于js的alert提示):

wx.showToast({ title: "邮箱有误", icon: 'none', duration: 1500})

获取input属性为name的值(相当于js中form.email.value,前提是这个表单name要为form，且form中的input要存在一个name=”email”)

e.detail.value.email;

跳转代码(相当于window.location.href):

wx.navigateTo({ url: '../manage/manage'})

至于wx.request，我想只要是写过ajax的，都很好理解。

login.json:

{ "usingComponents": {}}

关于这个login.json有什么用，我唯一想到的是页面的title(其实相当于html中的title)

lgoin.wxml:

   acs系统     \n    
     用户名：          密码:          登录   \n    注册   

wxml相当于视图(如html或者模板语言(jsp、volocity、freemarker、beetl等))

视图除了可以写一些标签之类的，还可以写一些逻辑判断。后面会讲到的。

login.wxss:

/* pages/login/login.wxss */form{ width: 310px; height: 240px; line-height: 40px; /* border: 1px solid red; */}input{ border: 1px solid #ccc; width: 310px; height: 40px;}.button{ margin-top: 20px;}.header text{ font-size: 25px; color: #666;}form text{ font-size: 20px; color: #666;}.register{color:black;display: block;width: 310px;height: 40px;border: 1px solid #ccc;text-align: center;}

这个wxss就相当于css，定义视图的样式，决定视图长什么样(好看不好看)

关于微信小程序网络通信，更多信息可以参考官方文档:

wx.request

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 详解微信小程序用定时器实现倒计时效果
• 微信小程序设置滚动条过程详解
• 微信小程序实现图片选择并预览功能
• 微信小程序如何修改radio和checkbox的默认样式和图标
• 微信小程序 确认框的实现（附代码）
• 微信小程序―setTimeOut定时器的问题及解决