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

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

article 2026/5/7 22:27:51

前言

这一节讲一个购物项目

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分支

在这里插入图片描述

总结

下一节继续讲这个项目

相关文章：

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

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

编程日记 2026/5/4 0:19:45

基于 NodeJs 一个后端接口的创建过程及其规范 -- 【elpis全栈项目】

基于 NodeJs 一个后端接口的创建过程及其规范一个接口的诞生： #mermaid-svg-46HXZKI3fdnO0rKV {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-46HXZKI3fdnO0rKV .error-icon{fill:#552222;}#mermaid-sv…...

编程日记 2026/4/9 12:10:47

【hot100】刷题记录(8)-矩阵置零

题目描述： 给定一个 m x n 的矩阵，如果一个元素为 0 ，则将其所在行和列的所有元素都设为 0 。请使用原地算法。示例 1： 输入：matrix [[1,1,1],[1,0,1],[1,1,1]] 输出：[[1,0,1],[0,0,0],[1,0,1]]示例 2…...

编程日记 2026/5/6 20:32:54

C语言教学第三课：运算符与表达式

一、课程导入同学们，上节课我们学习了变量和数据类型，这些是C语言的基础。今天，我们将继续深入学习C语言中的运算符与表达式。运算符是C语言中用于执行各种操作的符号，而表达式则是由变量、常量和运算符组成的有意义的组合。通过…...

编程日记 2026/3/9 22:43:10

一文讲解Spring中应用的设计模式

我们都知道Spring 框架中用了蛮多设计模式的： 工厂模式呢，就是用来创建对象的，把对象的创建和使用分开，这样代码更灵活。代理模式呢，是用一个代理对象来控制对真实对象的访问，可以在访问前后做一些处理。单…...

编程日记 2026/5/4 6:21:35

springboot集成钉钉，发送钉钉日报

目录 1.说明 2.示例 3.总结 1.说明学习地图 - 钉钉开放平台在钉钉开放文档中可以查看有关日志相关的api，主要用到以下几个api： ①获取模板详情 ②获取用户发送日志的概要信息 ③获取日志接收人员列表 ④创建日志发送日志时需要根据模板规定日志…...

编程日记 2026/5/1 21:43:57

优选算法的灵动之章：双指针专题（一）

个人主页：手握风云专栏：算法目录一、双指针算法思想二、算法题精讲 2.1. 查找总价格为目标值的两个商品 2.2. 盛最多水的容器编辑 2.3. 移动零 2.4. 有效的三角形个数一、双指针算法思想双指针算法主要用于处理数组、链表等线性数据结构…...

编程日记 2026/5/6 17:06:34

PyQt4学习笔记1】使用QWidget创建窗口

目录一、创建一个简单的 QWidget 窗口二、设置窗口属性 1. 设置窗口标题 2. 设置背景颜色 3. 设置窗口大小和位置 4. 设置窗口模式 5. 关闭窗口 6. QWidget 及其子控件的样式三、添加控件到 QWidget 1. 添加按钮 2. 添加标签 3. 添加文本框 4. 控件布局管理四、自定义样式 …...

编程日记 2026/5/5 17:27:15

pycharm 中的 Mark Directory As 的作用是什么？

文章目录 Mark Directory As 的作用PYTHONPATH 是什么PYTHONPATH 作用注意事项 Mark Directory As 的作用可以查看官网：https://www.jetbrains.com/help/pycharm/project-structure-dialog.html#-9p9rve_3 我们这里以 Mark Directory As Sources 为例进行介绍。这…...

编程日记 2026/5/6 23:12:14

【C++】string类(上)：string类的常用接口介绍

文章目录前言一、C中设计string类的意义二、string类的常用接口说明1. string类对象的常见构造2. string类对象的容量操作2.1 size、capacity 和 empty的使用2.2 clear的使用2.3 reserve的使用2.4 resize的使用 3. string类对象的访问及遍历操作3.1 下标[ ] 和 at3.2 迭代器it…...

