微搭低代码实现用户登录及注册功能

Posted 2022-02-17 低代码布道师

在小程序开发中，我们可以拿到微信用户的openid，openid可以作为用户的唯一标识，在查询数据的时候可以进行数据过滤实现查询自己提交的数据。那微搭中是否也有openid这个概念，可以获取用户自己提交的数据呢？

答案是肯定的，那要怎么去做呢？思路是先创建一个数据源方法，在数据源中返回openid，然后低代码中可以调用数据源的方法并且赋值给全局变量，这样在后续的业务中从全局变量就可以获取openid了，方便做数据权限的控制。

为了实现这个目的，我们从创建数据源开始。

创建数据源

我们先创建一个用户管理的数据源，包含用户的基础信息，并且增加一个openid的字段

添加一个自定义方法，返回用户的openid

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,
        
    

创建应用

我们新建一个空白应用，类型选择小程序

创建一个空白页，在页面中添加如下组件

组件的逻辑是如果是未登录就显示一个图片和未登录的文本，点击登录按钮，授权成功后就出现用户的头像和昵称

为了实现上述的逻辑我们先定义一个用户的变量

初始值设置如下

  "city": "",
  "gender": "",
  "openid": "",
  "country": "",
  "language": "zh_CN",
  "nickName": "",
  "province": "",
  "avatarUrl": ""

然后将第一个图片和第二个文本组件绑定为变量中的头像和昵称


我们在组件上的if判断通过表达式来判断组件是否显示

未登录时候显示的组件的If判断正好和上边的表达式是反着的

这样就实现了未登录时候和登录后页面效果的切换

接着就需要实现登录的逻辑，给页面定义一个低码方法，在小程序加载的时候我们去获取openid

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)
  

在当前页面定义低代码方法，实现登录逻辑

/*
* 可通过 $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来过滤数据。