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

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

news 文章来源：https://blog.csdn.net/2302_79981885/article/details/145408474 2025/4/5 20:04:09

前言

这一节讲一个购物项目

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 t t p = http= http=http一样

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

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
flex布局
上下有固定的15像素

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

点击这个，就有两个了

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

这样就成功了

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
我们再来加个宽度
在这里插入图片描述
在这里插入图片描述

高度要自适应

在这里插入图片描述
在这里插入图片描述
下面开始搞剩下的四张
在这里插入图片描述
但是注意v-if和v-for不要写在一个标签里面，这样会无法实现效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
然后就是对外层的这个盒子进行flex布局，一行放不下就换行

在这里插入图片描述
在这里插入图片描述

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

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
然后让右侧的小图片分散对齐

在这里插入图片描述
在这里插入图片描述

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

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

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

在这里插入图片描述

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

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

在这里插入图片描述

13. 分支的合并与提交

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
这样远地就有home分支了
在这里插入图片描述
在这里插入图片描述
这就是切换分支，合并分支

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

在这里插入图片描述
在这里插入图片描述
最后就是删除本地home分支

在这里插入图片描述

总结

下一节继续讲这个项目

相关文章：

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

前言 这一节讲一个购物项目 1. 项目介绍与项目文档 我们这里可以打开一个网址 https://applet-base-api-t.itheima.net/docs-uni-shop/index.htm 就可以查看对应的文档 2. 配置uni-app的开发环境 可以先打开这个的官网 https://uniapp.dcloud.net.cn/ 使用这个就可以发布到…...

编程日记 2025/2/4 1:07:16

网件r7000刷回原厂固件合集测评

《网件R7000路由器刷回原厂固件详解》 网件R7000是一款备受赞誉的高性能无线路由器，其强大的性能和可定制性吸引了许多高级用户。然而，有时候用户可能会尝试第三方固件以提升功能或优化网络性能，但这也可能导致一些问题，如系统不…...

编程日记 2025/2/4 1:06:14

微信登录模块封装

文章目录 1.资质申请2.combinations-wx-login-starter1.目录结构2.pom.xml 引入okhttp依赖3.WxLoginProperties.java 属性配置4.WxLoginUtil.java 后端通过 code 获取 access_token的工具类5.WxLoginAutoConfiguration.java 自动配置类6.spring.factories 激活自动配置类 3.com…...

编程日记 2025/2/4 1:01:07

[STM32 - 野火] - - - 固件库学习笔记 - - -十三.高级定时器

一、高级定时器简介 高级定时器的简介在前面一章已经介绍过，可以点击下面链接了解，在这里进行一些补充。 [STM32 - 野火] - - - 固件库学习笔记 - - -十二.基本定时器 1.1 功能简介 1、高级定时器可以向上/向下/两边计数，还独有一个重复计…...

编程日记 2025/2/4 0:57:50

后台管理系统通用页面抽离=＞高阶组件+配置文件+hooks

