当前位置: 首页 > news >正文

小程序 - 本地生活

小程序页面和样式练习 - 本地生活小程序开发笔记

目录

本地生活

准备工作

加载图片素材

页面开发

页面样式开发

功能实现截图

总结


本地生活

本地生活”微信小程序是一个介绍本地美食、装修、工作等信息的微信小程序,该微信小程序的首页包含轮播图区域和九宫格区域。下面将对“本地生活”微信小程序进行详细讲解。

准备工作

在开发本案例前,需要先完成一些准备工作,具体步骤如下。

①在微信开发者工具中创建一个新的微信小程序项目,名称为“本地生活”,模板选择“不使用模板”。

②项目创建完成后,在app.json文件中配置一个pages/grid/grid页面,并将其他页面全部删除。

上述步骤操作完成后,“本地生活”微信小程序的目录结构如下图所示:

至此,准备工作已经完成。

加载图片素材

创建images文件夹,准备好两张轮播图和九宫格的9个图标图片。

图片如下:

页面开发

在grid.wxml文件中编写页面结构和内容。

代码如下:

<!-- index.wxml -->
<!-- 轮播图区域 -->
<swiper indicator-dots="true" autoplay="true" interval="3000"><swiper-item><image src="/images/swiper01.png" /></swiper-item><swiper-item><image src="/images/swiper02.png" /></swiper-item>
</swiper><!-- 九宫格区域 -->
<view class="grids"><view class="item"><image src="/images/1.png" /><text>美食</text></view><view class="item"><image src="/images/2.png" /><text>装修</text></view><view class="item"><image src="/images/3.png" /><text>洗浴</text></view><view class="item"><image src="/images/4.png" /><text>汽车</text></view><view class="item"><image src="/images/5.png" /><text>唱歌</text></view><view class="item"><image src="/images/6.png" /><text>住宿</text></view><view class="item"><image src="/images/7.png" /><text>学习</text></view><view class="item"><image src="/images/8.png" /><text>工作</text></view><view class="item"><image src="/images/9.png" /><text>结婚</text></view>
</view>

页面样式开发

在grid.wxss文件中编写样式内容。

代码如下:

/* 轮播图样式 */
swiper {height: 350rpx;
}swiper image {width: 100%;height: 100%;
}/* 九宫格盒子 */
.grids {display: flex;flex-wrap: wrap;
}/* 九宫格子盒子 */
.grids .item {width: 250rpx;height: 250rpx;border-right: 1rpx solid #eee;border-bottom: 1rpx solid #eee;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;
}.grids .item:nth-child(3) {border-right: 0;
}.grids .item:nth-child(6) {border-right: 0;
}.grids .item:nth-child(9) {border-right: 0;
}/* 图片和文字样式 */
.grids .item image {width: 70rpx;height: 70rpx;
}.grids .item text {color: #999;font-size: 28rpx;margin-top: 20rpx;
}

功能实现截图

总结

使用原生的方式简单的实现了一个本地生活小程序的页面开发。

相关文章:

小程序 - 本地生活

小程序页面和样式练习 - 本地生活小程序开发笔记 目录 本地生活 准备工作 加载图片素材 页面开发 页面样式开发 功能实现截图 总结 本地生活 本地生活”微信小程序是一个介绍本地美食、装修、工作等信息的微信小程序&#xff0c;该微信小程序的首页包含轮播图区域和九宫…...

docker的joinsunsoft/docker.ui修改密码【未解决】

docker的joinsunsoft/docker.ui修改密码 前言 这个挺遗憾的&#xff0c;个人能力不足。想修改密码是不可能了。 因为&#xff0c;系统的密码加密规则不知道。 目前了解到的内容是&#xff1a; 地址是&#xff1a;https://hub.docker.com/r/joinsunsoft/docker.ui服务是用go语…...

pyspark实现基于协同过滤的电影推荐系统

