小程序项目-购物-首页与准备

小程序项目-购物-首页与准备

article2025/3/15 6:11:41/文章来源:https://blog.csdn.net/2302_79981885/article/details/145408474

前言

这一节讲一个购物项目

1. 项目介绍与项目文档

在这里插入图片描述

在这里插入图片描述

我们这里可以打开一个网址

https://applet-base-api-t.itheima.net/docs-uni-shop/index.htm
就可以查看对应的文档

在这里插入图片描述

2. 配置uni-app的开发环境

可以先打开这个的官网
https://uniapp.dcloud.net.cn/

在这里插入图片描述

使用这个就可以发布到各个平台都可以用

在这里插入图片描述

在这里插入图片描述

找到这个就可以运行了

在这里插入图片描述

在这里插入图片描述
打开HBuilder然后点击绿色按钮

在这里插入图片描述

注意我们这个软件的位置不能随便放，不然权限不够，所以我们直接放在C盘的根目录下

在这里插入图片描述

权限不够的话，这个就安装不了

在这里插入图片描述

在这里插入图片描述
点击源码视图

左侧为默认配置，右侧为个性化配置

在这里插入图片描述
这样就变了

3.初始化uni-app项目

在这里插入图片描述

创建就OK了

在这里插入图片描述

在这里插入图片描述

右击图标，打开文件所在位置，就可以找到安装的快捷方式了

这个就是真实的安装目录了

这样就可以了

点击右上角的设置

在这里插入图片描述
这样就OK了

我们这个直接点运行那里还不行，要先点一下App.vue这个文件才行

在这里插入图片描述
点击这个以后，等一会，就会自动打开我们的微信小程序软件，就可以运行了

然后就是在Xbuilder里面写的代码，保存了，在小程序开发中就会自动显示了

在这里插入图片描述

在空白处shift＋鼠标右键

在这里插入图片描述
选择这个

在这里插入图片描述

我们先来配置公钥

3.1配置公钥

在这里插入图片描述

直接创建

现在开始配置SSH公钥

我们先直接在E盘打开
在这里插入图片描述

输入这个ssh-keygen -t rsa后不用管，后面一直回车就可以了

这样就生成密钥了

如何获取公钥呢

在这里插入图片描述
把这个里面的东西全部复制

在这里插入图片描述
点击gitee里面的设置

在这里插入图片描述
复制到这里就可以了

在这里插入图片描述

这个可以检验我们是否设置成功，记得输入yes

3.2 继续

在这里插入图片描述
在这里找到ssh的文件夹

这个文件存放的是公钥

在这里插入图片描述
这一串就是公钥
将公钥配置到gitee中

这个新的仓库我们先点击SSH这个按钮

在这里插入图片描述
然后就是输入最后两个命令
先执行git init
在执行git remote add origin git@gitee.com:once-three-hearted-grass/wexin.git
最后是git push -u origin “master”

在这里插入图片描述
注意要在自己要上传的项目底下使用这些命令才可以

在这里插入图片描述

4. 配置tabBar效果

在这里插入图片描述

在这里插入图片描述

这样就有了两个分支了，tabBar是绿色的，代表我们目前处于这个分支

在这里插入图片描述

然后接着创建后面的页面

然后page.json里面自动就会有相应的代码

在这里插入图片描述

资料地址
https://gitee.com/vsdeveloper/uni-shop2
或者去这个网盘下载
资料

在这里插入图片描述
复制这个去替换我们项目里面的东西
然后就可以开始配置了

在这里插入图片描述

在这里插入图片描述
但是微信小程序还不能展示tabBar
因为默认第一个页面就是首页index
所以要删除index页面

在这里插入图片描述

先把这里的删除掉

在这里插入图片描述
然后就是pages目录下删除index页面

这样就成功了
但是下面的文本字却不是红色的

我们可以用selectedColor

在这里插入图片描述

这样就成功了

在这里插入图片描述

在这里插入图片描述

但是什么都没显示出来

标题也没有显示出来

在这里插入图片描述
因为这里不小心设置了标题为空

在这里插入图片描述

这样就OK了

在这里插入图片描述

但是gitee里面还没有tabBar分支

只有一个分支
接下来把本地的分支，推送到远程

在这里插入图片描述

这下就有两个分支了

