点餐小程序实战教程03-用户注册

我们上一篇介绍了如何创建用户数据源，有了数据源之后就需要思考如何判断用户是否注册过。根据用户在系统中的状态来判断是引导到注册页面还是直接显示首页。

1 前端API

判断用户是否注册，需要拿到用户登录状态的信息。我们在上一篇已经分析了微搭支持的几种登录形式，如果选用了默认方式，那么系统就变成了匿名登录。

匿名登录的状态我们是可以获取到用户的openid的。一般如果你采用自建服务器搭建小程序，需要调用微信的登录接口来换取openid，微搭因为是自家的产品，内部已经和微信侧集成好了，登录认证这块就不需要我们再去做了。

那如何获取登录用户的openid呢？微搭已经提供了内置的接口供我们调用

打开接口文档

https://docs.cloudbase.net/lowcode/api/auth

2 异步调用

微搭的技术栈是javascript，JavaScript的api大多都是异步的。那什么是异步的呢，就是当前你这个api调用的时候他不会立刻返回结果，而是继续执行后续的代码。

那如果我们要等待返回结果怎么办呢？这就需要用到async/await关键字，await是等待的意思，表示要等待程序调用结果的返回。async表示异步的意思，但是要比await关键字高一个级别，比如你在方法内部使用await了，那方法本身就需要增加async关键字来声明方法是异步方法。

上述的规则并不是微搭本身的特点，他是javascript语法上的要求。很多初学者觉得微搭入门比较困难，难不在产品本身上，难在了使用产品的前置条件上。

比如我最近比较喜欢无弦吉他，它内部可以设置27个和弦，然后将两种基本指法封装到了两个拨片上，看似很容易就可以弹，但是前提你要懂乐理，要知道各种节奏。

按照同样的类比，微搭其实就是把编程也拆解成了各种组件的组合和api的调用，但是怎么玩的转就需要你懂编程的基础知识一样。

3 创建自定义应用

基本概念了解后，我们就开始搭建程序，打开控制台，点击创建应用，点击新建自定义应用

修改一下应用的名称，改为点餐小程序

4 创建自定义方法

然后在代码区点击+号，新建一个javascript方法


创建后微搭会自动帮我们生成代码模板，我们来讲解一下模板的意思

/**
 * 
 * 可通过 $page 获取或修改当前页面的 变量 状态 handler lifecycle 等信息
 * 可通过 app 获取或修改全局应用的 变量 状态 等信息
 * 具体可以console.info 在编辑器Console面板查看更多信息
 * 注意：该方法仅在所属的页面有效
 * 如果需要 async-await，请修改成 export default async function() {}
 * 帮助文档 https://cloud.tencent.com/document/product/1301/57912
 **/

/**
 * @param {Object} event - 事件对象
 * @param {string} event.type - 事件名
 * @param {any} event.detail - 事件携带自定义数据
 *
 * @param {Object} data
 * @param {any} data.target - 获取事件传参的数据
 **/
export default function({event, data}) {

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

首先要明白一个概念是模块的概念，JavaScript为了更好的管理程序，将不同功能的方法分为不同的模块，模块有命名导出和默认导出。

微搭生成的叫默认导出，我们使用了export default表示默认导出。function关键字表示我们这里定义了一个方法，方法是一组代码的集合体，主要是为了进行功能拆分，不同的业务逻辑我们要拆分到不同的方法里。

而小括号表示方法的入参，如果你在方法里写了return语句，表示方法调用后的返回值

这里{event,data}表示解构赋值，在调用这个方法时候会传入一个对象，并解构赋值到event和data两个参数里

event表示事件本身，比如我们小程序点击就触发了点击事件，我们通常会通过event.detail.value来获取组件的值，比如在查询场景我们可以获取到单行输入组件的输入值

data表示入参，在调用这个方法时可以传入参数，通过data.target就可以得到具体的值

5 获取用户的openid

结合上边的基础知识我们来获取一下用户的openid，在自定义方法中输入如下代码

export default async function({event, data}) {
   const userInfo = await $w.auth.getUserInfo()
   const openid = userInfo.openId
   console.log("openid",openid)
}
1
2
3
4
5

方法里的第一行，我们调用了获取登录用户信息的api，await我们表示要等待返回调用的结果，在方法定义上自然要加上async关键字

而const是表示常量定义的关键字，我们通过这个关键字就声明了一个常量，userInfo表示给常量起一个名字，=号表示是赋值的意思。这句话执行之后就将api返回的结果赋值给了userInfo

第二句代码的意思是将userInfo的openId属性赋值给openid常量

第三句是向控制台打印一下openid具体的值

点击保存按钮让我们的代码同步到服务器里，之后可以改一下方法的名字，修改为getUserInfo

6 生命周期函数

自定义方法创建成功后，就需要考虑在什么时机调用。判断用户是否注册通常需要小程序一加载的时候就需要获取，我们这里考虑在首页显示之后来判断用户是否注册。

点击页面组件，在页面的onShow方法调用我们的自定义方法



设置好之后打开我们的开发调试工具，可以看到openid已经打印了出来

但为什么openid没有正常出现呢？因为在浏览器里是H5的环境，凡是涉及到微信侧调用的，都需要发布成小程序在手机里预览。我们下一节讲解一下如何在手机里进行调试

总结

本篇我们讲解了一些基本的技术概念，包括异步调用，前端API，获取用户的openid。也介绍了自定义应用的创建方法、自定义方法的使用以及生命周期函数的作用。这些内容还需要你实际操作才可以熟练掌握。