微搭低代码中的用户登录及注册

Posted 2022-04-19 低代码布道师

传统开发用户登录注册，一般是需要考虑建立用户表，用户注册的话可以由管理员主动添加，将分配好的账号和密码告知用户。如果是互联网应用允许用户自主注册。

低代码中因为没有外部用户管理这个模块，所以登录注册需要我们自己实现。实现的逻辑是我们建立一个用户的数据源，记录用户的openid、微信昵称、头像等信息。

这里有个技术点是openid，在小程序中，如果用户访问了你的小程序，每个人都有一个唯一标识，openid，这个标识可以标识是哪个用户。

知道了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() //获取openid与appid
    return 
        openid: wxContext.OPENID
        
    

随着javascript技术的发展，js也可以像java一样进行模块的导入导出，我们的代码的第一行

const cloud = require('wx-server-sdk');

通过require关键词引入了微信管理端的SDK，SDK是厂商给开发者提供的一个开发工具包，里边封装了各种各样的api，方便我们调用。

const关键词是定义一个常量，常量不允许改变其中的值。

cloud.init(
    env: cloud.DYNAMIC_CURRENT_ENV,
)   //初始化环境

这一句是初始化环境，初始化好了之后就可以获取环境里的具体的信息了。

module.exports = async function (params, context) 

这一段表示模块的导出，既可以导出方法，也可以导出变量，我们导出的变量是在

return 
        openid: wxContext.OPENID
        
    

return 语句中定义的，一对儿表示对象，里边定义了一个属性openid，在低代码中可以用对象.属性的语法来获取到其中的值。

 const wxContext = cloud.getWXContext()

这一句就是获取当前会话的上下文，会话就是你打开小程序之后与服务器建立的通道，这个通道里已经给你打了标签，里边的各种信息都可以获取。

以上就是对云函数的一个基本解释，代码看懂之后，如果我们需要使用还需要先测试

一个方法调用的时候一般包含入参和出参，入参是调用时候传入的条件，出参是方法执行返回的结果。一般可以直接点击出参映射自动将结果填充到出参里。

我们这个方法调用的时候返回是一个空对象，因为openid的值是需要在小程序里才可以获取到，所以需要我们自主添加一个出参，添加openid即可

低代码中调用自定义连接器

自定义连接器创建好后，在哪调用呢？因为我们小程序一启动的时候就需要获取用户的openid，所以需要在生命周期函数中调用。打开低代码编辑器，在全局生命周期函数中调用自定义连接器。

输入如下代码：

/**
 * 可通过 app 获取或修改全局应用的 变量 状态 等信息
 * 具体可以console.info 在编辑器Console面板查看更多信息
 * 如果需要 async-await，请在方法前 async 
 **/ 
export default 
  async onAppLaunch(launchOpts) 
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
    const result = await app.cloud.callConnector(
        name: 'getuserinfo_8yjxd1q',
        methodName: 'getopenid',
        params: , // 方法入参
    );
    console.log(result.openid)
    app.dataset.state.openid = result.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)
  

自定义连接器是通过app.cloud.callConnector这个api来调用，里边有三个参数，name是自定义连接器的标识，methodName是方法名，params是入参，分别对应如下参数

这样在小程序启动的时候就获取到了用户的登录信息了

获取用户的信息

一般在小程序里，我们在我的模块，里设置用户登录和注册的功能，最近微搭更新了一个新的组件获取用户信息，可以用这个组件来获取

将这个组件添加到页面上

业务组件的特点是已经将微信的api封装到组件里，我们直接使用就好了。但是需要自己写低代码方法来获取事件调用后的返回值，我们这里需要将用户授权后获取到的头像和昵称存入数据库中。所以创建一个低代码方法，方法如下：

export default async function(event, data) 
    console.log(event)
    const result = await app.cloud.callModel(
        name: 'user_uzynu99',
        methodName: 'wedaCreate',
        params: 
            nickname:event.detail.nickName,
            usericon:event.detail.avatarUrl,
            openid:app.dataset.state.openid
        , // 方法入参
    );

给组件的事件设置自定义方法

这样就是实现了登录之后将用户信息写入到数据库中

总结

我们本节介绍了用户登录注册的总体流程，要想熟练使用低码工具开发小程序，就需要对组件、低码方法、数据源基本操作熟练掌握，在开发的过程中就不会感到困难了，照着教程练习一下吧。