微信小程序教程011-3：京西购物商城实战之Home页实现

news2025/10/29 21:52:29

文章目录

  • 3、首页
    • 3.0 创建home分支
    • 3.1 配置网络请求
    • 3.2 轮播图区域
      • 3.2.1 请求轮播图的数据
      • 3.2.2 渲染轮播图的UI结构
      • 3.2.3 配置小程序分包
      • 3.2.4 点击轮播图跳转到商品详情页
      • 3.2.5 封装 uni.$showMsg() 方法
    • 3.3 分类导航区域
      • 3.3.1 获取分类导航的数据
      • 3.3.2 渲染分类导航的UI结构
      • 3.3.2 点击第一项，切换到分类页面
    • 3.4 楼层区域
      • 3.4.1 获取楼层数据
      • 3.4.2 渲染楼层标题
      • 3.4.3 渲染楼层里的图片
      • 3.4.4 点击楼层图片跳转到商品列表页
    • 3.5 分支的合并与提交

3、首页

3.0 创建home分支

运行如下命令，基于master分支在本地创建home子分支，用来开发和home首页相关的功能：

git checkout -b home
git branch

在这里插入图片描述

3.1 配置网络请求

由于平台限制，小程序项目不支持axios，而且原生的wx.request()API功能简单，不支持拦截器等全局制定功能，因此，建议在uni-app项目中使用@escook/request-miniprogram第三方包发起网络请求。

官方地址：https://www.npmjs.com/package/@escook/request-miniprogram

1、安装，在项目根目录，打开cmd运行以下命令：

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

通过Sui Gas Pool扩展赞助交易gas费

通过Sui Gas Pool扩展赞助交易gas费

Mysten Labs正在向Sui开发者社区开源Sui Gas Pool功能。这项创新服务旨在大规模赞助Sui上交易的gas费，解决高并发需求应用的用户入驻问题。 Sui的原生功能赞助交易，允许交易使用与发送者地址不同的gas coin支付gas费。这一功能允许服务补贴用户的交易成…
阅读更多...
如何评估并选择最佳的国内项目管理软件？

如何评估并选择最佳的国内项目管理软件？

国内外主流的10款国内项目管理软件对比：PingCode、Worktile、Jira 、Basecamp、Trello、Asana 、Wrike、Tower 、禅道、Teambition 。 在选择适合自己企业的项目管理软件时，很多人会感到无从下手，担心无法找到既符合预算又能满足团队需求的解…
阅读更多...
【优秀python案例】基于百度贴吧的数据采集与文本分析设计与实现

【优秀python案例】基于百度贴吧的数据采集与文本分析设计与实现

数据采集实现： 对百度贴吧帖子数据的采集。首先，使用requests库发送HTTP请求，通过设置请求头模拟浏览器访问，获取网页的HTML内容。然后，利用BeautifulSoup库对HTML内容进行解析，以便提取所需的信息。 在循…
阅读更多...
AI回答：C#项目编译后生成部分文件的主要职责

AI回答：C#项目编译后生成部分文件的主要职责

【引入】以ConsoleApp1为例，请问C#编译之后以下文件有啥用 1.bin\runtimes 文件夹存放什么，有什么用？ bin\runtimes 文件夹存放了项目的运行时相关文件，这些文件包括了各种目标平台的运行时库。 2.bin\生成的exe文件可以在别的电脑…
阅读更多...
(这是让文心一言生成的文心一言指令博客)3分钟学会写文心一言指令：解锁AI创作新境界

(这是让文心一言生成的文心一言指令博客)3分钟学会写文心一言指令：解锁AI创作新境界

3分钟学会写文心一言指令：解锁AI创作新境界 在这个AI技术日新月异的时代，文心一言作为领先的智能语言模型，正逐步改变着我们的创作与交流方式。无论是撰写文章、创作诗歌，还是进行日常对话，文心一言都能凭借其强大的语…
阅读更多...
记忆化搜索——1

记忆化搜索——1

