在小程序的开发中，可能起点就是用户的登录与注册了。和粉丝的互动过程中发现，对于用户的登录注册还是没有彻底掌握。我们本篇就来分析一下登录与注册如何实现。

小程序中的登录

在小程序中有一个概念叫openid，这个相当于登录小程序用户的唯一标识，每个微信用户都不同。那要如何拿到用户的唯一标识呢？在微搭低代码中是通过调用系统的api来获取的

let userinfo = await app.utils.getWXContext()

我们通过这行代码的调用来获取到用户的唯一标识，获取到之后我们其他页面也需要使用，那就需要把他存起来。全局变量的作用域是所有页面都可见，所以我们需要在变量中定义一个全局变量叫openid

在低码编辑器中如果需要使用全局变量的，是需要通过变量的路径来访问，我们这里的路径是

$app.dataset.state.openid

既然变量已经定义了，我们就可以将获取到的用户信息赋值给全局变量

app.dataset.state.openid = userinfo.OPENID

赋值语句是用=号来表达，=号左边的是需要赋值的变量，右边是赋予的具体的值。我们这里的userinfo是一个对象，使用了.的语法来获取其中的一个属性，OPENID 来赋值给全局变量。

拿到openid其实就算实现了用户的登录，然后我们可以使用openid作为查询条件，去我们的用户数据源去加载数据。如果加载到了，我们就将获取到的用户信息再赋值给全局变量。目的是如果已经注册过的用户不再继续往数据源里写入数据，而是直接展示。

const result = await app.cloud.callModel({name: 'user_ev6j94p',methodName: 'wedaGetRecords',params: {"where": [{"key": "openid","rel": "eq","val": app.dataset.state.openid}]}})

上边代码的意思是，访问user_ev6j9rp数据源，调用数据源的wedaGetRecords方法，入参是openid=全局变量获取到的openid。key是你的查询条件，eq表示做相等匹配，匹配的值是从全局变量里获取。

那如何来判断是否找到了呢？方法执行的返回结果是一个对象，它有一个属性叫total，表示查询到多少条数据。我们就可以通过判断这个记录总数是否大于等于1来判断用户是否已经存在了。

if (result.total >= 1) {app.dataset.state.imageurl = result.records[0].imageUrlapp.dataset.state.userid = result.records[0]._idapp.dataset.state.islogin = true}

如果存在，那么我就给全局变量赋值，分别给用户的头像赋值，用户的数据标识赋值，还有就是给是否注册赋予为真的结果。这三个全局变量的定义如下：

还有就是考虑上述的代码在哪执行，因为我们一打开小程序就要加载用户信息，所以应该是在全局生命周期函数里执行

我们需要有两个地方都执行加载，一个是小程序一启动时候，onAppLanch，另外一个就是小程序再次打开的时候onAppShow方法中。全部代码如下：

