会员管理小程序实战开发04-用户登录及注册

上一节我们介绍了用户信息数据源的创建及网格布局的使用，本节的话我们讲解用户的登录及注册功能任何开发。

在我们前述章节里介绍的，不论是管理员表还是用户表，都涉及到一个问题就是openid，那这个openid如何获取呢？如果我直接把代码贴给你，就缺失了一个思考的过程。既然这个是微信提出的概念，那么必然就会有官方文档作为对应。程序开发的基本功就是要会看官方文档，很多初学的开发同学可能会对官方文档颇有诟病，觉得不够基础。怎么说呢，当你进入到开发岗之后，自学能力是必要的，还是要试着可以看懂官方文档才好。

登录接口解读

首先我们读一下wx.login这个接口

在这里插入图片描述

openid的官方解释是用户在当前小程序的唯一标识，通过这个就可以识别是A用户而不是B用户。那我们需不需要调用这个接口，并不需要。为啥？因为云开发和微信是在一起的，他们是内部鉴权机制，如果你的服务是部署到了外部，那么才需要调用这个接口。

那不调用这个接口，难道低码里可以直接获取么？也没那么简单，虽说是内部鉴权，还是需要调用获取，那如何做呢？其实我们可以往底层想一想，既然使用的是云开发，那么肯定是云开发给提供解决方案啊，那么我们就看看云开发的解决方案是什么。

在这里插入图片描述

这里讲了可以通过使用云函数的形式来获取用户的openid。有初学的同学会问，什么是SDK，我百度一下它的定义：

在这里插入图片描述

其实就是开发人员对外提供的一个工具包，主要是为了做系统集成使用的。

包引入

官方文档的require是什么意思？继续百度

在这里插入图片描述

require是nodejs的语法，文档的意思是require引入了一个javascript的文件，并且执行了文件里边的代码，将结果返回。

有粉丝在群里说，零基础学习低代码真心难。有粉丝问，需要什么基础？其实你看到代码的第一行就明白了，看懂第一行需要js和nodejs的基础。那些说用低代码就不需要任何基础的大概率是在忽悠你。不是说低代码不需要基础，是说你零基础可以从低代码开始学习，过程中遇到啥概念就补齐对应的知识。这才是正确的学习思路。

npm基础知识

粉丝又问了，wx-server-sdk是什么东西？我要去哪里找？百度里搜索npm第二个就是npm的大本营

在这里插入图片描述

什么是npm，我理解他就是全球代码分享的一个大的仓库，js爱好者们，将自己实战的经验，以工具的形式放到这个大的仓库里，我们需要的时候可以将里边的工具安装到自己本地的开发环境里。

我们在官方的搜索框里输入wx-server-sdk

在这里插入图片描述

可以看一下搜索的结果

在这里插入图片描述

看作者是微信小程序官方贡献的一个库，7个月之前有过更新。刚入行的小伙伴可能还不太熟悉程序员这个行当，一般我们需要啥先看看开源的世界有没有现成的，有就用好了，确实没有再自己造。

有刨根问底的小伙伴，我就想知道这个库是干啥的，也不怕。钻研精神是做研发工作的必备了，你点击标题，可以看到官方给提供文档了。

在这里插入图片描述

恩，兜了一圈你发现又回到原点，是不是很奇妙

在这里插入图片描述

那这个库要如何安装使用呢？

在这里插入图片描述

我在低码里没看到安装呀，因为是官方的库，他早就给你安装好了。如果你用过官方的自定义组件功能，你就知道这一系列操作都是基本功。

我想看看源代码可不可以，点explore那个菜单，很抱歉，这个不是开源的，你看不了代码

在这里插入图片描述

dependencies是啥，每一个库都有自己的依赖库，就像我有一个好友，我的好友也还有好友，如果其中的一环断掉了，那么找到我就比较困难。咱们在前端开发的过程中最怕的就是安装依赖库的过程了，不知道啥时候有个依赖库安装不上，你的开发环境就建立不起来。好在低码开发不需要安装啥第三方的库，要不然体验会很痛苦。

还有一个页签也是需要关注的就是version，其实就是库的版本，不知道啥时候版本一高了你写的代码就会有问题，升级到最高版本或者回退到某个版本也是必备的知识。这块具体的实操呢，我们会放到自定义组件去讲解，现在讲有点纸上谈兵的感觉。

