微搭低代码实现用户登录及注册功能 |
您所在的位置：网站首页 › 一键注册及登录 › 微搭低代码实现用户登录及注册功能 |
微搭低代码实现用户登录及注册功能
|
在小程序开发中，我们可以拿到微信用户的openid，openid可以作为用户的唯一标识，在查询数据的时候可以进行数据过滤实现查询自己提交的数据。那微搭中是否也有openid这个概念，可以获取用户自己提交的数据呢？ 答案是肯定的，那要怎么去做呢？思路是先创建一个数据源方法，在数据源中返回openid，然后低代码中可以调用数据源的方法并且赋值给全局变量，这样在后续的业务中从全局变量就可以获取openid了，方便做数据权限的控制。 为了实现这个目的，我们从创建数据源开始。 创建数据源我们先创建一个用户管理的数据源，包含用户的基础信息，并且增加一个openid的字段  在这里插入图片描述添加一个自定义方法，返回用户的openid  在这里插入图片描述代码语言：javascript复制const cloud = require('wx-server-sdk');
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV,
})
module.exports = async function (params, context) {
const wxContext = cloud.getWXContext()
return {
openid: wxContext.OPENID,
appid: wxContext.APPID,
}
}创建应用我们新建一个空白应用，类型选择小程序  在这里插入图片描述创建一个空白页，在页面中添加如下组件  在这里插入图片描述组件的逻辑是如果是未登录就显示一个图片和未登录的文本，点击登录按钮，授权成功后就出现用户的头像和昵称 为了实现上述的逻辑我们先定义一个用户的变量  在这里插入图片描述初始值设置如下 代码语言：javascript复制{ "city": "", "gender": "", "openid": "", "country": "", "language": "zh_CN", "nickName": "", "province": "", "avatarUrl": "" }然后将第一个图片和第二个文本组件绑定为变量中的头像和昵称  在这里插入图片描述 在这里插入图片描述我们在组件上的if判断通过表达式来判断组件是否显示  在这里插入图片描述未登录时候显示的组件的If判断正好和上边的表达式是反着的  在这里插入图片描述这样就实现了未登录时候和登录后页面效果的切换 接着就需要实现登录的逻辑，给页面定义一个低码方法，在小程序加载的时候我们去获取openid  在这里插入图片描述代码语言：javascript复制export default {
async onAppLaunch(launchOpts) {
//console.log('---------> LifeCycle onAppLaunch', launchOpts)
const objData = await app.cloud.dataSources.userinfo_xpw5sxe.getopenid();
app.dataset.state.useropenid=objData.openid; //赋给全局变量
},
onAppShow(appShowOpts) {
//console.log('---------> LifeCycle onAppShow', appShowOpts)
},
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)
}
}在当前页面定义低代码方法，实现登录逻辑  在这里插入图片描述代码语言：javascript复制/*
* 可通过 $page.handler.xxx 访问这里定义的方法
* 注意：该方法仅在所属的页面有效
* 如果需要 async-await，请修改成 export default async function() {}
*/
export default async function({event, data}) {
try {
wx.getUserProfile({
desc: '用于完善用户信息',
success:async (res) => {
//const data = await app.cloud.dataSources.userinfo_xpw5sxe.wedaCreate(res);
console.log("res.userinfo",res.userInfo)
$page.dataset.state.userinfo = res.userInfo
$page.dataset.state.userinfo.openid = app.dataset.state.useropenid
let ret =await app.dataSources.userinfo_xpw5sxe.wedaCreate($page.dataset.state.userinfo);
console.log(ret)
}
})
//console.log("userinfo",$page.dataset.state.userinfo)
//const ret = await app.dataSources.userinfo_xpw5sxe.wedaCreate($page.dataset.state.userinfo);
//console.log(ret)
} catch (e) {
console.log('错误代码', e.code, '错误信息', e.message);
}
}然后给按钮定义点击事件，调用该方法  在这里插入图片描述预览发布功能开发好后，点击发布，发布成预览版  在这里插入图片描述授权登录之后会往数据源里写一条记录，记录用户的信息  在这里插入图片描述这样用户登录注册的功能就做好了，后续的提交页面都需要带上openid，方便我们在查询页面根据openid来过滤数据。 |
【本文地址】