点餐小程序实战教程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}) {}

首先要明白一个概念是模块的概念,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.openIdconsole.log("openid",openid)
}

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

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

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

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

在这里插入图片描述
点击保存按钮让我们的代码同步到服务器里,之后可以改一下方法的名字,修改为getUserInfo

在这里插入图片描述

6 生命周期函数

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

点击页面组件,在页面的onShow方法调用我们的自定义方法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
设置好之后打开我们的开发调试工具,可以看到openid已经打印了出来
在这里插入图片描述
但为什么openid没有正常出现呢?因为在浏览器里是H5的环境,凡是涉及到微信侧调用的,都需要发布成小程序在手机里预览。我们下一节讲解一下如何在手机里进行调试

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/125152.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1300*D. Alice, Bob and Candies(模拟)

Problem - 1352D - Codeforces 解析&#xff1a; 模拟即可。 #include<bits/stdc.h> using namespace std; #define int long long const int N2e55; int t,n,a[N]; signed main(){scanf("%lld",&t);while(t--){scanf("%lld",&n);for(int i…

2023年中国智能电视柜产量、需求量、市场规模及行业价格走势[图]

电视柜是随着电视机的发展和普及而演变出的家具种类&#xff0c;其主要作用是承载电视机&#xff0c;又称视听柜&#xff0c;随着生活水平的提高&#xff0c;与电视机相配套的电器设备也成为电视柜的收纳对象。 随着智能家具的发展&#xff0c;智能电视机柜的造型和风格都是有了…

Spring Boot中的@Controller使用教程

一 Controller使用方法&#xff0c;如下所示&#xff1a; Controller是SpringBoot里最基本的组件&#xff0c;他的作用是把用户提交来的请求通过对URL的匹配&#xff0c;分配个不同的接收器&#xff0c;再进行处理&#xff0c;然后向用户返回结果。下面通过本文给大家介绍Spr…

【数据库——MySQL】(14)过程式对象程序设计——游标、触发器

目录 1. 游标1.1 声明游标1.2 打开游标1.3 读取游标1.4 关闭游标1.5 游标示例 2. 触发器2.1 创建触发器2.2 修改触发器2.3 删除触发器2.4 触发器类型2.5 触发器示例 参考书籍 1. 游标 游标一般和存储过程一起配合使用。 1.1 声明游标 要使用游标&#xff0c;需要用到 DECLAR…

Docker基本管理

虚拟化产品&#xff1a; 1.寄居架构 2.原生架构 Docker 基本管理 docker 发展历史 https://www.cnblogs.com/rongba/articles/14782624.html -----------------Docker 概述--------------------------- Docker是一个开源的应用容器引擎&#xff0c;基于go语言开发并遵循了a…

英伟达NVIDIA驱动安装

一般&#xff0c;我们新的显卡上机或者新系统可能就需要重新安装显卡驱动。或者是我们在配置深度学习环境时候&#xff0c;需要手动安装驱动。 官网地址&#xff1a;官方高级驱动搜索 | NVIDIA 我们选择好自己需要的驱动后直接安装即可 下载的时候&#xff0c;选择自己需要的驱…

SSRF+redis未授权漏洞复现

1.SSRF漏洞简介 SSRF&#xff08;Server-Side Request Forgery&#xff09;即服务器端请求伪造&#xff0c;是一种由攻击者构造攻击链传给服务器&#xff0c;服务器执行并发起请求造成安全问题的漏洞&#xff0c;一般用来在外网探测或攻击内网服务。当网站需要调用指定URL地址…

Linux基本指令介绍系列第四篇

文章目录 前言一、Linux基本指令介绍1、more指令2、less指令3、head指令4、tail指令5、bc指令6、管道文件介绍7、与时间相关的指令 总结 前言 本文介绍Linux使用时的部分指令&#xff0c;读者如果想了解更多基本指令的使用&#xff0c;可以关注博主的后续的文章。 博主使用的实…

Shiro应用到Web Application

一、权限基础 a) 认证(你是谁&#xff1f;) 判断你(被认证者)是谁的过程。通常被认证者提供用户名和密码。 常见的认证包含如下几种&#xff1a; 匿名认证&#xff1a;允许访问资源&#xff0c;不做任何类型的安全检查。表单认证&#xff1a;访问资源之前&#xff0c;需要提…

【Linux】进程探秘

文章目录 一、什么是进程&#xff1f;1.1写一个进程 二、操作系统是如何管理的进程的呢&#xff1f;2.1描述进程-PCB2.2组织进程 三、Linux下是怎么做的&#xff1f;3.1task_struct-PCB的一种3.2task_ struct内容分类3.3linux中组织进程3.4查看进程的相关属性 &#x1f340;小结…

SpringCloud Alibaba - Seata 四种分布式事务解决方案(XA、AT)+ 实践部署(上)

目录 一、Seata 分布式事务解决方案 1.1、XA 模式 1.1.1、XA模式理论 第一阶段&#xff1a; 第二阶段&#xff1a; 1.1.2、Seata 框架中的 XA 模式 第一阶段&#xff1a; 第二阶段&#xff1a; 1.1.3、XA 模式的优缺点 1.2.4、实现Seata 的 XA 模式 a&#xff09;修改…

数组结构与算法

文章目录 数据结构与算法稀疏数组sparse队列单向链表双向链表单向环形列表&#xff1a;CircleSingleLinkedList栈递归排序算法快速排序思路 树赫夫曼树 &#xff08;HuffmanTree&#xff09;二叉排序树&#xff08;Binary sort tree&#xff09;构建二叉树遍历二叉树 平衡二叉树…