好了用了比较长的篇幅回答了那些勤学好问的粉丝的基础问题，怎么说呢，也许你看到的是一行代码，背后却是一个复杂的技术体系，既然准备进入就需要努力补齐基础知识吧。

云函数基础知识

那云函数是个啥概念呢？我们看看官方的定义

在这里插入图片描述

这个是云计算的几种形态吧，有SAAS、PASS、IAAS，这个云函数叫FAAS，函数即服务。不管它是啥，总之是为了我们方便使用的，省的下我们自己购买虚拟机，部署软件。直接写代码就可以了。

自定义连接器基础操作

那这个云函数在哪里写呢？新的版本叫自定义连接器，打开低码的控制台，找到自定义连接器

在这里插入图片描述

点击新建自定义连接器，在弹出的窗口里输入名称和标识

在这里插入图片描述

点击立即新建

在这里插入图片描述

修改方法的名称和标识，方法意图的话选择查询单条，类型的话选择自定义代码

在这里插入图片描述

初学可能这一步就又有疑问了，代码在哪里写？点击旁边的查看详情就会出现代码的编辑窗口。按ctr+a选中代码删掉，删掉的快捷键是back

在这里插入图片描述

然后复制如下代码到窗口里

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,  
}
}

在这里插入图片描述

cloud是啥意思？云朵的意思？cloud是一个变量名，意味着引入的sdk有了别名，这样后续调用里边的api的时候就可以通过别名加点的语法调用

代码贴好之后，点击方法测试，运行测试，这样就将代码进行了执行

在这里插入图片描述

当你看到成功时，表示你代码写的没有问题。通常我们的代码肯定是有返回值的，但是这个代码返回了空，空对象不能做结果映射，这就需要我们自己写出参

在这里插入图片描述

那我们的出参需要怎么创建呢？出参的结构需要和我们代码里的return语句对应，return就是返回结果的意思，我们返回的结果是什么？

return {
    openid: wxContext.OPENID,
    appid: wxContext.APPID,   
}

这个又是什么，这个就需要熟悉js的语法，js里以一对花括号来标识对象，对象里可以放置属性和值，属性和值用冒号作为区分

了解了基本概念后我们就需要给出参设置一个对象，点击添加出参，输入名称和标识，类型选择对象

在这里插入图片描述

然后就是给对象增加属性，在对象的操作栏里点击加号，增加属性

在这里插入图片描述

先设置第一个属性openid

在这里插入图片描述

然后再点击加号添加第二个属性，appid

在这里插入图片描述

加好了之后点击result左边的小三角，看一下层次关系

在这里插入图片描述

属性是有缩进的，必须保持一定的层级关系才可以正常保存。

方法创建好了之后我们就可以在列表上点击更多，把连接器发布了

在这里插入图片描述

自定义连接器的使用

自定义连接器创建好了之后要如何使用呢？但凡出来了新的东西，一般是需要先去官方网站上看看，文档里会教你使用的方法。

点击学习中心，点击文档中心的去查看按钮，就进入了官方文档

在这里插入图片描述

打开官方文档后，需要先关注产品动态，一般新的功能都会在动态里发布

在这里插入图片描述

我们可以看到，自定义连接器是可以在组件和自定义方法中使用

在这里插入图片描述

官方的示例代码

export default async function({event, data}) {
    const result = await app.cloud.callConnector({
        name: '自定义连接器标识',
        methodName: '方法标识',
        params: {}, // 方法入参
    });
}

好了，用法知道了，我们就思考一下，什么时候需要获取用户的openid。有两个场景，一是在程序加载的时候我们获取用户的openid用来和管理员表的数据作匹配，如果匹配到了我们就认为他是管理员，如果匹配不到我们就认为他是普通用户。

第二个场景就是在用户作登录的时候，我们会获取用户的基础信息，这个时候需要将用户的基础信息存入用户表里，在存入的时候将openid传入数据源，这样后续在查询用户的比如会员信息啊，消费记录啊都可以通过openid来过滤。

好了，本篇主要就是介绍前置的基础知识，为啥要介绍的这么详细呢？因为有的粉丝在学习的时候，因为是零基础，这些前置的知识没有导致他看到教程也无从下手，为了便于后续的学习，所以花了一定的篇幅介绍了一下，下一节我们就介绍自定义连机器如何在应用里使用。