最近在学一门大数据的课&#xff0c;课程要求很开放&#xff0c;任意做一个大数据相关的项目即可&#xff0c;不知道为什么我就想到推荐算法&#xff0c;一直到着手要做之前还没有新的更好的来代替&#xff0c;那就这个吧。 推荐算法 推荐算法的发展由来已久&#xff0c;但和…...

【VRChat 全身动捕】VIVE 手柄改 tracker 定位器教程,低成本光学动捕解决方案(持续更新中2024.11.26)

更新 0.0.1&#xff08;2024/11/26&#xff09;&#xff1a; 1.解决了内建蓝牙无法识别、“steamVR 蓝牙不可用” 的解决方案 2.解决了 tracker 虽然建立了连接但是在 steamVR 界面上看不到的问题 3.解决了 VIVE 基站1.0 无法被蓝牙识别 && 无法被 steamVR 搜索到 &…...

C++11

C11 C11简介一.列表初始化{ }initializer_list 二.一些关键字三.右值引用和移动语义&#xff08;重要&#xff09;完美转发移动构造和移动赋值重载 四.小知识类成员变量初始化 五.可变参数模板六.lambda表达式&#xff08;又称匿名函数&#xff09;&#xff08;重要&#xff09…...

MySQL - 表的增删查改

文章目录 1.新增1.1语法1.2单行插入1.3多行插入1.4插入后更新1.5替换 2.查找2.1语法2.2使用 3.修改3.1语法3.2使用 4.删除4.1语法4.2使用4.3截断表 5.插入查询结果5.1语法5.2使用 1.新增 1.1语法 INSERT [INTO] table_name [(column1, column2, ...)] VALUES (value1, value2…...

Vue3 调用子组件的方法和变量

1. 通过 ref 调用子组件的方法和变量 Vue 3 引入了 ref&#xff0c;你可以通过 ref 获取子组件实例&#xff0c;并调用其方法或访问其数据。 例子 子组件 (Child.vue) <template><div><p>{{ message }}</p><button click"updateMessage&qu…...

蓝桥杯嵌入式再学习(4)led的点亮

led的点亮的话先在cubemx里点一下配置 以下是对应的代码...

CentOS7安装nvm

CentOS7安装nvm 在 CentOS 7 上安装 NVM&#xff08;Node Version Manager&#xff09;可以通过以下步骤进行。NVM 是一个用于管理多个 Node.js 版本的工具&#xff0c;允许你在不同的项目中使用不同的 Node.js 版本。 步骤 1&#xff1a;更新系统 首先&#xff0c;确保你的…...

2024年工信部大数据分析师证书报考条件是怎样的?有什么用

大数据分析师&#xff0c;乃是这样一类专业人才&#xff0c;他们凭借着先进且高效的数据分析技术以及各类实用工具&#xff0c;对规模庞大、纷繁复杂的海量数据展开全面而细致的清洗、处理、分析以及解读工作。其工作的核心目标在于为企业的决策制定提供有力依据&#xff0c;推…...

天锐绿盾加密软件与Ping32联合打造企业级安全保护系统,确保敏感数据防泄密与加密管理

随着信息技术的飞速发展&#xff0c;企业在日常经营过程中产生和处理的大量敏感数据&#xff0c;面临着越来越复杂的安全威胁。尤其是在金融、医疗、法律等领域&#xff0c;数据泄漏不仅会造成企业巨大的经济损失&#xff0c;还可能破坏企业的信誉和客户信任。因此&#xff0c;…...

代码随想录算法训练营第六十天|Day60 图论

Bellman_ford 队列优化算法&#xff08;又名SPFA&#xff09; https://www.programmercarl.com/kamacoder/0094.%E5%9F%8E%E5%B8%82%E9%97%B4%E8%B4%A7%E7%89%A9%E8%BF%90%E8%BE%93I-SPFA.html 本题我们来系统讲解 Bellman_ford 队列优化算法 &#xff0c;也叫SPFA算法&#xf…...

Web登录页面设计

记录第一个前端界面&#xff0c;暑假期间写的&#xff0c;用了Lottie动画和canvas标签做动画&#xff0c;登录和注册也连接了数据库。 图片是从网上找的&#xff0c;如有侵权私信我删除&#xff0c;谢谢啦~...

Rust标准库中集合类型用法详解

文章目录 Vec<T> 动态数组创建动态数组增加删除元素访问元素遍历Vec控制容量修改元素元素排序 HashMap<K, V>哈希表创建 HashMap插入和更新元素访问元素删除元素遍历HashMap使用默认值 HashSet<T>哈希集合创建 HashSet插入和删除元素查找元素遍历HashSet使用…...

软件测试面试之数据库部分

1.取第 4 到5 条记录 --按ID从小到大&#xff0c;查询第到第条数据 select top4 *from(select top5 * from qicheorder by ID asc ) as TA order by ID desc--按ID从小到大&#xff0c;查询第到第条数据 select top 2*from(select top 4 *from qicheorder by ID asc )as TA o…...

Gitee markdown 使用方法(持续更新)

IPKISS 获取仿真器件的名称 引言正文标题换行第一种------在行末尾手动键入两个空格第二种------额外换行一次&#xff0c;即两行中间留一个空行 缩进与反缩进代码块行内代码添加图片添加超链接 加粗&#xff0c;倾斜&#xff0c;加粗倾斜 引言 有些保密性的文件或者教程&…...

水库大坝安全监测之量水堰计应用

量水堰计是水库大坝安全监测系统中的一种关键设备&#xff0c;主要用于测量水库水位、流量等水力参数。以下是量水堰计在水库大坝安全监测中的应用及注意事项&#xff1a; 一、量水堰计的工作原理 量水堰计是一种专门用于测量水流流量的仪器&#xff0c;其工作原理主要基于水流…...

Mouser EDI 需求分析

为了提高供应链的自动化水平&#xff0c;贸泽电子&#xff08;Mouser Electronics&#xff09;使用EDI技术更好地管理与其全球合作伙伴之间的业务数据往来。对接Mouser EDI&#xff0c;对于企业而言&#xff0c;需要在本地部署EDI软件&#xff0c;建立与Mouser之间的EDI连接通道…...

51单片机快速入门之中断的应用 2024/11/23 串口中断

51单片机快速入门之中断的应用 基本函数: void T0(void) interrupt 1 using 1 { 这里放入中断后需要做的操作 } void T0(void)&#xff1a; 这是一个函数声明&#xff0c;表明函数 T0 不接受任何参数&#xff0c;并且不返回任何值。 interrupt 1&#xff1a; 这是关键字和参…...

电脑显示器拔插DVI线后副屏不显示

问题&#xff1a;台式机副屏显示器插拔DVI线后副屏无法检测到&#xff0c;不显示 其他现象&#xff1a;电脑设备管理器“显示适配器”中只有独显&#xff0c;未显示集显。 尝试方法&#xff1a; 1、 重新插拔并拧紧DVI线、更换DVI线、将DVI线替换为VGA线、调换DVI线及VGA线两…...

git分支管理:release分支内容重置为master

背景&#xff1a;公司项目存在release和master分支&#xff0c;一直是release合并到master分支&#xff1b;由于历史总总原因导致release和master分支内容相差很大。某个夜晚&#xff0c;leader悄悄改了master分支的内容&#xff08;不走合并流程&#xff09;&#xff0c;然后通…...

python之poetry 安装、创建项目、修改源、创建虚拟环境等操作

CentOs7.5下安装python3&#xff0c;修改源&#xff0c;创建虚拟环境 python 虚拟环境的搭建 使用pyenv 管理多个版本的python 安装 pyenv curl https://pyenv.run | bash pyenv install 3.10 pyenv local 3.10 # 当前项目激活Python3.10 pyenv global 3.10 # 当前全部激活P…...

一个高度可扩展的 Golang ORM 库【GORM】

GORM 是一个功能强大的 Golang 对象关系映射&#xff08;ORM&#xff09;库&#xff0c;它提供了简洁的接口和全面的功能&#xff0c;帮助开发者更方便地操作数据库。 1. 完整的 ORM 功能 • 支持常见的关系模型&#xff1a; • Has One&#xff08;一对一&#xff09; • …...

hadoop_HA高可用

秒懂HA HA概述HDFS-HA工作机制工作要点元数据同步参数配置手动故障转移自动故障转移工作机制相关命令 YARN-HA参数配置自动故障转移机制相关命令 附录Zookeeper详解 HA概述 H(high)A(avilable)&#xff1a; 高可用&#xff0c;意味着必须有容错机制&#xff0c;不能因为集群故障…...

23种设计模式-工厂方法(Factory Method)设计模式

文章目录 一.什么是工厂方法设计模式&#xff1f;二. 工厂方法模式的特点三.工厂方法模式的结构四.工厂方法模式的优缺点五.工厂方法模式的 C 实现六.工厂方法模式的 Java 实现七.代码解析八.总结 类图&#xff1a; 工厂方法设计模式类图 一.什么是工厂方法设计模式&#xff1…...

论文笔记 SliceGPT: Compress Large Language Models By Deleting Rows And Columns

欲买桂花同载酒&#xff0c;终不似&#xff0c;少年游。 数学知识 秩&#xff1a; 矩阵中最大线性无关的行/列向量数。行秩与列秩相等。 线性无关&#xff1a;对于N个向量而言&#xff0c;如果任取一个向量 v \textbf{v} v&#xff0c;不能被剩下的N-1个向量通过线性组合的方式…...

构建 LLM (大型语言模型)应用程序——从入门到精通(第七部分:开源 RAG)

通过检索增强生成 (RAG) 应用程序的视角学习大型语言模型 (LLM)。 本系列博文 简介数据准备句子转换器矢量数据库搜索与检索大语言模型开源 RAG&#xff08;本帖&#xff09;评估服务LLM高级 RAG 1. 简介 我们之前的博客文章广泛探讨了大型语言模型 (LLM)&#xff0c;涵盖了其…...

快速理解倒排索引在ElasticSearch中的作用

一.基础概念 定义&#xff1a; 倒排索引是一种数据结构&#xff0c;用来加速文本数据的搜索和检索&#xff0c;和传统的索引方式不同&#xff0c;倒排索引会被每个词汇项与包含该词汇项的文档关联起来&#xff0c;从而去实现快速的全文检索。 举例&#xff1a; 在传统的全文…...

彻底理解微服务配置中心的作用

常见的配置中心有SpringCloudConfig、Apollo、Nacos等&#xff0c;理解它的作用&#xff0c;无非两点&#xff0c;一是配置中心能做什么&#xff0c;不使用配置中心会出现什么问题。 作用&#xff1a;配置中心是用来集中管理服务的配置&#xff0c;它是用来提高系统配置的维护…...

基于YOLOv8深度学习的智慧农业棉花采摘状态检测与语音提醒系统(PyQt5界面+数据集+训练代码)

智慧农业在现代农业中的应用日益广泛&#xff0c;其核心目标是通过智能化手段实现农业生产的自动化、精准化和高效化&#xff0c;而精准采摘技术作为智慧农业的重要组成部分&#xff0c;正受到越来越多的关注。棉花作为一种经济作物&#xff0c;其采摘过程传统上依赖于人工劳作…...

自动控制原理——BliBli站_DR_CAN

自动控制 2 稳定性分析 极点在左半平面 输入为单位冲击&#xff0c;而拉普拉斯变换为1&#xff1b;因此&#xff0c;开环和闭环系统&#xff0c;研究其传递函数的稳定性就可以了 2.5_非零初始条件下的传递函数_含有初始条件的传递函数 如果一个系统的初始条件不为0&#xff0…...

使用phpStudy小皮面板模拟后端服务器,搭建H5网站运行生产环境

一.下载安装小皮 小皮面板官网下载网址&#xff1a;小皮面板(phpstudy) - 让天下没有难配的服务器环境&#xff01; 安装说明&#xff08;特别注意&#xff09; 1. 安装路径不能包含“中文”或者“空格”&#xff0c;否则会报错&#xff08;例如错误提示&#xff1a;Cant cha…...

vue2 pinia 安装与入门

安装 本体 npm install pinia vue2特定 npm install vue/composition-api 持久化存本地 npm install pinia-plugin-persistvue.config.js 不加的话会报错 configureWebpack: { // 在configureWebpack里加上以下modulemodule: {rules: [{test: /\.mjs$/,include: /node_mo…...

路由传参、搜索、多选框勾选、新增/编辑表单复用

前言&#xff1a; 记录添加运动员页面功能的具体实现 ①由赛事管理页面跳转时路由传参&#xff08;携带该页面表格中莫某条数据对应的赛事id到另一个页面&#xff09;&#xff1b; ②搜索框实时搜索&#xff1b; ③多选框勾选搜索&#xff1b; ④新增表单和编辑表单复用&a…...

内网不出网上线cs

一:本地正向代理目标 如下&#xff0c;本地(10.211.55.2)挂好了基于 reGeorg 的 http 正向代理。代理为: Socks5 10.211.55.2 1080python2 reGeorgSocksProxy.py -l 0.0.0.0 -p 1080 -u http://10.211.55.3:8080/shiro/tunnel.jsp 二&#xff1a;虚拟机配置proxifer 我们是…...

防止按钮被频繁点击

在做开发的时候,不希望按钮被用户频繁点击,给后端服务器增加负担,这个时候,可以在按钮的触发函数加上如下代码: // 禁用按钮 const fetchButton document.querySelector(.btn-fetch); fetchButton.disabled true; // 延时61秒后重新启用按钮 setTimeout(() > { fetchBut…...

Zariski交换代数经典教材Commutative Algebra系列(pdf可复制版)

Zariski的名字估计学代数几何的人都耳熟能详&#xff0c;先是入门时期的交换代数教材&#xff0c;然后就是深入研究时期随处可见的Zariski拓扑。本帖我们分享的便是著名的Zariski交换代数教材。 Oscar Zariski & Pierre Samuel写的交换代数经典教材Commutative Algebra&am…...

【C++】数据类型(上)

C规定在创建一个变量或一个常量时&#xff0c;必须要指定出相应的数据类型&#xff0c;否则无法给变量分配内存 数据类型存在意义&#xff1a;给变量分配合适的内存空间。 1.1 整型 整型作用&#xff1a;整型变量表示的整数类型的数据。 C中能够表示整型类型的有以下几种…...

(C语言) 8大翻译阶段

(C语言) 8大翻译阶段 文章目录 (C语言) 8大翻译阶段⭐前言&#x1f5c3;️8大阶段&#x1f5c2;️1. 字符映射&#x1f5c2;️2. 行分割&#x1f5c2;️3. 标记化&#x1f5c2;️4. 预处理&#x1f5c2;️5. 字符集映射&#x1f5c2;️6. 字符串拼接&#x1f5c2;️7. 翻译&…...

QT QHBoxLayout控件 全面详解

本系列文章全面的介绍了QT中的57种控件的使用方法以及示例,包括 Button(PushButton、toolButton、radioButton、checkBox、commandLinkButton、buttonBox)、Layouts(verticalLayout、horizontalLayout、gridLayout、formLayout)、Spacers(verticalSpacer、horizontalSpacer)、…...

生成式 AI 应用创新引擎dify.ai部署并集成ollama大模型详细图文教程

引言 Dify 是一个开源 LLM 应用开发平台&#xff0c;拥有直观的界面结合了 AI 工作流、RAG 管道、代理功能、模型管理、可观察性功能等&#xff0c;可以快速从原型开发到生产。 Ollama 是一个本地推理框架&#xff0c;允许开发人员轻松地在本地部署和运行 LLM&#xff…...

MySQL闪回恢复:轻松应对数据误删,数据安全有保障

在数据库管理中&#xff0c;数据误删是一个常见且棘手的问题。传统的数据恢复方法可能涉及复杂的操作&#xff0c;如全量备份和增量备份的恢复。MySQL的闪回恢复功能提供了一种更为简便、高效的数据恢复手段。本文将详细介绍MySQL闪回恢复的原理、配置和使用方法&#xff0c;帮…...

面经-综合面/hr面

面经-综合面/hr面 概述1.大学期间遇到的困难&#xff0c;怎么解决的2. 大学期间印象最深/最难忘的是什么3. 大学里面担任了什么职务没&#xff1f;做了什么工作&#xff1f;4. 大学最大的遗憾是什么&#xff1f;5. 对自己的未来规划6. 对自己的评价7. 自己的优缺点8. 对公司的认…...

利用Java爬虫获取阿里巴巴中国站跨境属性的详细指南

在全球化贸易的浪潮中&#xff0c;跨境电商正成为连接全球买家和卖家的重要桥梁。阿里巴巴中国站作为全球领先的B2B电子商务平台&#xff0c;提供了海量的商品信息&#xff0c;其中跨境属性信息对于跨境电商尤为重要。本文将详细介绍如何使用Java编写爬虫&#xff0c;从阿里巴巴…...

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?

Vue 3.0 引入的 Composition API 和 Vue 2.x 中的 Options API 是两种不同的开发方式。它们在组织和管理组件代码的方式上有很大的差异。虽然两者都能实现相同的功能,但 Composition API 提供了更好的灵活性和可维护性,特别是对于复杂的组件和大型项目。 以下是对比这两种 A…...

电脑中的vcruntime140_1.dll文件有问题要怎么解决?一键修复vcruntime140_1.dll

遇到“vcruntime140_1.dll无法继续执行代码”的错误通常表明电脑中的vcruntime140_1.dll文件有问题。这个文件属于Visual C Redistributable&#xff0c;对很多程序的运行至关重要。本文将提供几个步骤&#xff0c;帮助你迅速修复这一错误&#xff0c;使电脑恢复正常工作状态。…...

【网络安全 | 漏洞挖掘】绕过SAML认证获得管理员面板访问权限

未经许可,不得转载。 文章目录 什么是SAML认证?SAML是如何工作的?SAML响应结构漏洞结果什么是SAML认证? SAML(安全断言标记语言)用于单点登录(SSO)。它是一种功能,允许用户在多个服务之间切换时无需多次登录。例如,如果你已经登录了facebook.com,就不需要再次输入凭…...

技能之发布自己的依赖到npm上

目录 开始 解决 步骤一&#xff1a; 步骤二&#xff1a; 步骤三&#xff1a; 运用 一直以为自己的项目在github上有了&#xff08;之传了github&#xff09;就可以进行npm install下载&#xff0c;有没有和我一样萌萌的同学。没事&#xff0c;萌萌乎乎的不犯罪。 偶然的机…...

python+django5.1+docker实现CICD自动化部署springboot 项目前后端分离vue-element

一、开发环境搭建和配置 # channels是一个用于在Django中实现WebSocket、HTTP/2和其他异步协议的库。 pip install channels#channels-redis是一个用于在Django Channels中使用Redis作为后台存储的库。它可以用于处理#WebSocket连接的持久化和消息传递。 pip install channels…...

GitHub仓库的README添加视频播放链接和压缩视频网站推荐

想在github的README里面添加视频&#xff0c;有限制&#xff0c;不能超过10MB&#xff0c;所以需要压缩&#xff0c;推荐一个超级厉害的压缩工具&#xff0c;我一个30的视频最后压缩到了3M不到&#xff0c;而且清晰度没有变化&#xff0c;视频压缩网站地址&#xff1a;在线减小…...