uniapp学习（006 萌宠案例）

最新推荐文章于 2025-07-21 22:21:26 发布
最新推荐文章于 2025-07-21 22:21:26 发布
阅读量681 收藏 17
点赞数 24
CC 4.0 BY-SA版权
分类专栏： uniapp 文章标签： uni-app 学习 微信小程序 小程序 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wang_book/article/details/142942861

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第52p-第p60的内容

文章目录

页面布局

我们使用这个随机猫咪接口
随机猫咪Api接口
这里的limit可以写1和10 代表收到几条数据（仅支持1和10）
在这里插入图片描述

在这里插入图片描述

如果猫咪接口很慢或者图片加载不出来，也可以使用咸虾米接口
咸虾米Api接口库
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

编写代码

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

图片展示

使用previewImage方法 实现图片数组预览

传入第几张（index）和图片数组即可；

通过.map方法 把数组转变成只需要url的数组
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

懒加载

目前只支持小程序、h5不支持
在这里插入图片描述
加上属性lazy-load即可实现懒加载 只是加载当前页面需要的图片 其他图片等滚动到的时候再加载即可
在这里插入图片描述

在这里插入图片描述

遇到错误提示时 弹出错误提示

在这里插入图片描述

在这里插入图片描述

添加loading图标在这里插入图片描述
在这里插入图片描述

可以把loading放到标题旁边 这样比较好 不会影响手机操作
即 uni.showLoading()改成 uni.showNavgationBarLoading()
在这里插入图片描述

触底刷新

使用onTeachBottom生命周期
在这里插入图片描述

调用请求方法
在这里插入图片描述

解构追加数组
在这里插入图片描述

直接追加不推荐，因为改变了源

在这里插入图片描述
如果声明ref的话无所谓push还是concat或是结构，但如果reactive的话只能是push

下拉刷新

在pages.json里开启下拉刷新
在这里插入图片描述
在页面调用onPullDownRefresh

先清空数组 再请求api
在这里插入图片描述
刷新之后 记得手动停掉刷新动画
在这里插入图片描述

在这里插入图片描述

放到onpulldown内也可以

回到顶部

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
把屏幕的安全区空出来
在这里插入图片描述
在这里插入图片描述
安全区的高度
在这里插入图片描述

使用刷新方法

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

返回顶部
在这里插入图片描述

上升时间可以修改为100 速度快
在这里插入图片描述

扩展组件

在这里插入图片描述
也可以引入第三方ui框架，这里我们推荐官方ui
在这里插入图片描述

下载插件并导入hbuilderx
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
导入后 出现新的文件夹

在这里插入图片描述

然后直接复制即可使用
在这里插入图片描述
可以调整大小和颜色
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

加一个安全区域 calc方法记得加空格

在这里插入图片描述

在这里插入图片描述

用分段器来实现筛选功能

在这里插入图片描述

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

在这里插入图片描述
这里的下标是点击变化的
在这里插入图片描述
下拉刷新的时候记得把其改成0
在这里插入图片描述

这里咸虾米的API接口0点更新次数 提示key失效
在这里插入图片描述