将本地的 tabbar 分支合并到本地的 master 分支
在这里插入图片描述
第一个是查看分支，我们知道了当前处于tabBar分支
第二个是转换为master分支
第三个是合并分支
最后就是提交

这样的话，master里面的代码也是最新的了
删除本地的 tabbar 分支

5. 首页-轮播图效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
但是我们在我们的这个项目底下打开的powerShell却无法运行npm命令

这样就可以了

在这里插入图片描述
这样就安装成功了

现在开始导入这个包

原：
在这里插入图片描述
现在：

现在我们要在请求之前展示loading效果，之后取消效果–》拦截器

在这里插入图片描述

这个是展示loading

在这里插入图片描述
这个是隐藏

在这里插入图片描述
现在开始实现轮播图

在这里插入图片描述

资料里面有接口文档

在这里插入图片描述

这个是根路径，但是得替换为
https://api-hmugo-web.itheima.net

在这里插入图片描述
https://api-hmugo-web.itheima.net可以声明一下

注意这里的checkSiteMap字段不存在，要删掉才行

注意这是一个新的域名，我们还要配置域名

但是我们运行就又会遇到这个问题

在这里插入图片描述
我们把uni.$http的定义与导入放在最上面就可以了

在这里插入图片描述
这样就不会出错了

这样的话，res就是真实的data了

在这里插入图片描述

这样就OK了

在这里插入图片描述
indicator-dots是小圆点
autoplay是自动轮播
autoplay是轮播的间隔
duration轮播一张图的时间
circular表示是衔接轮播

选择这个可以快速生成轮播图结构

在这里插入图片描述

在这里插入图片描述

这样就有了，现在开始样式的美化

在这里插入图片描述

最下面有这个style节点

在这里插入图片描述

这样就成功了

6. 配置小程序的分包

在这里插入图片描述

一个商品的详情页面就放在这个分包里面

在这里插入图片描述

但是没有分包选择
我们要先保存分包的代码，再去创建页面

在这里插入图片描述
这样就成功了

而且这个是自动生成的

7. 首页-点击轮播图跳转到商品详情页

在这里插入图片描述
因为导航组件才能实现页面的跳转

在这里插入图片描述

这样点击就可以跳了

但是没有传id

在这里插入图片描述

8. 首页-封装uni.$showMsg()函数

在这里插入图片描述

这样我们就弄好了

在这里插入图片描述
但是会出现这个问题

我们把这个分装方法放在上面就可以了

和uni. $h ttp =$ http一样

在这里插入图片描述
这样就可以了

在这里插入图片描述

9. 首页-实现分类导航区域

在这里插入图片描述

在这里插入图片描述

flex布局
上下有固定的15像素

在这里插入图片描述

在这里插入图片描述

点击这个，就有两个了

在这里插入图片描述
左侧写结构，右侧写样式

在这里插入图片描述

在这里插入图片描述

这样就成功了

10. 获取楼层数据并渲染楼层的标题

在这里插入图片描述

在这里插入图片描述

11. 首页-渲染楼层中的图片

在这里插入图片描述

在这里插入图片描述

我们再来加个宽度

高度要自适应

在这里插入图片描述

下面开始搞剩下的四张

但是注意v-if和v-for不要写在一个标签里面，这样会无法实现效果

在这里插入图片描述

在这里插入图片描述

然后就是对外层的这个盒子进行flex布局，一行放不下就换行

在这里插入图片描述

然后保证大图片和小图片是左右布局的

就是给外面的这个大盒子一个flex布局

在这里插入图片描述

然后让右侧的小图片分散对齐

在这里插入图片描述

12. 首页-点击楼层图片跳转到商品列表页面

在这里插入图片描述
商品列表页面是一个分包，我们要建一个分包

在这里插入图片描述

在这里插入图片描述
但是接口里面的url与我们的项目不对应，要处理一下

然后就开始实现点击图片跳转了

所以view改navigator
在这里插入图片描述
然后弄上url

在这里插入图片描述

在这里插入图片描述
但是却点击无法跳转
我们打印知道

少了一个问号

在这里插入图片描述
这样就可以跳转了

在这里插入图片描述

13. 分支的合并与提交

在这里插入图片描述

在这里插入图片描述
这样远地就有home分支了

这就是切换分支，合并分支

在这里插入图片描述
最后就是推送分支master，因为已经合并了的