目录结构 配置文件和通用页面组件 content.config.ts const contentConfig {pageName: "role",header: {title: "角色列表",btnText: "新建角色"},propsList: [{ type: "selection", label: "选择", width: "80px&q…...

编程日记 2025/2/4 0:54:45

8.原型模式(Prototype)

动机 在软件系统中，经常面临着某些结构复杂的对象的创建工作；由于需求的变化，这些对象经常面临着剧烈的变化，但是它们却拥有比较稳定一致的接口。 之前的工厂方法和抽象工厂将抽象基类和具体的实现分开。原型模式也差不多&#…...

编程日记 2025/2/4 0:49:38

Python-基于PyQt5,pdf2docx,pathlib的PDF转Word工具(专业版)

前言：日常生活中，我们常常会跟WPS Office打交道。作表格，写报告，写PPT......可以说，我们的生活已经离不开WPS Office了。与此同时，我们在这个过程中也会遇到各种各样的技术阻碍，例如部分软件的PDF转Word需要收取额外费用等。那么，可不可以自己开发一个小工具来实现PDF转…...

编程日记 2025/2/4 0:43:31

13 尺寸结构模块（size.rs）

一、size.rs源码 // Copyright 2013 The Servo Project Developers. See the COPYRIGHT // file at the top-level directory of this distribution. // // Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or // http://www.apache.org/licenses/LICENSE…...

编程日记 2025/2/4 0:40:10

STM32单片机学习记录（2.2）

一、STM32 13.1 - PWR简介 1. PWR&#xff08;Power Control&#xff09;电源控制 &#xff08;1&#xff09;PWR负责管理STM32内部的电源供电部分&#xff0c;可以实现可编程电压监测器和低功耗模式的功能&#xff1b; &#xff08;2&#xff09;可编程电压监测器&#xff08;…...

编程日记 2025/2/4 0:39:05

CSS 样式化表格：从基础到高级技巧

CSS 样式化表格&#xff1a;从基础到高级技巧 1. 典型的 HTML 表格结构2. 为表格添加样式2.1 间距和布局2.2 简单的排版2.3 图形和颜色2.4 斑马条纹2.5 样式化标题 3. 完整的示例代码4. 总结 在网页设计中&#xff0c;表格是展示数据的常见方式。然而&#xff0c;默认的表格样式…...

编程日记 2025/2/4 0:38:01

【python】tkinter实现音乐播放器（源码+音频文件）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;专__注&#x1f448;&#xff1a;专注主流机器人、人工智能等相关领域的开发、测试技术。 【python】tkinter实现音乐播放器&#xff08;源码…...

编程日记 2025/2/4 0:37:00

javascript常用函数大全

javascript函数一共可分为五类&#xff1a; •常规函数 •数组函数 •日期函数 •数学函数 •字符串函数 1.常规函数 javascript常规函数包括以下9个函数&#xff1a; (1)alert函数&#xff1a;显示一个警告对话框&#xff0c;包括一个OK按钮。 (2)confirm函数&#xff1a;显…...

编程日记 2025/2/4 0:34:51

C#属性和字段(访问修饰符)

不同点逻辑性/灵活性存储性访问性使用范围安全性属性(Property)源于字段,对字段的扩展,逻辑字段并不占用实际的内存可以被其他类访问对接收的数据范围做限定,外部使用增加了数据的安全性字段(Field)不经过逻辑处理占用内存的空间及位置大部分字段不能直接被访问内存使用不安全 …...

编程日记 2025/2/4 0:32:47

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

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

编程日记 2025/2/4 0:28:39

langchain基础（二）

一、输出解析器&#xff08;Output Parser&#xff09; 作用&#xff1a;&#xff08;1&#xff09;让模型按照指定的格式输出&#xff1b; &#xff08;2&#xff09;解析模型输出&#xff0c;提取所需的信息 1、逗号分隔列表 CommaSeparatedListOutputParser&#xff1a;…...

编程日记 2025/2/4 0:26:36

数据库安全管理中的权限控制：保护数据资产的关键措施

title: 数据库安全管理中的权限控制：保护数据资产的关键措施 date: 2025/2/2 updated: 2025/2/2 author: cmdragon excerpt: 在信息化迅速发展的今天，数据库作为关键的数据存储和管理中心，已经成为了企业营运和决策的核心所在。然而，伴随着数据规模的不断扩大和数据价值…...

编程日记 2025/2/4 0:23:31

Leetcode598：区间加法 II

题目描述&#xff1a; 给你一个 m x n 的矩阵 M 和一个操作数组 op 。矩阵初始化时所有的单元格都为 0 。ops[i] [ai, bi] 意味着当所有的 0 < x < ai 和 0 < y < bi 时&#xff0c; M[x][y] 应该加 1。 在 执行完所有操作后 &#xff0c;计算并返回 矩阵中最大…...

编程日记 2025/2/4 0:21:29

【Proteus】NE555纯硬件实现LED呼吸灯效果，附源文件，效果展示

本文通过NE555定时器芯片和简单的电容充放电电路，设计了一种纯硬件实现的呼吸灯方案，并借助Proteus仿真软件验证其功能。方案无需编程，成本低且易于实现，适合电子爱好者学习PWM（脉宽调制）和定时器电路原理。 一、呼吸灯原理与NE555功能分析 1. 呼吸灯核心原理 呼吸灯的…...

编程日记 2025/2/4 0:18:25

SAP HCM insufficient authorization, no.skipped personnel 总结归纳

导读 权限:HCM模块中有普通权限和结构化权限。普通权限就是PFCG的权限&#xff0c;结构化权限就是按照部门ID授权&#xff0c;颗粒度更细&#xff0c;对分工明细化的单位尤其重要&#xff0c;今天遇到的问题就是结构化权限的问题。 作者&#xff1a;vivi&#xff0c;来源&…...

编程日记 2025/2/4 0:13:18

五. Redis 配置内容(详细配置说明)

五. Redis 配置内容(详细配置说明) 文章目录 五. Redis 配置内容(详细配置说明)1. Units 单位配置2. INCLUDES (包含)配置3. NETWORK (网络)配置3.1 bind(配置访问内容)3.2 protected-mode (保护模式)3.3 port(端口)配置3.4 timeout(客户端超时时间)配置3.5 tcp-keepalive()配置…...

编程日记 2025/2/4 0:10:13

4 [危机13小时追踪一场GitHub投毒事件]

事件概要 自北京时间 2024.12.4 晚间6点起&#xff0c; GitHub 上不断出现“幽灵仓库”&#xff0c;仓库中没有任何代码&#xff0c;只有诱导性的病毒文件。当天&#xff0c;他们成为了 GitHub 上 star 增速最快的仓库。超过 180 个虚假僵尸账户正在传播病毒&#xff0c;等待不…...

编程日记 2025/2/4 0:09:09

Shadow DOM举例

这东西具有隔离效果&#xff0c;对于一些插件需要append一些div倒是不错的选择 <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"utf-8"> <title>演示例子</title> </head> <body> <style&g…...

编程日记 2025/2/4 0:07:05

力扣动态规划-18【算法学习day.112】

前言 ###我做这类文章一个重要的目的还是记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&#xff01;&#xff01;&#xff01; 习题 1.下降路径最小和 题目链接:931. …...

编程日记 2025/2/4 0:03:00

网络基础

协议 协议就是约定 网络协议是协议中的一种 协议分层 协议本身也是软件&#xff0c;在设计上为了更好的模块化&#xff0c;解耦合&#xff0c;也是设计成为层状结构的 两个视角&#xff1a; 小白&#xff1a;同层协议&#xff0c;直接通信 工程师&#xff1a;同层协议&…...

编程日记 2025/2/4 0:01:59

使用 EXISTS 解决 SQL 中 IN 查询数量过多的问题

在 SQL 查询中&#xff0c;当我们面对需要在 IN 子句中列举大量数据的场景时&#xff0c;查询的性能往往会受到显著影响。这时候&#xff0c;使用 EXISTS 可以成为一种优化的良方。 问题的来源 假设我们有两个表&#xff0c;orders 和 customers&#xff0c;我们需要查询所有…...

编程日记 2025/2/3 23:59:58

使用SpringBoot发送邮件|解决了部署时连接超时的bug|网易163|2025

使用SpringBoot发送邮件 文章目录 使用SpringBoot发送邮件1. 获取网易邮箱服务的授权码2. 初始化项目maven部分web部分 3. 发送邮件填写配置EmailSendService [已解决]部署时连接超时附&#xff1a;Docker脚本Dockerfile创建镜像启动容器 1. 获取网易邮箱服务的授权码 温馨提示…...

编程日记 2025/2/3 23:57:54

Ruby Dir 类和方法详解

Ruby Dir 类和方法详解 引言 在 Ruby 中&#xff0c;Dir 是一个非常有用的类&#xff0c;用于处理文件系统中的目录。它提供了许多方便的方法来列出目录内容、搜索文件、以及处理文件系统的其他相关操作。本文将详细介绍 Ruby 的 Dir 类及其常用方法。 一、Dir 类概述 Dir …...

编程日记 2025/2/3 23:52:46

克隆OpenAI（基于openai API和streamlit）

utils.py&#xff1a; from langchain_openai import ChatOpenAI from langchain.memory import ConversationBufferMemory from langchain.chains import ConversationChain import osdef get_chat_response(api_key,prompt,memory): # memory不能是函数的内部局部变量&…...

编程日记 2025/2/3 23:43:30

位运算算法题

一.判断字符是否唯一 法一&#xff1a; 我们直接借助一个字符数组来模拟哈希表统计字符串即可&#xff0c;并且我们没有必要先将所有字符都放入字符数组中&#xff0c;边插入边判断&#xff0c;当我们要插入某个字符的时候&#xff0c;发现其已经出现了&#xff0c;此时必然重复…...

编程日记 2025/2/3 23:42:27

12 向量结构模块（vector.rs）

一vector.rs源码 // Copyright 2013 The Servo Project Developers. See the COPYRIGHT // file at the top-level directory of this distribution. // // Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or // http://www.apache.org/licenses/LICENSE…...

编程日记 2025/2/3 23:40:24