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

原创

韩锴

发布于 2022-01-26 10:04:28

4.8K3

发布于 2022-01-26 10:04:28

文章被收录于专栏：低代码从入门到精通

在小程序开发中，我们可以拿到微信用户的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);
  }
}

然后给按钮定义点击事件，调用该方法