黑马程序员-微信小程序-原生框架——购物平台-分类页面

最新推荐文章于 2024-08-06 12:45:29 发布
最新推荐文章于 2024-08-06 12:45:29 发布
阅读量5.8k 收藏 114
点赞数 10
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48884617/article/details/124694633
版权
该教程介绍了如何使用微信小程序开发购物平台的分类页面，包括获取分类数据、渲染页面、利用缓存技术和优化接口代码。讲解了搜索框、内容区域的布局与样式，以及左侧菜单和右侧商品内容的交互实现。同时，对比了web和小程序中本地存储的差异，并展示了如何存取数据。最后，通过提取接口公共部分进行了代码优化。
摘要由CSDN通过智能技术生成

黑马程序员视频教程 

目录

黑马程序员视频教程 

分类页面 

一.获取分类数据

 二.渲染分类页面​​​​​​​

三.使用缓存技术

四.优化接口代码

分类页面 

一.获取分类数据

1.在分类页面.js中引入request方法

2.定义三个空数组，用来分别存放两侧的数据和接口返回来的数据

3.定义一个函数，用来发起数据请求，将请求到到数据赋值给Cates数组

（4）调用函数

 二.渲染分类页面

2.1搜索框

（1）在分类页面的.json中设置标题并声明SearchInput组件

（2）使用SearchInput组件

效果：

最低0.47元/天 解锁文章
Super咩咩
关注
小程序分类页面制作
不看一的博客
11-09 8686
1：页面的样式 2：数据请求 onLoad: function () { var that = this; wx.request({ url: '数据接口', data: { id: '1', position: '2', class_id: '3' }, method: '...
小程序分类页面的实现
gua551100gua的博客
11-07 3931
然后跳转到分类页面的时候，分类页面通过拿到category.id，就能在分类页面知道 在金刚区选中的分类了，从而将该分类进行高亮显示。否则不显示加号，显示购物车图标。点击商品会跳转到详情页面，需要给一个跳转链接，这个商品会有不同的类别，跳转的时候，需要根据类别，做不同的逻辑处理。需要通过一个字段进行显示，而原有数据中没有这样的字段，所以需要手动给当前的数据添加这样的字段，即需要修改原数据的。选择之后，再添加到购物车。外面一个循环，里面再套一个循环，因为内外层的id是一样的，所以可以为第二层的id起个别名。
小程序框架开发技术选型
最新发布
leijmdas的专栏
08-06 1145
即使不跨端，Uni-app也是不错的小程序开发框架，它使用vue语法进行开发，学习门槛低，相关的插件丰富、社区生态繁荣，使用者众多。综上比较，如果您只开发微信小程序，不考虑多端运行，那么选择【原生语言】会是不错的选择，因为有官方背书，其社区生态和框架迭代不会有太大问题，并且语法类似vue2，学习成本不高，打包编译后的文件也非常简洁。5. 多样的开发框架：微信小程序提供了专门的开发框架，也可以使用其他流行的第三方开发框架，开发者可以使用这些框架快速的开发功能丰富、性能优越的小程序。
微信小程序实战篇-分类页面制作
chuti6853的博客
06-26 1595
哈喽，大家好，今天周一了，今天第九程序要教大家微信小程序分类页面的制作，废话不多说，先上效果图。 这个界面布局难度不是很大，css基础好的，很快就实现了，分类界面，左边是一级目录，右边是一级目录对应的二级目录，根据 这个需求，我们数据设计的结构一定是数组嵌套数组，第...
微信小程序商城项目（篇5）：分类页面的实现
YanHSama的博客
09-06 5634
粗略效果演示 从后端获取数据 // 分类数据获取 let promise=getRequest('https://api-hmugo-web.itheima.net/api/public/v1/categories') promise.then((res)=>{ console.log(res) this.setData({ classifyData:res.data.message }) }) 将导航数据渲染到页面
微信小程序–商品分类页面（左右滚动条）
无知者无畏
06-20 5550
微信小程序–商品分类页面（左右滚动条） 接口数据：https://api-hmugo-web.itheima.net/api/public/v1/categories 分类页面的结构 <view class="cates"> <searchInput></searchInput> <view class="cates_container"> <!-- 左侧菜单 --> <scroll-view class="lef
黑马程序员视频-微信小程序-原生框架——项目搭建
weixin_48884617的博客
05-07 547
黑马程序员视频-微信小程序-原生框架——项目搭建
《微信小程序开发实战》学习笔记chapter1微信小程序人门
Linn908的博客
10-22 1210
《微信小程序开发实战》黑马程序员版本的学习笔记分享。 chapter1微信小程序人门
JavaScript面向对象实现-坦克大战（附前端全套学习路线）
weixin_51689029的博客
06-24 1500
【课程简介】使用javascript+面向对象实现一个坦克大战游戏，让更多的同学能更加深入地理解面向对象思想。文末附有前端全套学习路线。【主讲内容】1. 讲解什么是面向对象，javascript中如何实现面向对象2. 分析坦克大战中需要用到哪些对象3. 使用canvas实现游戏地图的绘制4. 使用canvas实现坦克的绘制5. 如何使用键盘控制坦克移动6. 如何生成敌对的坦克7. 如何使用寻路算法让敌人寻找玩家的坦克...
小程序实现分类页
10-16
主要为大家详细介绍了小程序实现好看的分类页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Java 学习路线大全，再也不用迷路啦（持续更新）
腾讯全栈-ITCJF
10-14 2786
路线特点 最新，完整一条龙，从入门到入土（⭐ 表示推荐学习） 给出目标、学习建议、关键知识点、最优资源以及各类资源推荐（视频、书籍、文档、项目、工具等） 划分阶段、更有计划，且在最后给出持续学习的方向、探索 Java 程序员发展的无限可能 前言 首先呢，我们要了解 Java 的应用场景和就业方向，看看和自己的学习目的是否一致，目前，Java 的岗位需求多，是后台开发的主流编程语言，功能强大，还是很值得学习的。 阶段 1：Java 入门 目标 培养兴趣、快速上手 前期准备 准备好一款在线、随时随地
微信小程序开发--分类页面实现
Aurora_1970s的博客
10-24 8222
微信小程序开发–分类页面实现 之前在详情页面利用Vant Weapp的UI库构建出了GoodsAction 商品导航功能，接着需要在分类页面(kind.wxml)实现商品分类。 1.引入第三方组件 用到的是Tab标签页 在kind.json中写入： "usingComponents": { "van-tab": "/miniprogram_npm/@vant/weapp/tab/index", "van-tabs": "/miniprogram_npm/@vant/weapp/tabs/index"
黑马程序员-微信小程序-原生框架——购物平台-首页
weixin_48884617的博客
05-10 1859
黑马程序员-微信小程序-原生框架——购物平台-首页
新手版微信小程序商场商品分类页面（本地版）
Sun_day_more的博客
04-12 3490
关于微信小程序商品分类页面和商品详情页面的制作（新手版）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值