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

news2024/9/20 18:40:53

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

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.openId
   console.log("openid",openid)
}

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

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

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

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

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

在这里插入图片描述

6 生命周期函数

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

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

总结

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

线程的详解

创建状态 就绪状态 阻塞状态 运行状态 死亡状态 常用方法 setPriority(ing newPriority) 更改线程的优先级 sleep(long millis) 在指定的毫秒数内让当前正在执行的线程休眠 join() 等待该线程终止 yield() 暂停当前正在执行的线程对象,并执行其他线程 inte…

51单片机+EC11编码器实现可调参菜单+OLED屏幕显示

51单片机+EC11编码器实现可调参菜单+OLED屏幕显示 📍相关篇《stc单片机使用外部中断+EC11编码器实现计数功能》 🎈《STC单片机+EC11编码器实现调节PWM输出占空比》 🌼实际操作效果 🍁整个项目实现框架: 📓EC11接线原理图: 📓项目工程简介 📝仅凭借一个EC11编…

Python爬虫解决中文乱码

目录 一、中文乱码 二、chardet.detect()解决 三、在页面查找编码格式解决 一、中文乱码 问题在于文本的编码格式不正确 import requestsurlhttps://www.shicimingju.com/book/sanguoyanyi.html headers{User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKi…

标准差椭圆算法实现

一、标准差椭圆介绍 (一)方法介绍 标准差椭圆是一种用于描述多元数据集的离散程度和相关性的可视化工具。它可以帮助我们直观地了解数据的分布情况、方向和离散程度,以及不同变量之间的关系。 标准差椭圆的计算公式如下:…

模型训练环境相关(CUDA、PyTorch)

模型训练环境相关(CUDA、PyTorch) 1. 查看当前 GPU 所能支持的最高版本的 CUDA2. 如何判断是否安装了 CUDA3. 安装 PyTorch3.1 创建虚拟环境3.2 激活并进入虚拟环境3.3 安装 PyTorch 1. 查看当前 GPU 所能支持的最高版本的 CUDA 打开 NVIDIA 控制面板&a…

【Java】抽象类案例

需求:加入我们在开发一个系统时 需要对员工(Employee)类进行设计,员工包含3个属性:姓名、工号(number)以及工资(salary)。 经理(Manager)也是员工…

mysql面试题16:说说分库与分表的设计?常用的分库分表中间件有哪些?分库分表可能遇到的问题有哪些?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:说说分库与分表的设计? 在MySQL中,分库与分表是常用的数据库水平扩展技术,可以提高数据库的吞吐量和扩展性。下面将具体讲解MySQL中分库与分表…

机器视觉工程师努力工作确实不一定涨工资,但是努力工作,确实有很大可能涨工资

机器视觉工程师努力工作确实不一定涨工资,但是努力工作,确实有很大可能涨工资 其实在我们机器视觉工程张薪资方面,正常是一年两次调整周期。

基于Java的网上邮轮预定系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

中秋时节赏明月,五子棋戏月饼趣 — Flutter中秋限定版五子棋

前言 当中秋时节来临,我们都期待着与亲人朋友共度这个美好的节日。这个时候,除了传统的赏月和品尝美味的月饼,我还有一个特别的建议——尝试一款有趣的Flutter五子棋游戏!这款五子棋游戏以中秋为主题,游戏的棋子也可爱…

【计算机网络】HTTPS协议详解

文章目录 一、HTTPS协议 介绍 1、1 HTTP协议不安全的体现 1、2 什么是 HTTPS协议 二、加密的一些概念 2、1 怎么理解加密 2、2 为什么要加密 2、3 常见的加密方式 2、2、1 对称加密 2、2、2 非对称加密 三、HTTPS协议探究加密过程 3、1 只使用对称加密 3、2 只是用非对称加密 3…

Discuz!X 3.4任意文件删除漏洞

复现过程: 1.访问http://x.x.x/robots.txt(文件存在) 2.登录弱口令 账号:admin密码:admin 3.来到个人设置页面找到自己的formhash: 4.点击保存,抓包 来到这个参数:birthprovin…

C#开发的OpenRA游戏之电力系统之一

C#开发的OpenRA游戏之电力系统之一 前面已经分析过雷达地图显示,在雷达地图的下面有一个显示电力数量显示,如下图: 从上图看到电力的数量为0,所以这时候就处于低电力的模式。 要在这里显示电力,那么就需要在界面上做一点编辑,是在yaml文件定义它: Container@POWERBAR…

基于springboot的大创管理系统

目录 前言 一、技术栈 二、系统功能介绍 项目中检管理 专家评审管理 项目申报管理 项目结项管理 学生注册管理 优秀项目信息 项目信息申报 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛的应用,管理…

Qt 设置软件的版本信息:QMake、CMake工程

本文借鉴了Qt 设置软件的版本信息 - 疯狂delphi - 博客园 (cnblogs.com) 在原文基础增加了CMake工程实现的方法。 Qt设置软件的版本等信息 对于Qt开发的软件,我们如何去方便的查看其软件的版本信息。这里提供了几种方式。 在运行程序期间设置版本信息 大部分的程序…

【NeurIPS 2023】Backdoor对抗攻防论文汇总

NeurIPS 对抗攻防论文 NeurIPS2022|对抗攻防论文整理 - 知乎 NeurIPS 2023 Papers BIRD: Generalizable Backdoor Detection and Removal for Deep Reinforcement Learning https://neurips.cc/virtual/2023/poster/70618 摘要: 后门攻击对深度强化学习&…

Nginx在CentOS上的安装部署、RabbitMQ在CentOS上安装部署

目录 1. Nginx在CentOS上的安装部署 1.1 Nginx简介 1.2 Nginx安装 1.2.1 安装yum依赖程序 1.2.2 手动添加,nginx的yum仓库 1.2.3 通过yum安装最新稳定版的nginx 1.2.4 启动 1.2.5 配置防火墙放行 1.2.6 启动后浏览器输入Linux服务器的IP地址或主机…

微信支付费率降低到0.2%,商家收款开户手续费0.6%降低的操作方法

在如今的数字时代,移动支付已成为人们日常生活中必不可少的一部分。微信支付作为国内最受欢迎的移动支付平台,一直致力于为商家和个人提供最便捷、安全的支付方式。如果可以将微信支付将费率降低到仅为0.2%,这无疑给广大商家带来了巨大的利好…

基于SpringBoot的网上超市系统

基于SpringBoot的网上超市系统的设计与实现 开发语言:Java数据库:MySQL技术:SpringBootMyBatis工具:IDEA/Ecilpse、Navicat、Maven 【主要功能】 角色:用户、管理员 管理员:个人中心、用户管理、商品分类…

基于Java的校园跑腿接单管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…