vue uni-app实例代码
weixin_44752891的博客
05-26 2946
index.vue <template> <view> <tophead></tophead> <topnav></topnav> <leftnav></leftnav> </view> </template> ...
（2025最新）Java毕业设计选题参考2-题目新颖（值得收藏）
qq_39126426的博客
08-21 857
基于SpringBoot养老院管理系统设计和实现基于SpringBoot考编论坛网站的设计与实现基于SpringBoot合库管理系统设计和实现基于SpringBoot语言课学习系统的设计与实现-（小程序）基于SpringBoot萌宠宜家商娀系统设计和实现基于SpringBoot家具销展示平台设计和实现基于SpringBoot校园失物招领系统-（小程序）基于SpringBoot新能源充电系统设计和实现基于SpringBoot校园求职招聘系统设计和实现。
vue3+uniapp咸虾米壁纸项目实战
weixin_65574176的博客
08-14 1653
目前已完成的效果如下所示，因为要自己去申请域名才能实现网络图片下载的api，有需要的朋友可以去咸虾米老师的视频教程了解。目前已完成的效果如下图所示，限于篇幅原因，因为代码真的太多了，写多了自己都头大，懒得搬过来了，请各位移步仓库QAQ。PS:这个项目后期需要给配置域名，得自己去申请。如果使用腾讯云服务的话，应该就不用了。uni-app官网 (dcloud.net.cn)项目实战教程 哔哩哔哩搜索 咸虾米。
虾米API接口：item_search - 根据关键词取商品列表
QQ569893796的博客
08-30 1450
虾米API接口，通过关键字搜索获取商品列表 如：关键字搜索：dress API返回搜索返回结果，如下图 点击注册测试地址（获取Key和secret） Request address: //api.onebound.cn/shopee/api_call.php? q=dress&page=1&sort=&api_name=item_search&lang=zh-CN&key=&secret= ----------------------------------
random-cat-api
04-13
随机猫API 既然您已经使用过API，请学习如何梳理API文档！ 通过了解API可以做什么以及如何使用它，您将能够为您的项目和应用程序添加惊人的功能。 先决条件 DOM和事件 API和AJAX 指示 分叉并克隆此存储库。 切换到新目录。 满足列出的要求。 入门代码可在 。 您需要通过在原始存储库上发出拉取请求来提交提交。 要求 第1部分 首先，使用axios()向Cat API发出GET请求，然后控制台记录响应对象。 导航至并通读该文档。 在script.js ，使用axios()和“ Get a Random Kitty” URL发出GET请求，并控制台记录响应对象。 您如何知道请求是否成功？ 第2部分 接下来，每当用户单击按钮时，使用Cat API来显示随机猫的图像！ 您将向已为您提供的“随机猫”按钮添加功能。 添加功能，以便在单击“随机猫”按钮时，出现随机猫的图像！
自用免费有趣的测试、学习API接口
dandanmei0513的博客
02-26 841
自用免费有趣的测试、学习API接口
随机图片api接口网站整合
热门推荐
T3165919332的博客
05-17 1万+
会返回一张 800x600 的随机 Flickr 图片所以,如果需要在程序或网页中随机展示图片,可以使用以上网站提供的 API,很方便获得随机图片的地址和预览图。图片无版权问题,可以直接使用。会返回一个 800x600 的随机图片2. Lorem PicsumLorem Picsum 也是提供随机高清图片的网站,图片主要来源于 Unsplash。会返回一张 800x600 的随机图片3. PlacekittenPlacekitten 提供随机的 `kitten (小猫) 图片,图片尺寸也比较丰富。
Vue.js宠物服务小程序前端项目及源码教程
同时，项目源码作为实战案例，可以帮助学习者深入理解Vue.js和uniapp框架的使用。另外，数据库脚本的提供可以帮助学习者了解后端与前端的交互，以及如何实现数据的持久化。 ### 结语 该宠物服务小程序前端项目源码...
【免费API】动物 animals
API开发
08-27 754
API 描述 Auth HTTPS CORS AdoptAPet - 帮助宠物被领养的资源 apiKey Yes Yes Cat Facts - 每日猫咪知识 No Yes No Cataas - 猫咪服务（猫咪图片和gif） No Yes No Cats - 来自Tumblr的猫咪图片 apiKey Yes No Dog Facts - 随机狗狗知识 No Yes Yes Dogs - 基于斯坦福大学的狗狗数据集 No Yes Yes eBird - 检索某个地区最
探索GetSomeCats项目：一个创新的猫咪图像生成器
gitblog_00022的博客
03-26 580
探索GetSomeCats项目：一个创新的猫咪图像生成器 去发现同类优质开源项目:https://gitcode.com/ 项目简介 GetSomeCats 是一个基于深度学习的开源项目，它使用先进的神经网络模型生成可爱的猫咪图像。这个项目旨在将人工智能的力量带入日常娱乐，让普通用户也能体验到AI创造的乐趣。通过简单的API调用或前端界面，你可以轻松获取一系列独特且有趣的猫咪图片。 技术分析 Ge...
rancat：简单的nativescript应用会随机获取猫的图片
02-04
兰卡特 简单的nativescript应用程序使用Cat Api获取猫的随机图片 Google Play网址： ： id
【b站咸虾米】chapter5_uniapp-API_新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握
qq_37581764的博客
02-22 2886
课程地址：【新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?
【萌宠案例】
2301_80735340的博客
07-28 582
then即使用result做一些事情，.catch是用于处理错误的；.finally即无论是否成功，都会执行。现在实现点击逻辑，分为三类：全部、猫猫、狗狗，点击后会显示相应的图片类型，在任意界面下拉刷新时回到全部界面。定义“刷新” “顶部” 两个按钮，为其设置CSS；然后定义点击刷新与界面滚动的方法。触底加载更多的实现，即将新加载内容与旧内容合并起来。下拉刷新的实现，即清空数组，然后重新加载。
各种猫片获取方式
这里是菠萝味菠萝啤的博客
06-29 4546
先呈上地址：http://placekitten.com/ 此链接里面有各种猫咪的图片，只需要输入长宽，就可以获得相应大小的猫咪图片。
vue uniapp里照片多张照片展示
lgl的博客
03-13 566
view class="tit">照片展示</view>baseReq(`接口地址`, 'get').then(//多个照片之间用英文逗号拼接，得到数据后对照片进行分割。// 点击单张照片可以放大查看。//声明照片list。
uniapp扫描二维码反色处理
baidu_39009276的博客
07-21 104
在开发扫描二维码过程中，发现白底黑码可以直接用uni.scanCode扫描出来，但是黑底白码就扫不出来，于是就试试反色后的二维码能不能扫描出来。
全新开发范式：uni-app X助力全平台原生应用
最新发布
夏天的博客
07-21 312
国产操作系统迎来重大突破，DCloud发布HBuilderX4.64正式版，uni-app x实现对鸿蒙等多个主流平台的全覆盖。该技术突破性地将Web开发效率与原生性能相结合，通过编译转换实现原生代码运行，解决了传统跨平台框架的性能瓶颈。相比传统uni-app，uni-app x采用语言翻译架构，提供更优的性能体验，特别适合复杂交互场景。同时，该方案为国产操作系统生态建设提供了重要支持，降低开发者迁移成本，提升开发效率。随着国产操作系统的普及，uni-app x正重新定义跨平台开发的边界。
uniapp使用uni-ui怎么修改默认的css样式比如多选框及样式覆盖小程序/安卓/ios兼容问题
程小博衍的博客
07-21 308
uniapp使用uni-ui怎么修改默认的css样式比如多选框及样式覆盖小程序/安卓/ios兼容问题
uni-app开发小程序，根据图片提取主题色值
acoolper的专栏
07-21 173
需求，在页面根据传入的图片提取图片主色值并用来设置区块背景色。
设计制作萌宠展示网站
12-27
### 设计和构建一个萌宠展示网站的最佳实践 #### 1. 明确需求分析 在启动任何Web项目之前，了解目标受众的需求至关重要。对于萌宠展示网站而言，主要功能应围绕宠物图片上传、分类浏览、用户评论互动等方面展开。这不仅能够吸引爱宠人士的关注，还能促进社区交流和发展。 #### 2. 技术选型建议 考虑到用户体验与性能优化之间的平衡，在技术栈的选择上可以采用现代化前端框架如React.js或Vue.js来实现动态交互效果；而后端则可选用稳定高效的Node.js配合Express框架处理业务逻辑，并借助MongoDB存储非结构化数据（比如照片）。此外，为了提高加载速度并降低服务器压力，还可以引入CDN加速服务分发静态资源文件[^3]。 #### 3. 架构设计要点 - **前后端分离架构**：将页面渲染工作交给客户端完成，使应用更加灵活易于维护； - **RESTful API接口定义**：遵循统一标准制定清晰的数据交换协议，方便后续扩展与其他系统的集成； - **缓存机制设置**：针对热点查询结果实施内存级高速缓存策略，减少重复计算开销提升响应效率； - **安全防护措施**：部署SSL证书保障传输过程中的信息安全，同时做好输入验证防止SQL注入攻击等风险发生[^4]。 #### 4. 用户界面规划 首页布局应当简洁明快，突出显示最新发布的宠物照片墙作为视觉焦点引导访客深入探索其他板块内容。每个相册条目下方附带点赞按钮及简短描述文字链接至详情页查看更大尺寸图像及相关信息。注册登录模块需支持第三方社交账号快捷接入方式简化操作流程增强便利度。 #### 5. 功能特性添加 除了基本的信息发布检索之外，增加一些特色玩法有助于激发用户的参与热情： - 开通打赏通道鼓励原创作者持续产出高质量作品形成良性循环生态体系； - 定期举办主题摄影比赛评选优秀参赛者给予实物奖励扩大品牌影响力范围[^1]。 ```javascript // 示例代码片段：使用JavaScript实现简单的图片轮播特效 function carousel() { const images = document.querySelectorAll('.carousel img'); let currentIndex = 0; setInterval(() => { images[currentIndex].classList.remove('active'); currentIndex = (currentIndex + 1) % images.length; images[currentIndex].classList.add('active'); }, 3000); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值