在这里插入图片描述

最后就是删除本地home分支

在这里插入图片描述

总结

下一节继续讲这个项目

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

深入解析Python机器学习库Scikit-Learn的应用实例

深入解析Python机器学习库Scikit-Learn的应用实例

深入解析Python机器学习库Scikit-Learn的应用实例随着人工智能和数据科学领域的迅速发展，机器学习成为了当下最炙手可热的技术之一。而在机器学习领域，Python作为一种功能强大且易于上手的编程语言，拥有庞大的生态系统和丰富的机器学习库。其…

阅读更多...

大模型训练（5）：Zero Redundancy Optimizer（ZeRO零冗余优化器）

大模型训练（5）：Zero Redundancy Optimizer（ZeRO零冗余优化器）

0 英文缩写 Large Language Model（LLM）大型语言模型Data Parallelism（DP）数据并行Distributed Data Parallelism（DDP）分布式数据并行Zero Redundancy Optimizer（ZeRO）零冗余优化器 …

阅读更多...

在亚马逊云科技上用Stable Diffusion 3.5 Large生成赛博朋克风图片（上）

在亚马逊云科技上用Stable Diffusion 3.5 Large生成赛博朋克风图片（上）

背景介绍在2024年的亚马逊云科技re:Invent大会上提前预告的Stable Diffusion 3.5 Large，现在已经在Amazon Bedrock上线了！各位开发者们现在可以使用该模型，根据文本提示词文生图生成高质量的图片，并且支持多种图片风格生成&…

阅读更多...

java练习（5）

java练习（5）

ps:题目来自力扣给你两个非空的链表，表示两个非负的整数。它们每位数字都是按照逆序的方式存储的，并且每个节点只能存储一位数字。请你将两个数相加，并以相同形式返回一个表示和的链表。你可以假设除了数字 0 之外，这…

阅读更多...

【力扣】438.找到字符串中所有字母异位词

【力扣】438.找到字符串中所有字母异位词