目录 1.斐波那契数 2.不同路径 3.最长递增子序列 4.猜数字大小2 5.矩阵中的最长递增路径 1.斐波那契数 该题规律很明显，就直接放记忆化搜索的版本了 class Solution { public:int dfs(int n){if(n0||n1)//递归出口{return n;}if(f[n-1]-1)//检查是否已经记忆过…
阅读更多...
计算机网络中拥塞控制的门限值怎么设置

计算机网络中拥塞控制的门限值怎么设置

拥塞避免的门限值设置主要涉及到加权随机早期检测（‌WRED）‌技术，‌这是一种拥塞避免机制，‌通过为每个队列设定一对低门限和高门限值来实现。‌具体来说，‌当队列长度小于低门限时，‌不丢弃报文&#xff0…
阅读更多...
64 lambda 表达式

64 lambda 表达式

lambda 表达式常用来声明匿名函数，即没有函数名字的临时使用的小函数，常用在临时需要一个类似于函数的功能但又不想定义函数的场合。 lambda 表达式只可以包含一个表达式，不允许包含其他复杂的语句，但在表达式中可以调用其他函数…
阅读更多...
Flink实战(10)-checkpoint容错保证

Flink实战(10)-checkpoint容错保证

0 前言 程序在 Flink 集群运行，某个算子因为某些原因出现故障，如何处理 在故障恢复后，如何保证数据状态，和故障发生之前的数据状态一致? 1 什么是 checkpoint(检查点)? Checkpoint 能生成快照(Snapshot)。 若 Flink 程序崩…
阅读更多...
ResNet 网络中的残差单元

ResNet 网络中的残差单元

今晚看《深度学习推荐系统实战》这本书，读到这样一句话，残差单元中的两层 ReLU 网络其实拟合的是输出和输入之间的“残差” x o − x i x^o-x^i xo−xi ，想看看微信读书的 AI 问书新功能对这句话怎么理解，原以为会像其他大模型一…
阅读更多...
H20 首发！上 Neolink.AI 免费尝鲜

H20 首发！上 Neolink.AI 免费尝鲜

AI 原生服务平台 Neolink.AI 正式上线！Neolink.AI 致力于整合关键要素——算力、数据、知识、模型与企业应用，旨在为 AI-Native 应用的构建提供高效能的 GPU 算力资源和全面的一站式数据与 AI 平台产品服务。 #高性能千卡集群免费尝鲜# 今天&#xff0…
阅读更多...
[Vue3] 4 computed

[Vue3] 4 computed

前言 … 目标 1 computed的用法 computed的用法 computed 计算属性用法与vue2的类似 引入 import { reactive,computed } from vue使用 setup(){let person reactive({firstName:张,lastName:三})// 简单写法 - 只有读// person.fullName computed(()>{// return…
阅读更多...
Windows11手动安装linux分发版

Windows11手动安装linux分发版

Manual installation steps for older versions of WSL | Microsoft LearnStep by step instructions to manually install WSL on older versions of Windows, rather than using the wsl install command.https://learn.microsoft.com/en-us/windows/wsl/install-manual下载完…
阅读更多...
【算法 03】雇佣问题

【算法 03】雇佣问题

“雇用问题”及其算法优化 在日常生活和工作中，我们经常会遇到需要从多个选项中做出选择的情况，而“雇用问题”正是这样一个典型的例子。在这个问题中，我们不仅要考虑如何高效地找到最佳候选人，还要关注整个过程中的成本。今天&a…
阅读更多...
Tomcat漏洞

Tomcat漏洞

一、Tomcat 漏洞描述 当 Tomcat运行在Windows操作系统时，且启用了HTTPPUT请求方法(例如，将readonly初始化参数由默认值设置为false)，攻击者将有可能可通过精心构造的攻击请求数据包向服务器上传包含任意代码的JSP 文件，JSP文件中…
阅读更多...
docker系列11：Dockerfile入门

docker系列11：Dockerfile入门

传送门 docker系列1：docker安装 docker系列2：阿里云镜像加速器 docker系列3：docker镜像基本命令 docker系列4：docker容器基本命令 docker系列5：docker安装nginx docker系列6：docker安装redis docker系…
阅读更多...
蒲公英G5-2250路由器之收集各种硬件的配置页面

蒲公英G5-2250路由器之收集各种硬件的配置页面

前言：此篇文章是为了更好的让大家了解各个路由器的后台设置页面具体有哪些功能，更加的清晰直观！（如有雷同纯属巧合，如有侵权联系删除！） 云管理平台 本地地址IP/oraybox/login.html 本地配置页…
阅读更多...
一把手带你了解Bigo Ads联动休闲真金游戏出海营销策略

一把手带你了解Bigo Ads联动休闲真金游戏出海营销策略

一把手带你了解Bigo Ads联动休闲真金游戏出海营销策略 在探索Bigo Ads作为投放海外游戏广告的平台时，精准定位与创意融合成为了成功的关键。首先，深入理解目标市场的文化习俗与玩家偏好至关重要。不同地区的玩家对于游戏类型、画风乃至广告语言风格都有…
阅读更多...
【链表OJ】常见面试题 3

【链表OJ】常见面试题 3

文章目录 1.[环形链表II](https://leetcode.cn/problems/linked-list-cycle-ii/description/)1.1 题目要求1.2 快慢指针1.3 哈希法 2.[随机链表的复制](https://leetcode.cn/problems/copy-list-with-random-pointer/description/)2.1 题目要求2.2 迭代法 1.环形链表II 1.1 题目…
阅读更多...
KEIL5芯片包下载

KEIL5芯片包下载

一、打开KEIL芯片包下载网址 Arm Keil | Devices 二、搜索要下载的芯片型号 三、安装
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023