关于网络通信,这里我使用的是wx.request,官方代码示例如下:
wx.request ({
url:“测试。php ',//仅为示例,并非真实的接口地址
数据:{
x:”,
y:“
},
标题:{
“内容类型”:“application/json”//默认值
},
成功(res) {
console.log (res.data)
}
})
对于初学者而言,官方示例可能会看不怎么懂,所以我就以我自己当初项目驱动学习的方式(开发个人的记账小程序)来作为学习实例。
以登录来说,效果图如下:
此次示例包含表单校验和网络请求,代码如下:
<强> login.js
//页面/登录/login.js
页面({/* *
* 页面的初始数据
*/数据:{
用户名:“”,
密码:"
},
注册:函数(e) {
wx.navigateTo ({
url:“. ./注册/登记”
})
},
formSubmit:函数(e) {
console.log (e.detail.value.email);
console.log (e.detail.value.pwd)
var用户名=e.detail.value.email;
var密码=e.detail.value.pwd;
var emailReg=/^ [A-Za-z \ d] + ([_] [A-Za-z \ d] +) * @ (A-Za-z \ [d] + [-]) + A-Za-z \ [d] {2,4} $/;
如果(用户名==null | |用户名==" "){
wx.showToast ({
标题:“用户名不能为空”,
图标:“没有”,
持续时间:1500
})
}else if (! emailReg.test(用户名)){
wx.showToast ({
标题:“邮箱有误”,
图标:“没有”,
持续时间:1500
})
}else if(密码==null | |密码==" "){
wx.showToast ({
标题:“密码不能为空”,
图标:“没有”,
持续时间:1500
})
其他}{
wx.request ({
.globalData url: getApp ()。urlPath +“sysUser/登录”,
方法:“文章”,
数据:{
用户名:用户名、
密码:密码
},
标题:{
“内容类型”:“应用程序/x-www-form-urlencoded”
},
成功:函数(res) {
console.log (res.data);
如果(res.statusCode==200) {//访问正常
如果(res.data。代码==" 000000 "){
wx.showToast ({
标题:“登陆成功”,
图标:“成功”,
持续时间:2000
成功:函数(){
wx.navigateTo ({
url:“. ./管理/管理”
})
wx.setStorage ({
关键:“标识”,
数据:res.data.user.userCode
})
wx.setStorage ({
关键:“用户名”,
数据:res.data.user.userName
})
控制台。日志(“测试:”+ wx.getStorageSync(“用户名”));
}
})
如果(res.data}其他。代码==" 111111 "){
wx.showToast ({
标题:“密码错误”,
图标:“没有”,
持续时间:1500
})
其他}{
wx.showToast ({
标题:“该用户不存在”,
图标:“没有”,
持续时间:1500
})
}
其他}{
wx.showLoading ({
标题:“系统异常”,
失败
})
setTimeout(函数(){
wx.hideLoading ()
},2000)
}
}
})
}
}
})
关于login.js,主要是写通信逻辑的,与咱们平时写js差异并不大,唯一不同的就是api长得不样罢了。
关于其中的getApp () .globalData.urlPath相当于全局变量,不用我每次都写一大串https之类的。
表单校验的效果如图:
代码说明:
显示消息提示框(相当于js的警觉提示):
wx.showToast ({
标题:“邮箱有误”,
图标:“没有”,
持续时间:1500
})
获取输入属性为名称的值(相当于js中form.email.value,前提是这个表单名称要为形式,且表单中输入要的存在一个name="电子邮件")
e.detail.value.email;
跳转代码(相当于window.location.href):
wx.navigateTo ({
url:“. ./管理/管理”
})
至于wx.request,我想只要是写过ajax的,都很好理解。