AC截图题目思路我一开始是打算将窗口内的s子字符串和p字符串都重新排序，然后判断是否相等，再之后进行窗口滑动。不过缺点是会超时。 class Solution { public:vector<int> findAnagrams(string s, string p) {vector<int> vec;if(s.siz…

阅读更多...

DeepSeek回答禅宗三重境界重构交易认知

DeepSeek回答禅宗三重境界重构交易认知

人都是活在各自心境里，有些话通过语言去交流，还是要回归自己心境内在的，而不是靠外在映射到股票和技术方法；比如说明天市场阶段是不修复不接力节点，这就是最高视角看整个市场，还有哪一句话能概括&#xff1…

阅读更多...

C++进阶: 红黑树及map与set封装

C++进阶: 红黑树及map与set封装

红黑树总结整理红黑色概述： 红黑树整理与AVL树类似，但在对树的平衡做控制时，AVL树会比红黑树更严格。 AVL树是通过引入平衡因子的概念进行对树高度控制。红黑树则是对每个节点标记颜色，对颜色进行控制。红黑树控制规则&…

阅读更多...

BUUCTF_[网鼎杯 2020 朱雀组]phpweb（反序列化绕过命令）

BUUCTF_[网鼎杯 2020 朱雀组]phpweb（反序列化绕过命令）

打开靶场，,弹出上面的提示,是一个警告warning,而且页面每隔几秒就会刷新一次,根据warning中的信息以及信息中的时间一直在变,可以猜测是date()函数一直在被调用查看页面源代码，没有什么有用的信息 Burp抓包一下调用了date()函数并回显在页面上,参数fu…

阅读更多...

pandas（二）读取数据

pandas（二）读取数据

一、读取数据示例代码 import pandaspeople pandas.read_excel(../002/People.xlsx) #读取People数据 print(people.shape) # 打印people表的行数、列数 print(people.head(3)) # 默认打印前5行,当前打印前3行 print("") print(people.tail(3)) # 默…

阅读更多...

智慧物业管理系统实现社区管理智能化提升居民生活体验与满意度

智慧物业管理系统实现社区管理智能化提升居民生活体验与满意度

内容概要智慧物业管理系统，顾名思义，是一种将智能化技术融入社区管理的系统，它通过高效的手段帮助物业公司和居民更好地互动与沟通。首先，这个系统整合了在线收费、停车管理等功能，让居民能够方便快捷地完成日常支付…

阅读更多...

二十三、集合类

二十三、集合类

Ⅰ . Set 类 01 Set 介绍 template < class T, // set::key_type/value_typeclass Compare less<T>, // set::key_compare/value_compareclass Alloc allocator<T> // set::allocator_type> class set; 通过插入新的元素来扩…

阅读更多...

5.5.1 面向对象的基本概念

5.5.1 面向对象的基本概念

文章目录基本概念面向对象的5个原则基本概念面向对象的方法，特点时其分析与设计无明显界限。虽然在软件开发过程中，用户的需求会经常变化，但客观世界对象间的关系是相对稳定的。对象是基本的运行实体，由数据、操作、对象名组成…

阅读更多...

在线免费快速无痕去除照片海报中的文字logo

在线免费快速无痕去除照片海报中的文字logo

上期和大家分享了用photoshop快速无痕去除照片海报中的文字logo的方法，有的同学觉得安装PS太麻烦，有那下载安装时间早都日落西山了，问有没有合适的在线方法可以快速去除；达芬奇上网也尝试了几个网站，今天分享一个对国人…

阅读更多...

Linux网络 | 网络层IP报文解析、认识网段划分与IP地址

Linux网络 | 网络层IP报文解析、认识网段划分与IP地址

前言：本节内容为网络层。主要讲解IP协议报文字段以及分离有效载荷。另外， 本节也会带领友友认识一下IP地址的划分。那么现在废话不多说， 开始我们的学习吧！！ ps：本节正式进入网络层喽， 友友们…

阅读更多...

【深度学习】DeepSeek模型介绍与部署

【深度学习】DeepSeek模型介绍与部署

原文链接：DeepSeek-V3 1. 介绍 DeepSeek-V3，一个强大的混合专家 (MoE) 语言模型，拥有 671B 总参数，其中每个 token 激活 37B 参数。为了实现高效推理和成本效益的训练，DeepSeek-V3 采用了多头潜在注意力 (MLA) 和 De…

阅读更多...

STM32 PWM驱动舵机

STM32 PWM驱动舵机

接线图： 这里将信号线连接到了开发板的PA1上代码配置： 这里的PWM配置与呼吸灯一样，呼吸灯连接的是PA0引脚，输出比较单元用的是OC1通道，这里只需改为OC2通道即可。完整代码： #include "servo.h&quo…

阅读更多...

51单片机 02 独立按键

51单片机 02 独立按键

一、独立按键控制LED亮灭轻触按键：相当于是一种电子开关，按下时开关接通，松开时开关断开，实现原理是通过轻触按键内部的金属弹片受力弹动来实现接通和断开。 #include <STC89C5xRC.H> void main() { // P20xFE;while(1){…

阅读更多...

本地部署 DeepSeek-R1：简单易上手，AI 随时可用！

本地部署 DeepSeek-R1：简单易上手，AI 随时可用！

🎯 先看看本地部署的运行效果为了测试本地部署的 DeepSeek-R1 是否真的够强，我们随便问了一道经典的“鸡兔同笼”问题，考察它的推理能力。 📌 问题示例： 笼子里有鸡和兔，总共有 35 只头，94 只…

阅读更多...

[EAI-027] RDT-1B，目前最大的用于机器人双臂操作的机器人基础模型

[EAI-027] RDT-1B，目前最大的用于机器人双臂操作的机器人基础模型

Paper Card 论文标题：RDT-1B: a Diffusion Foundation Model for Bimanual Manipulation 论文作者：Songming Liu, Lingxuan Wu, Bangguo Li, Hengkai Tan, Huayu Chen, Zhengyi Wang, Ke Xu, Hang Su, Jun Zhu 论文链接：https://arxiv.org/ab…

阅读更多...

DeepSeek为什么超越了OpenAI？从“存在主义之问”看AI的觉醒

DeepSeek为什么超越了OpenAI？从“存在主义之问”看AI的觉醒

悉尼大学学者Teodor Mitew向DeepSeek提出的问题，在推特上掀起了一场关于AI与人类意识的大讨论。当被问及"你最想问人类什么问题"时，DeepSeek的回答直指人类存在的本质："如果意识是进化的偶然，宇宙没有内在的意义&a…

阅读更多...

最新文章