点餐小程序实战教程20广告管理

目录

  • 1 创建数据源
  • 2 添加轮播容器
  • 3 创建变量
  • 4 绑定变量
  • 5 预览应用
  • 总结

一般餐厅需要有一些宣传,在我们的点餐页面可以在顶部加载广告位。广告主要是用轮播图的形式进行展示,本节我们介绍一下如果显示广告。

1 创建数据源

打开控制台,点击应用,点击前往云开发平台
在这里插入图片描述
选择云数据库,点击+号创建数据模型
在这里插入图片描述
选择创建数据模型,选择从空白创建,选择文档型数据库
在这里插入图片描述
输入模型名称、模型标识,创建图片字段,类型选择图片
在这里插入图片描述
增加一个是否显示的字段,类型选择布尔值
在这里插入图片描述
切换到权限设置,将权限改为全部用户可读,管理员可写
在这里插入图片描述

2 添加轮播容器

数据模型创建之后,目前只是提供了正式库,我们需要从应用部分切换到旧版编辑器,录入数据。

点击可视化开发,打开我们的小程序
在这里插入图片描述
点击返回旧版编辑器
在这里插入图片描述
选择数据源的图标
在这里插入图片描述
选择我们刚刚创建的数据源,点击添加一行
在这里插入图片描述
录入测试数据
在这里插入图片描述
在顶部添加一个轮播容器
在这里插入图片描述

3 创建变量

轮播容器里的图片我们需要从数据源中取出,为此需要创建一个变量用来读取图片信息。从当前页面创建变量,选择新建内置表查询
在这里插入图片描述
数据源选择广告管理,触发方式选择入参变化时自动执行
在这里插入图片描述
增加查询条件,设置为是否显示等于true
在这里插入图片描述
修改一下变量名称为swaperList
在这里插入图片描述

4 绑定变量

变量创建好了之后就需要把变量的值绑定到组件上。我们目前创建的Query返回结果里,可以访问records属性得到数据,具体可以点击变量的运行看到返回的JSON数据
在这里插入图片描述
records本身是一个数组,可以用下标去获取具体的某条数据,返回的数据是个对象,可以用点的语法访问具体的属性

这个时候我们就可以给图片绑定具体的地址了,先选中第一个图片,在图片地址的fx进行绑定
在这里插入图片描述
逐级展开变量的属性,选到最后的图片,点击在表达式里出现具体的值
在这里插入图片描述
这个时候第一张图片就是我们从数据源中读取的了
在这里插入图片描述
为了设置图片的大小,需要先选择图片的布局模式为裁剪填满
在这里插入图片描述
设置图片的宽为100%,高为150px
在这里插入图片描述
给第二张图片,绑定地址的时候我们要通过下标取第二条数据
在这里插入图片描述
这里有一个知识点是,数组的下标是从0开始计数的,因此我们的第二张图片的下标是填写1

5 预览应用

点击实时预览的图标,就可以看到最终的效果
在这里插入图片描述
在这里插入图片描述

总结

我们本篇介绍了轮播图组件如何配置,配置的步骤包括创建数据源,录入测试数据,创建变量以及变量绑定。介绍了数组如何通过下标获取元素,这些基本操作是必须要掌握的,随着应用的开发的深入,处处都体现基本功。

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

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

相关文章

10-Docker安装Redis

10-Docker安装Redis Docker安装Redis 以 Redis 6.0.8 为例: docker pull redis:6.0.8直接pull会出现以下错误 [rootdocker ~]# docker pull redis:6.0.8 Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request can…

ubuntu安装docker及docker compose

在Ubuntu上安装Docker通常包括以下几个步骤: 更新包索引: 打开终端并运行以下命令来更新你的包索引: sudo apt update安装必要的依赖: 安装apt-transport-https、ca-certificates、curl、software-properties-common、gnupg等软件…

Java基础-8新特性

Lambda 表达式 Lambda 表达式,也可称为闭包。Lambda 表达式是一个匿名函数,我们可以这样理解 Lambda 表达式:Lambda 是一段可以传递的代码(能够做到将代码像数据一样进行传递)。格式如下: (parameters) -&g…

【Cadence27】HDL拷贝工程➕Allegro导出DXF和3D文件STP

【转载】Cadence Design Entry HDL 使用教程 【Cadence01】Cadence PCB Edit相对延迟与绝对延迟的显示问题 【Cadence02】Allegro引脚焊盘Pin设置为透明 【Cadence03】cadence不小心删掉钢网层怎么办? 【Cadence04】一般情况下Allegro PCB设计时的约束规则设置&a…

【入门篇】2.8 时钟(三)

目录 5.3.1 配置时钟源相关参数:调用函数 HAL_RCC_OscConfig() 5.3.2 配置系统时钟源以及 SYSCLK、AHB、APB1 和 APB2 的分频系数:调用函数HAL_RCC_ClockConfig() 六,STM32F4 时钟使能和配置 6.1 使能时钟 6.2 禁用时钟 5.3.1 配置时钟源相关参数:调用函数 HAL_RCC_Os…

【力扣 | SQL题 | 每日4题】力扣2308,2324,2346,2372

4 mid,还是比较常规的。 1. 力扣2308:按性别排列表格 1.1 题目: 表: Genders ---------------------- | Column Name | Type | ---------------------- | user_id | int | | gender | varchar | ---------------------- u…

