1.微信小程序项目结构认识
js文件用来写相关的逻辑操作,主要是用来操作数据
json文件用来写一些相关的配置
wxss相当于css用来写页面样式
wxml相当于html用来写页面的元素的
pages文件夹中可以存放多个文件夹,每个文件夹里面都是一套是js,json,wxss,wxml的文件结构
2.相关配置的写入
1.现将小程序的相关信息写入app.json文件
{
"pages":[
"pages/userLogin/login",
"pages/userRegist/regist",
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "佐仓小视频",
"navigationBarTextStyle": "black"
}
}
2.将相关配置写入app.js
//app.js
App({
//服务器的路径(因为该路径不能直接填写ip地址,所以这才采用的是内网穿透工具生成的外网url,并配置到本地的tomcat上)
serverUrl:"http://lex.s3.natapp.cc",
//该函数为将用户信息存入手机的缓存中
setGlobalUserInfo:function(user){
wx.setStorageSync("userInfo", user);
},
//从缓存中取出用户信息
getGlobalUserInfo: function (key) {
return wx.getStorageSync(key);
}
})
3.注册功能需求分析
- 用户在注册页面输入的内容不能为空,如果用户名或者密码为空则需要弹出提示消息(暂没有对用户名和密码长度做出限制)
- 用户在输入用户名和密码点击注册之后,要调用注册接口,在回调函数中进行判断,如果返回的状态码为200则说明注册成功,如果为500则说明注册失败,并提示错误信息给用户
- 注册成功之后会直接跳到登录界面
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{
var serverUrl=app.serverUrl;
wx.request({
url: serverUrl +'/regist',
method:'POST',
data:{
username:username,
password:password
},
header:{
'content-type': 'application/json'
},
success:function(res){
console.log(res.data)
if (res.data.status==200){
wx.showToast({
title: '恭喜你,注册成功',
icon:"none",
duration:3000
})
}else{
wx.showToast({
title: res.data.msg,
icon:"none",
duration:3000
})
}
}
})
}
},
goLoginPage:function(){
wx.navigateTo({
url: '../userLogin/login'
})
}
})
4.登录功能需求分析
登录功能需要对密码和用户名进行非空的判定,如果为空,给用户返回错误提示
点击登录按钮触发js事件并调用后台登录接口,如果回调函数返回200则说明登陆成功,则将后端返回的用户信息保存到手机的缓存中,并进行页面的跳转
如果500给用户提示错误信息
doLogin:function(e){
var me =this;
var formObject=e.detail.value;
var username = formObject.username;
var password = formObject.password;
var serverUrl=app.serverUrl;
if (username.length == 0 || password.length == 0) {
wx.showToast({
title: '用户名或密码不能为空',
icon: "none",
duration: 3000
})
}else{
// wx.showToast({
// title: '登录ing..',
// icon:"none"
// })
wx.showLoading({
title: '登陆ing',
})
wx.request({
url: serverUrl+'/login',
method:'POST',
data: {
username: username,
password: password
},
header: {
'content-type': 'application/json'
},
success:function(res){
if(res.data.status==200){
wx.showToast({
title: '登陆成功',
icon: "success"
})
// app.userInfo=res.data.data;
//将后端返回的用户信息存入缓存中
app.setGlobalUserInfo(res.data.data);
wx.redirectTo({
url: '../mine/mine'
)
}
}else{
wx.showToast({
title: '登陆失败',
icon: "none"
})
}
console.log(res.data);
}
})
}
}