点餐小程序实战教程04变量定义和初始化

news2024/9/21 16:32:53

1 什么是变量

在低代码开发中，变量是一个至关重要的概念。它们用于存储和管理数据，使我们能够在应用中动态地处理信息。微搭的变量类型主要包括文本、数字、布尔值、对象和数组，这些类型与 JavaScript 的变量类型相对应。理解这些基本概念将为你后续的开发打下坚实的基础。

微搭中一共有五种变量的类型，包括文字、数字、布尔值、对象、数组。

文字（String）：用于存储字符数据，例如用户的姓名、描述信息等。文字变量通常用引号括起来，如 “Hello, World!”。
数字（Number）：用于存储数值数据，可以是整数或浮点数。例如，42 或 3.14。
布尔值（Boolean）：用于表示真或假的值，只有两个可能的取值：true 或 false。布尔值常用于条件判断。
对象（Object）：用于存储键值对的集合，可以包含多个属性和方法。例如，一个用户对象可以包含姓名、年龄和邮箱等信息。
数组（Array）：用于存储一组有序的数据，可以是任意类型的变量。数组的元素可以通过索引访问，例如，[1, 2, 3] 或 [“apple”, “banana”, “cherry”]。

2 如何创建变量

创建变量的方法比较简单，打开我们的应用编辑器后，在代码区点击+号创建我们的变量
在这里插入图片描述
在打开的界面，选择新建自定义变量来创建我们的变量

3 具体该选择什么类型

创建变量需要选择什么类型，是和你的业务相关的。比如我们上一篇写了如何创建后端的API来实现用户的登录验证功能。那这一篇就需要结合登录的API来实现前端用户信息的获取。

初学者可能会有疑问，什么是对象呢？比如我们这个场景，我们在用户注册的时候采集了用户的昵称、头像、手机号。那在小程序一加载的时候我就需要获取这个信息。像这种结构的数据我们就可以使用对象来存储。

对象是一组键值对的集合，比如我们一个用户信息，作为一个对象，他的结构是

{nickName:"低代码布道师",avatarURL:"cloud:file/lowcode.png",phone:""}

对象的定义是用一组大括号括起来，里边是键值对。左边是键，右边是值，键值对用冒号分隔。值的话要根据在数据源字段的类型来决定，如果是文本那就用双引号括起来，如果是数字就直接写数字。如果是布尔值，那就写true或者false，也可以是对象和数组

有了基本了解之后，我们来定义一个user对象。对象还有一个知识点是作用域，就是在什么地方可以使用。如果是全局作用域，那就每个页面都可以使用，如果是页面作用域那么只有当前页面可以使用。使用的概念是在组件的属性绑定的时候，你可以看见看不见你自己定义的变量。

我们这里的用户对象，作用域就要选择全局，因为用户登录后，每个页面就不重复的获取身份信息了。

这个时候我们需要在全局旁边创建变量，变量类型选择对象
在这里插入图片描述
之后要修改变量的名称，改为user

4 变量的初始化

变量定义好之后我们需要初始化，就是将具体的值赋值给变量。那选择什么时间给user对象赋值呢？这就需要用到页面的什么周期的概念。

我们经常使用的是页面的显示onShow生命周期函数。在这个地方去加载用户信息，因为这个时候组件已经加载完毕了，不会出现各种异常的问题。

要想加载用户信息就需要调用我们写好的后端API，怎么调用呢？我们是通过编写自定义方法来调用的。

还是在全局旁边点击+号，这次就需要创建javascript方法了
在这里插入图片描述
将生成的默认代码替换成如下代码

export default async function ({ event, data }) {
  try {
    const userinfo = await $w.auth.getUserInfo();
    console.log("userinfo", userinfo);
    const openid = userinfo.openId ;
    console.log("openid", openid);

    const result = await $w.cloud.callDataSource({
      dataSourceName: 'userManager_ssztgij',
      methodName: 'customerLogin',
      params: { openid },
    });
    console.log("result",result)
    if(result.code==0){
      $w.app.dataset.state.user = result.data
    }
    
  } catch (error) {
    console.error("Error in main function:", error);
  }
}

在这里插入图片描述
有的同学可能直接就替换进去，然后就问，啥也没获取到呀。这个只是给了你代码的模板，你那的肯定和我是有不同的，这里需要注意替换我们dataSourceName，这个是你的后端API的标识。

打开你的控制台，找到基本信息
在这里插入图片描述
找到后替换到代码里

然后切换到APIs方法，如果方法标识你用的是默认生成的也需要替换一下，替换到我们的methodName里
在这里插入图片描述

5 await/async

老师，你的代码里的await是干啥的呀？

await和async就像情侣一样，总是成对的出现。async关键字用于定义一个异步函数。异步函数会返回一个 Promise 对象，这意味着我们可以在函数内部使用 await 来等待异步操作的完成。

那什么是异步呢，异步就是调用之后下边的代码会接着运行，不等待结果返回。那我们一般写逻辑的时候都是依赖于上一步的运行结果，这样弄了之后肯定就不符合预期了。

为了我们代码执行正确所以需要将我们整体的自定义方法声明为异步，就是在function前边写一个async就表示这个函数是异步的了。

函数声明为异步之后，里边的调用就可以使用await关键字，表示要等待结果的返回。

这里我们用了两次await关键字，第一次我们是调用了官方封装的鉴权API，可以获取用户的openId

const userinfo = await $w.auth.getUserInfo();
const openid = userinfo.openId

第二个await我们通过获取到的openid来调用我们的后端的API，去获取用户是否已经注册了

const result = await $w.cloud.callDataSource({
      dataSourceName: 'userManager_ssztgij',
      methodName: 'customerLogin',
      params: { openid },
    });