【微信小程序】动态API+手动实现分类导航

最新推荐文章于 2026-04-28 15:22:00 发布

原创

最新推荐文章于 2026-04-28 15:22:00 发布 · 1.5k 阅读

收录于

本文介绍了如何在微信小程序中通过调用特定API（https://api-hmugo-web.itheima.net/api/public/v1/home/catitems）获取分类导航数据，并手动实现导航的加载。内容包括两个主要步骤：1. 调用接口获取数据；2. 使用获取的数据加载分类导航。

动态API+手动实现分类导航
在这里插入图片描述
1. 获取分类导航数据
接口：https://api-hmugo-web.itheima.net/api/public/v1/home/catitems
pages/index/index.js

// 引入用来发送请求的方法
import {
   
    request } from "../../request/request.js";

Page({
   
   
  data: {
   
   
    // 分类导航数组
    catesList: []
  },
  
  onLoad: function (options) {
   
   
    this.getCateList(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大格子嘞

关注关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp微信小程序实现《优购商城项目》

qq_64102392的博客

06-14

5402

对于跨平台开发来说，节约成本是最主要的目的，相比较其他框架，觉得uniapp上手的成本是比较低的。

9 提取公共接口路径

sinat_33940108的博客

06-28

409

每次调用接口获取数都有一大部分相同，可以提取出来，调用时合成即可。 url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata' request.js export const request=(params)=>{ // url:"https://api-hmugo-web.itheima.net/api/public/v1/categories" const baseUrl = "https://a

2 条评论您还未登录，请先登录后发表或查看评论

DIFFA-2：扩散模型在音频理解中的创新应用

最新发布

weixin_30856725的博客

04-28

401

扩散模型作为生成式AI的重要分支，通过逐步去噪过程实现数据建模，在计算机视觉领域取得突破后，正逐步向音频处理领域延伸。其核心价值在于能有效建模复杂声学特征，特别适合处理含噪声、混响等挑战性场景。DIFFA-2框架创新性地将扩散模型与CLIP语义空间对齐相结合，通过动态频谱注意力机制实现频段自适应聚焦，在音乐分类、语音情感分析等任务中展现显著优势。工程实践中，该技术通过TensorRT加速和半精度推理实现300ms内的实时处理，已成功应用于车载语音、工业检测等场景，为多模态AI系统开发提供新思路。

使用微信小程序写项目

weixin_50889870的博客

06-28

411

1. ⾸⻚ 1.1. 效果 1.2. 业务逻辑使⽤tabbar 实现底部导航功能使⽤⾃定义组件的⽅式实现头部搜索框加载轮播图数据加载导航数据加载楼层数据 1.3. 接⼝获取⾸⻚轮播图数据 https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata 获取⾸⻚分类菜单数据 https://api-hmugo-web.itheima.net/api/public/v1/home/catitems 获取⾸⻚楼层

优雅的实现微信小程序动态tabBar及组件中实现动态数据

gamerre的博客

07-19

6671

3、重点是在对应导航的JS文件中找到onShow方法，写上tabService.updateIndex(this,0)，其中tabService就是我们写的全局tab-service.js，引入一下。要实现动态导航首先要考虑的是如何把小程序中的原生导航更改为自定义导航。重点在实现自定义tabbar的时候，会出现点击导航，高亮状态及跳转链接出现混乱的现象，这是因为使用Component组件是不允许设置动态数据的。1、我们先在utils目录中创建tab-service.js文件，写上全局的数据及方法；...

微信小程序前端开发-电商购物小程序-异步获取数据，动态绑定数据

JuGLe_的博客

09-10

729

在本篇文章我将主要介绍微信小程序中异步获取数据，动态绑定数据。

【微信小程序】动态API+手动实现页面楼层

DUMG

05-01

1837

动态API+手动实现页面楼层 1. 获取楼层数据接口：https://api-hmugo-web.itheima.net/api/public/v1/home/floordata pages/index/index.js // 引入用来发送请求的方法 import { request } from "../../request/request.js"; Page({ data: { ...

掌握动态更新：微信小程序TabBar的实现技巧

weixin_34718952的博客

08-11

1129

在微信小程序中，标准的TabBar组件提供了基本的导航功能，但有时候它并不能完全满足开发者对特定风格或功能的需求。为了实现更高级的定制化，开发者可以通过自定义TabBar组件来完全控制TabBar的外观和行为。本章将深入了解自定义TabBar组件的设计理念、实现步骤、优势以及在使用过程中可能遇到的问题和解决方案。自定义组件是微信小程序框架中的一个重要概念，它允许开发者封装可复用的界面结构和逻辑，从而在多个页面上实现高度一致性的用户体验。

微信小程序实现地图导航功能：内置展示与外部调用的技术解析

tech5的博客

03-03

716

本文深入解析微信小程序实现地图导航功能的两大核心：内置地图展示与外部地图调用。详细介绍了如何正确获取用户位置（使用gcj02坐标系）、使用Map组件标记目的地，并对比了wx.openLocation与深度链接两种调用外部地图App（如高德、百度地图）进行专业导航的方案，提供了完整的实战案例与避坑指南，帮助开发者打造流畅的导航体验。

微信小程序地图开发：如何用腾讯地图API实现动态路线绘制（附完整代码）

grafana8visual的博客

02-26

927

本文详细解析了在微信小程序中利用腾讯地图API实现动态路线绘制的完整流程。从项目初始化、路线数据获取与polyline解码，到动态绘制、平滑更新策略及高级性能优化，提供了实战代码示例，帮助开发者构建流畅的实时轨迹追踪功能。

微信小程序 —— 自定义顶部、底部导航栏以及获取胶囊体位置信息。

是江迪呀的博客

08-09

2876

theme: smartblue highlight: a11y-dark 一、前言我们在进行微信小程序开发时，常常需要自定义一些东西，比如自定义顶部导航、自定义底部导航等等。那么知道这些自定义内容的具体位置、以及如何适配不同的机型就变得尤为重要。下面让我以在iPhone机型，来给大家介绍下微信小程序如何获取自定义内容的位置信息。二、开启自定义如果需要自定义顶部和底...

小程序购物城项目实战（上篇）

疯子的梦想@的博客

10-20

2205

项目实战小程序的第三方框架资料和文件准备开始搭建首页-搜索框首页-轮播图首页-轮播图渲染优化数据请求方式首页-分类导航首页-楼层分类页面小程序的第三方框架腾讯的 wepy 类似vue框架美团的 mpvue 类似vue框架京东的 taro 类似react框架滴滴的 chameleon uni-app 类似vue框架资料和文件准备接口文档地址。（地址）小程序开发文档。地址阿里巴巴字体图标库。地址 mdn。添加链接描述开始搭建新建一个工程。并填入自己的Appid 目录下新增以下文件夹。

https://api-hmugo-web.itheima.net 不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/minip

li222248的博客

11-14

5194

因为一开始时没有在项目中添加appid , 所以没有权限访问接口解决方法：第一种也是最简单的方式：在详情 -> 本地设置里勾选“不校验合法域名、web-view(业务域名）、TLS版本以及HTTPS证书”选项第二种方式如果你项目后期要上线，要求域名是合法的，域名必须是https的，那就得把它添加到小程序后台里面： ①登录微信公众平台 => 开发 => 开发服务器 => 服务器域名 =>开始配置 => 进行身份验证 => 然后添加域名（注意：添加的域

小程序基本命令

aiven1637的博客

10-30

3531

onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...

微信小程序之侧栏分类 —— 微信小程序实战商城系列（1）

热门推荐

michael的博客

04-14

5万+

在商场项目中，一般都会有分类页面。分类页面可以给用户快速找到相关的商品，下面以侧栏分类为例，如下图布局分析：主盒子> 左盒子>左盒子> 右盒子>右盒子> 主盒子> 左盒子使用标准流右盒子使用绝对定位（top、right） wxml： {{item.tree.desc}}

附录6-2 黑马优购项目-分包(子页面)

potato123232的博客

05-02

1139

首先整你此次要预览的所有图像，也就是轮播图中的所有图像，搞一个列表。我在getGoodsList中有定义，如果isTop为true就将新得到的数据放在列表的头部，如果isTop为false就将新得到的数据放在列表的尾部。goods_detail分为三个区域，从上到下依次是轮播图区域，商品信息区域，富文本区域(富文本也是描述商品信息的，格式为html)，尾部区域。上拉触底是默认生效的，所以我们不需要进行额外的配置，只需要在goods_list.js中定义上拉触底的方法就可以了。携带参数为goods_id。

6 | 小程序实战之商品列表（搜索框 + tabs组件 + 启用上拉页面功能加载下一页 + 启用下拉刷新 + 添加全局的正在加载图标）

NSX-Truth

08-17

2563

1. 效果 2. 获取商品列表的数据接口 https://api-hmugo-web.itheima.net/api/public/v1/goods/search 3. 获取分类id 因为需要在分类页面的商品种类中点击一个种类，就会跳转到对应商品种类的商品列表，固然，需要在分类页面中的配置 url 并含有传递的参数，才能返回对应的商品列表。以下是需要传递的参数，这里先暂时传递分类id（cid）修改分类页面的index.wxml <view class="goods_list">

黑马优购小程序之接口优化

小洋人最happy的专栏

03-28

2712

文章目录1.1 提取接口公共路径 1.1 提取接口公共路径在前面的开发中，网络请求中，url是这么写的： url: "https://api-hmugo-web.itheima.net/api/public/v1/categories" 如果每个接口都这样的话，就有些繁琐了。在项目中，url公共路径可以提取出来，各业务接口只写配置各自的路径就好了。修改request/index.js文件，在...

小程序封装请求数据方法

qq_51925599的博客

11-24

1213

第一步：先在request 文件里新建index.js，写入以下代码。 constbaseUrl='https://api-hmugo-web.itheima.net/api/public/v1/home/' /** *数据请求模块 *接口地址https://api-hmugo-web.itheima.net/api/public/v1/home/ *先显示加载框，然后请求结束加载框消失 * */ exportfunctionrequest(url,da...