1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序——如何实现账号的注册 登录?

微信小程序——如何实现账号的注册 登录?

时间:2022-07-21 05:55:43

相关推荐

微信小程序——如何实现账号的注册 登录?

用到的数据库表:

用户表:chat-user,用于存放用户的基本信息,比如账号、密码、头像等等

用户的注册

1.先获取用户信息

使用wx.getUserProfile接口,获取用户的基本信息

功能描述获取用户信息。页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo,详见 用户信息接口调整说明。

可以与一个事件进行绑定。

2.用户输入账号密码,把基本信息添加到数据库chat-user中

wx.cloud.database().collection("chat-user").add({data:{number:Date.now(),//账号pas:that.data.pas1,//密码touxiang:that.data.userInfo.avatarUrl,//头像name:that.data.userInfo.nickName,//用户微信名admin:that.data.zh//用户},

完成这一步,用户的基本信息就上传到数据库中了。

同时为了之后更好的调用程序,可以将获取到的值赋值给本页的data和全局的globalData。

注意:

2.1.账号为了防止重复,我们使用data.now时间函数生成。

2.2.在用户进行输入的时候,我们有两个框让让他们进行输入,一个是昵称,另外一个是密码。为了防止用户密码出现失误,可以让用户输入两次密码一致后才注册成功。

2.3.灵活的使用 wx.showToast,弹出窗口进行提示是否成功。

3.页面跳转

调用组件wx.switchTab,直接跳转到tabar页面。

进行登录

1.获取用户的账号和密码

使用input组件就就可以实现。

以获取密码为例

getpassword(e){//获取输入框密码console.log(e.detail.value)this.setData({pas1:e.detail.value})},

在js页面中,把获取到的信息负责给此页面中的data,为了下一步的数据中查询用户账号信息做准备。

2.根据获取到的账号密码,对数据库进行查询,获取查询到的结果。

注意:res._id是已经获取到的用户输入的账号。

//查询数据库获取这个数据 wx.cloud.database().collection("chat-user").doc(res._id).get({success(res1){app.globalData.userInfo=res1.data//赋值给全局wx.switchTab({url: '/pages/message/message',})wx.showToast({title: '登录成功!',})}})

查询成功后,把返回的值赋值给全局data和本页面的data,以便进行接下来的操作。

综合使用

1.用户点击登录进入界面,可以选择直接登录或者注册。

2.若直接登录,则执行登录逻辑。

3.如果用户进行注册,则执行注册逻辑。

首先跳转到注册页面,之后判断获取用户是否获取微信信息,若没有获取,可以加一个提升窗口。

如果已经获取用户信息,则执行注册逻辑。

4.每一次获取数据库表中的内容之后,都需要将内容赋值给本页的data和全局的data。

5.注册或者登录成功后,跳转到页面首页。

注意事项:success函数有两种写法,一种是箭头函数(不用进行that与this区分)写法是:success:(res)=>{}.

另外一种是之前版本的success,需要进行that与this区分。写法:success(){}.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。