编程日记 2026/5/6 16:45:07

CSS关系选择器详解

CSS关系选择器详解学习前提什么是关系选择器？后代选择器（Descendant Combinator）语法示例注意事项子代选择器（Child Combinator）语法示例注意事项邻接兄弟选择器（Adjacent Sibling Combinator&#xff0…...

编程日记 2026/5/3 18:48:01

C语言中的信号量

信号是操作系统中用来传递特定消息的机制。操作系统可以使用这种方式将程序运行过程中发生的各类特殊情况发送给程序，并按照其指定的逻辑进行处理。信号名称都以 “SIG” 作为前缀，如程序访问非法内存时，会产生名为 SIGSEGV 的信号。程序需…...

编程日记 2026/5/7 19:43:35

求一个数的数根（高精度）

上一期我们讲的是求一个数的数根，和本期唯一不同的是，数据范围不同了，上一期这个数是小于等于10的18次方的，这一期是小于等于10的1000次方的，开一个变量？肯定不行，我们需要再开一个数组&#xf…...

编程日记 2026/5/7 18:01:06

从理论到实践：Linux 进程替换与 exec 系列函数

个人主页：chian-ocean 文章专栏-Linux 前言： 在Linux中，进程替换（Process Substitution）是一个非常强大的特性，它允许将一个进程的输出直接当作一个文件来处理。这种技术通常用于Shell脚本和命令行操作中…...

编程日记 2026/5/4 22:07:30

3 卷积神经网络CNN

1 Image Classification (Neuron Version) – 1.1 Observation 1 1.2 Observation 2 如果不同的receptive field需要相同功能的neuron，可以使这些neuron共享参数 1.3 Benefit of Convolutional Layer 2 Image Classification (Filter Version) 不用担心filter大小…...

编程日记 2026/5/4 23:33:12

详解Linux系统的终端(Terminal)以及分类(各种tty开头的设备文件)

目录终端(Terminal)的概念和作用终端(Terminal)在Linux中被视为设备,每个终端有自己的设备文件tty三个字母的来源(tty名字的来源)如何查看当前终端的设备文件常见终端的分类1-串口终端02-虚拟控制台终端（Virtual Console）03-伪终端（Pseudo T…...

编程日记 2026/5/6 20:59:44

强化学习数学原理（五）——随机近似与随机

一、Motivating example 首先有个random variable(随机变量)X，我们的目标就是求出他的expectation E(x)，我们有一些iid的采样，xi，从1到n，求出均值但是如果有很多数据，我需要等很久，把所有数据都…...

编程日记 2026/5/7 4:18:54

图书管理系统 Axios 源码__获取图书列表

目录核心功能源码介绍 1. 获取图书列表技术要点适用人群本项目是一个基于 HTML Bootstrap JavaScript Axios 开发的图书管理系统，可用于添加、编辑、删除和管理图书信息，适合前端开发者学习前端交互设计、Axios 数据请求以及 Bootstrap 样…...

编程日记 2026/4/28 11:44:49

线性数据结构：单向链表

放弃眼高手低，你真正投入学习，会因为找到一个新方法产生成就感，学习不仅是片面的记单词、学高数......只要是提升自己的过程，探索到了未知，就是学习。考虑到可能有小白在合并代码时出现各种细节问题，本文…...

编程日记 2026/5/5 18:51:46

线程互斥同步

前言： 简单回顾一下上文所学，上文我们最重要核心的工作就是介绍了我们线程自己的LWP和tid究竟是个什么，总结一句话，就是tid是用户视角下所认为的概念，因为在Linux系统中，从来没有线程这一说法，…...

编程日记 2026/5/5 12:43:06

《苍穹外卖》项目学习记录-Day11订单统计