卸载 Git

目录 打开 Geek找到 Git右键卸载 Git卸载完成等待扫描注册表点击完成清除Git在本地的配置文件 打开 Geek 找到 Git 右键卸载 Git 卸载完成 等待扫描注册表 点击完成 已经删除完毕 清除Git在本地的配置文件 进入 C:\Users\用户名 删除框起来的配置文件 👇 源码资料…

Map转Map

将一个Map<String,Integer> 转换成Map<String,String> //创建一个创建Map的公共方法 private static <T> Map<String,T> newMap(String key,T val,Object...kv){Map<String,T> ans new HashMap<>(8);ans.put(key,val);for(int i0,size k…

webpack自定义插件 ChangeScriptSrcPlugin

插件文件 class ChangeScriptSrcPlugin {apply(compiler) {const pluginName "ChangeScriptSrcPlugin";compiler.hooks.compilation.tap(pluginName, (compilation, callback) > {compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(pluginName,(html…

DES对称加密算法

DES&#xff08;Data Encryption Standard&#xff0c;数据加密标准&#xff09;是一种对称加密算法。 算法概述 加密类型&#xff1a;对称加密&#xff08;同一密钥用于加密和解密&#xff09;。密钥长度&#xff1a;64位&#xff08;8字节&#xff09;&#xff0c;其中有效…

java--网络编程

网络的相关概念 网络通信 1.概念:两台设备之间通过网络实现数据传输2.网络通信:将数据通过网络从一台设备传输到另一台设备3.java.net包下提供了一系列的类或接口&#xff0c;供程序员使用&#xff0c;完成网络通信 网络 概念&#xff1a;两台或多台设备通过一定物理设备连接…

UltraISO(软碟通)制作U盘制作Ubuntu20.04启动盘

目录 一、启动盘制作 1、工具准备 2、打开UltraISO后&#xff0c;点击左上角的文件&#xff0c;在打开的下拉项中&#xff0c;选择打开准备好的Ubuntu系统20.04 LTS镜像文件(ubuntu-20.04-desktop-amd64.iso)&#xff1b; 3、然后点击启动->写入硬盘映像 4、在弹出的窗…

Pollard‘s p-1算法

概述 光滑数 (Smooth number)&#xff1a;指可以分解为多个小素数乘积的正整数 当p是N 的因数&#xff0c;并且p−1是光滑数&#xff0c;可以考虑使用Pollards p-1算法来分解N 当p是N的因数&#xff0c;并且p1是光滑数&#xff0c;可以考虑使用Williamss p1算法来分解N 这里…

11.useComponentDidMount

在 React 的函数组件中,有时我们需要在组件首次挂载后执行某些操作,这在类组件中通常通过 componentDidMount 生命周期方法来实现。useComponentDidMount 钩子提供了一种简洁的方式来在函数组件中实现相同的功能。这个自定义钩子使得在组件挂载后执行一次性操作变得简单直观。…

一个简单的Qt Console Application计算练习程序

初步体验Qt Creator 用途&#xff1a;练习20以内2位数乘法速算的程序 功能1&#xff1a;支持用户设定题目数量 std::cout << "请输入本次练习题目数量&#xff1a;";int numProblems 0;std::string num;std::cin >> num;try {numProblems std::stoi(…

飞腾X100适配Ubuntu说明

【写在前面】 飞腾开发者平台是基于飞腾自身强大的技术基础和开放能力&#xff0c;聚合行业内优秀资源而打造的。该平台覆盖了操作系统、算法、数据库、安全、平台工具、虚拟化、存储、网络、固件等多个前沿技术领域&#xff0c;包含了应用使能套件、软件仓库、软件支持、软件适…

Docker配置网站环境

Mysql 先安装mysql 启动并后台运行&#xff1a;run -d 容器名称&#xff1a;--name 设置端口映射&#xff1a;-p 主机端口&#xff1a;容器端口 环境变量&#xff1a;-e 最后指定镜像名称 sudo docker run -d \--name mysql\-p 3306:3306\-e MYSQL_ROOT_PASSWORD123456\…

单细胞空间转录组RCTD去卷积分析学习和整理

RCTD(Robust Cell Type Decomposition)&#xff0c;是一种用于将单细胞RNA测序数据中的细胞类型注释转移到空间转录组学数据上的方法。RCTD 通过整合单细胞和空间转录组学数据&#xff0c;能够较为精确地为空间点&#xff08;spots&#xff09;分配细胞类型或细胞类型的混合&am…

LabVIEW风机滚动轴承监测系统

矿井主通风机作为矿井中最重要的通风设备&#xff0c;一旦出现故障&#xff0c;不仅会影响矿井内的空气质量&#xff0c;还可能引发安全事故。研究表明&#xff0c;通风机中约30%的故障是由轴承问题引起的。因此&#xff0c;能够实时监控矿井主通风机轴承状态的系统&#xff0c…

使用枚举来实现策略模式

使用很多if else的场景 public void save(String type,Object data){if("db".equals(type)){saveInDb(data);}else if("file".equals(type)){saveInFile(data);}else if("oss".equals(type)){saveInOss(data);}}使用枚举来解决 public enum Save…