/*** 可通过 app 获取或修改全局应用的 变量 状态 等信息* 具体可以console.info 在编辑器Console面板查看更多信息* 如果需要 async-await，请在方法前 async**/
//import updateManager from './common/updateManager';
export default {async onAppLaunch(launchOpts) {//console.log('---------> LifeCycle onAppLaunch', launchOpts)let userinfo = await app.utils.getWXContext()app.dataset.state.openid = userinfo.OPENIDconst userInfo = await $app.auth.getUserInfo();console.log('openid:', app.dataset.state.openid);const result = await app.cloud.callModel({name: 'user_ev6j94p',methodName: 'wedaGetRecords',params: {"where": [{"key": "openid","rel": "eq","val": app.dataset.state.openid}]}})if (result.total >= 1) {app.dataset.state.imageurl = result.records[0].imageUrlapp.dataset.state.userid = result.records[0]._idapp.dataset.state.islogin = true}console.log('total:', result.total);},async onAppShow(appShowOpts) {//console.log('---------> LifeCycle onAppShow', appShowOpts)//updateManager();let userinfo = await app.utils.getWXContext()app.dataset.state.openid = userinfo.OPENIDconst userInfo = await $app.auth.getUserInfo();console.log('openid:', app.dataset.state.openid);const result = await app.cloud.callModel({name: 'user_ev6j94p',methodName: 'wedaGetRecords',params: {"where": [{"key": "openid","rel": "eq","val": app.dataset.state.openid}]}})if (result.total >= 1) {app.dataset.state.imageurl = result.records[0].imageUrlapp.dataset.state.userid = result.records[0]._idapp.dataset.state.islogin = true}console.log('total:', result.total);},onAppHide() {//console.log('---------> LifeCycle onAppHide')},onAppError(options) {//console.log('---------> LifeCycle onAppError', options)},onAppPageNotFound(options) {//console.log('---------> LifeCycle onAppPageNotFound', options)},onAppUnhandledRejection(options) {//console.log('---------> LifeCycle onAppUnhandledRejection', options)}
}

用户注册

用户登录的问题解决了之后，就是要考虑用户的注册问题。在微搭低代码获取用户信息提供了对应的组件，我们可以往页面中添加相应的组件

这个组件使用的时候要注意右侧的属性面板里的信息用途必须填写，否则点击按钮无法弹出授权按钮来。

要想让用户信息写入数据源中，我们需要给组件绑定事件，我们这里绑定的是用户授权信息成功这个事件

绑定的时候要选择自定义方法

这个方法要我们自己定义，主要是将用户的授权信息写入数据源中

export default async function({event, data}) {console.log(event.detail.avatarUrl)const result = await app.cloud.callModel({name:'user_ev6j94p',methodName:'wedaCreate',params:{openid:app.dataset.state.openid,nickName:event.detail.nickName,imageUrl:event.detail.avatarUrl}})$app.dataset.state.imageurl = event.detail.avatarUrl$app.dataset.state.userid = result._idconsole.log($app.dataset.state.userid)$app.dataset.state.islogin = true
}

写入方法本身不复杂，粉丝在照着教程做的时候最大的问题是发现，点击授权按钮时候按钮不自动消失，可以反复注册。第二个是头像没有自动显示。

要解决上边的问题，首先需要给注册按钮绑定条件展示。我们在登录功能里定义了一个全局变量islogin。如果未注册之前，这个变量的值是false，注册之后就变成了true。我们给注册按钮的条件展示绑定表达式，对islogin取一下反就可以

!app.dataset.state.islogin

用户的头像我们可以直接从全局变量里绑定

用户信息修改

当把用户信息写入之后，后续可能还有修改的需求，这就要求在页面点击修改按钮时候将用户的数据标识传入修改页面

数据绑定的时候我们从全局变量里选择。有的粉丝可能会有疑问，你这个userid是怎么有值呢？分为两种情况，第一种是用户刚注册的时候就直接点修改，这个时候我们是在注册的自定义方法呢获取的用户的数据标识

  $app.dataset.state.userid = result._id

第二种情况是在下一次启动小程序我们在全局生命周期里加载的用户的数据标识

app.dataset.state.userid = result.records[0]._id

这样就保证点击修改信息时候有值。当然还有一种情况是用户不点击注册按钮直接点击修改个人信息，这种情况数据库是不允许提交的，报一个错也行。

然后就是在修改界面我们可以直接使用表单容器来实现个人信息的修改

这里注意的是我们的数据标识是绑定我们页面定义的参数变量即可

总结

我们本篇详细的分解了一下用户的登录及注册功能，这两个场景在小程序开发中还是挺常见的，关键是要概念清晰，设置准确。把这个搭建好了，后边结合角色授权的功能就可以按照自己的需要进行功能拓展了。如果觉得有用，点赞、关注加评论呀。

小程序中实现用户的登录与注册相关推荐

微信小程序- css相比,wxss区别？小程序关联微信公众号如何确定用户的唯一性？微信小程序中的用户ID(openid和unionid)
1 与css相比, wxss区别? 1) 响应式长度 rpx 2) 样式导入 3) 小程序不支持通配符* *{ width:100rpx; height:100rpx; } 2 小程序关联微信公众号如 ...
java开发微信如何维护登录状态_微信小程序中做用户登录与登录态维护的实现详解...
总结大家都知道,在开发中提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户 ...
微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
微信小程序中判断用户是否已关注公众号的两种实现
背景: 最近的一个小程序项目中有这么一个需求:进入我的主页后, 如果用户没有关注过我们的公众号, 则展示一个引导关注公众号组件, 点击后跳转到一篇公众号文章, 指引用户进行关注,用户完成关注隐藏该组件 ...
微信小程序中获取用户微信公众号授权（openid）用来发送模板消息
需求: 由于小程序不能直接向用户发送模板消息,所以需要用公众号向用户发送模板消息. 于是需要将小程序的openid和公众号的openid绑定在一起.提供两种思路: 方法一: 1.微信小程序和公众号都绑 ...
微信小程序中的用户ID(openid和unionid)
前沿做过微信开发的同学,多多少少都会涉及到用户的唯一标示的问题.由于微信牢牢把控着用户的信息,因此当你需要在微信平台中获取用户的标示信息,必然要通过微信的平台接口来获取(当然,你可以通过你自己的平台 ...
微信小程序云开发用户身份登录_微信小程序+云开发实现欢迎登录注册
前段时间和同学一起做了一个小程序,用来参加学校的比赛,完成后把项目内容分割一下,贴到博客上面,算是学习记录和总结吧. 因为是学生党,而且并没有很大的需要,所以选择了微信小程序为开发者提供的" ...
微信小程序云开发用户身份登录_微信小程序开发用户授权登录(下)
如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用.网站应用和公众帐号(包括小程序),用户的 Un ...
微信小程序云开发用户身份登录_云开发版的微信商城小程序第一章
我们经过前面小程序基础和云开发基础的学习,今天就来带大家实现一个综合项目,上线一款属于自己的微信商城小程序. 文末有彩蛋如果你有小程序基础可以跳过上面的基础,直接看下面的,如果没有小程序基础,建议你 ...
小程序中引导用户关注公众号
众所周知,小程序现在越来越普遍,应市场需求,越来越多的开发者在学习小程序的开发,因为小程序刚起步,所以有很多问题还不完善,微信开放平台也在日渐完善,小程序文档也在不断优化,现在小程序中可以引导用户关注 ...

小程序中实现用户的登录与注册

小程序中的登录

用户注册

用户信息修改

总结

小程序中实现用户的登录与注册相关推荐

最新文章

热门文章