根据起始时间和结束时间，先把begin放入集合中用while循环当begin不等于end的时候，让begin加一天，这样就把这个区间内的时间放到List集合。查询每天的订单总数也就是查询的时间段是大于当天的开始时间（0点0分0秒）小于…...

编程日记 2026/5/3 18:36:21

SAP HCM 回溯分析

最近总有人问回溯问题，今天把12年总结的笔记在这共享下： 12年开这个图的时候总是不明白是什么原理，教程看N次，网上资料找一大堆，就是不明白原理，后来为搞明白逻辑，按照教材的数据一样做&#xf…...

编程日记 2026/5/5 16:31:38

JavaScript原型链与继承：优化与扩展的深度探索

在 JavaScript 的世界里，万物皆对象，而每个对象都有一个与之关联的原型对象，这就构成了原型链的基础。原型链，简单来说，是一个由对象的原型相互连接形成的链式结构。每个对象都有一个内部属性[[Prototype]]&#xff0…...

编程日记 2026/5/2 19:15:42

五子棋对弈

问题描述 "在五子棋的对弈中，友谊的小船说翻就翻？" 不！对小蓝和小桥来说，五子棋不仅是棋盘上的较量，更是心与心之间的沟通。这两位挚友秉承着"友谊第一，比赛第二"的宗旨，决…...

编程日记 2026/5/2 21:44:33

vue vscode插件推荐安装

在 VSCode 中开发 Vue，推荐安装以下插件： 核心插件 1. Volar（Vue Language Features） - Vue 3 官方推荐的开发工具，替代 Vetur。 This extension is deprecated. Use the Vue - Official extension instead. 1.Vue …...

编程日记 2026/4/30 18:43:23

Med-R2：基于循证医学的检索推理框架：提升大语言模型医疗问答能力的新方法

Med-R2 : Crafting Trustworthy LLM Physicians through Retrieval and Reasoning of Evidence-Based Medicine Med-R2框架Why - 这个研究要解决什么现实问题What - 核心发现或论点是什么How - 1. 前人研究的局限性How - 2. 你的创新方法/视角How - 3. 关键数据支持How - 4. 可…...

编程日记 2026/5/6 6:33:56

P7497 四方喝彩 Solution

Description 给定序列 a ( a 1 , a 2 , ⋯ , a n ) a(a_1,a_2,\cdots,a_n) a(a1,a2,⋯,an)，有 m m m 个操作，分四种： add ⁡ ( l , r , v ) \operatorname{add}(l,r,v) add(l,r,v)：对于所有 i ∈ [ l , r ] i \in [l,r…...

编程日记 2026/3/18 20:45:05

EtherCAT主站IGH-- 29 -- IGH之mailbox.h/c文件解析

EtherCAT主站IGH-- 29 -- IGH之mailbox.h/c文件解析 0 预览一该文件功能`mailbox.c` 文件功能函数预览二函数功能介绍`mailbox.c` 中主要函数的作用1. `ec_slave_mbox_prepare_send`2. `ec_slave_mbox_prepare_check`3. `ec_slave_mbox_check`4. `ec_slave_mbox_prepare_fetc…...

编程日记 2026/4/11 2:05:20

UI线程用到COM只能选单线程模型

无论用不用UI库，哪怕是用Win32 API手搓UI，UI线程要用COM的话，必须初始化为单线程单元(STA)，即CoInitializeEx(nullptr, COINIT_APARTMENTTHREADED);，不能用MULTITHREADTHREADED。实际上，很多(WPF等)UI库若…...

编程日记 2026/5/6 4:14:42

排序算法--桶排序

核心思想为分区间排序后合并。适用于数据均匀分布在一个范围内，或浮点数排序或范围明确的数据。如果需要处理整数或其他数据范围，可以通过调整BUCKET_RANGE的计算方式实现，例如对[0,100)的整数排序： int index arr[i] / 10; // …...

编程日记 2025/12/2 16:59:31