【微信小程序学习】收集表单数据、event对象传参、前端验证和后端验证、本地存储、个人中心页面和登录页面交互

最新推荐文章于 2025-03-12 08:57:36 发布

2301_82243710

最新推荐文章于 2025-03-12 08:57:36 发布

阅读量881

点赞数 24

文章标签：微信小程序学习前端

本文链接：https://blog.csdn.net/2301_82243710/article/details/139710811

版权

（5）密码正确返回给前端数据，提示用户登录成功（会携带用户的相关信息）

2、本地存储

从后端得到的用户数据返回到个人登录界面，需要用到本地存储，先将从服务器端得到的数据返回到本地存储中，

wx.setStorageSync(‘userInfo’, JSON.stringify(result.profile))

然后再从本地缓存中同步获取指定 key 的内容

let userInfo = wx.getStorageSync(‘userInfo’)

登录页面的界面

欢迎回来！

手机号码

密码

忘记密码?

还没有账号?

马上注册

登录页面的js

import request from ‘…/…/utils/request.js’

Page({

/**

页面的初始数据

data: {

phone:‘’, //手机号

password:‘’//用户密码

/**

生命周期函数–监听页面加载

onLoad: function (options) {

//表单项内容发生改变的回调

handleInput(event){

// let type = event.currentTarget.id; //id传值

// console.log(type, event.detail.value);

let type = event.currentTarget.dataset.type; //data-type=value

this.setData({

})

//登录的回调

async login(){

//1、收集表单数据

let{phone,password} = this.data;

//2、前端验证

1、内容为空

2、手机号格式不正确

3、手机号格式正确，验证通过

if(!phone){

//提示用户

wx.showToast({

title:“手机号不能为空”,

icon:‘none’

})

return;

}

//定义正则表达式

let phoneReg =/^1(3|4|5|6|7|8|9)\d{9}$/;

if(!phoneReg.test(phone)){

wx.showToast({

title: “手机号不正确”,

icon: ‘none’

})

return;

}

if(!password){

wx.showToast({

title: “密码不能为空”,

icon: ‘none’

})

return;

}

//后端验证

let result = await request(‘/login/cellphone’,{phone,password})

if(result.code === 200){

wx.showToast({

title: ‘登录成功’,

})

//将用户信息存储至本地

wx.setStorageSync(‘userInfo’, JSON.stringify(result.profile))

//跳转至个人中心

wx.reLaunch({

url: ‘/pages/personal/personal’,

})

}

else if(result.code === 400){

wx.showToast({

title: ‘手机号错误’,

icon:‘none’

})

}else if(result.code === 502){

wx.showToast({

title: ‘密码错误’,

icon:‘none’

})

}else{

wx.showToast({

title: ‘登录失败’,

icon:‘none’

})

}

个人中心的界面

立即开通

硅谷会员

atguigu Union

开通会员听歌, 撸代码

<view class=“cover-container”

bindtouchstart=“handleTouchStart”

bindtouchmove=“handleTouchMove”

bindtouchend=“handleTouchEnd”

style=“transform:{{coverTransform}}; transition:{{coverTransition}}”

我的消息

我的好友

个人主页

个性装扮

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

“title”>我的音乐

我的收藏

最后

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-Kq8AmdZz-1718465352984)]