uniapp学习（008-2 图片模块和分享模块）

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

总时长 23:40:00 共116P

此文章包含第93p-第p103的内容

文章目录

  • 详情页图片问题
    • storage缓存
    • 图片网络消耗问题
    • 使用计算属性获取详细信息
  • 保存壁纸到本地相册
    • 编写代码
  • 分享好友和分享微信朋友圈
    • 分享好友onShareAppMessage
      • 按钮也可以触发分享
    • 分享微信朋友圈 onShareTimeline
    • 使用传参的分享页
    • 一些之前遗留的细节修改
      • 解决由于安全区域导致底部悬空问题
      • 如果页面缺少参数 可以写个公共的方法，跳回首页

详情页图片问题

storage缓存

在这里插入图片描述

根据id获取当前的索引值
在这里插入图片描述

在这里插入图片描述

滑动修改索引值 onchange事件
在这里插入图片描述

在这里插入图片描述

图片网络消耗问题

查看第一张图的时候 12张图片都加载了一遍
在这里插入图片描述

我们可以创建一个数组 用来存储已经看过的图片
在这里插入图片描述

在这里插入图片描述

把当前索引的值放进去
在这里插入图片描述
把滑动后的值放进去
在这里插入图片描述

在这里插入图片描述

判断这个值是否存在在数组中
在这里插入图片描述

把左右两边提前加载出来
在这里插入图片描述

在这里插入图片描述

滑动的时候也加上这个逻辑
在这里插入图片描述

让最后一张能跳到第一张上

在这里插入图片描述

封装成一个函数
在这里插入图片描述

数组去重（使用new Set）相当于将数组转为set对象，set对象中元素不允许重复，这样就去重了
在这里插入图片描述

在这里插入图片描述

使用计算属性获取详细信息

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

在这里插入图片描述
修改评分

在这里插入图片描述

保存壁纸到本地相册

在这里插入图片描述
不支持H5 这里我们点击事件单独处理H5
在这里插入图片描述

编写代码

在这里插入图片描述
定义H5的方法和小程序的方法
在这里插入图片描述

H5的写法
在这里插入图片描述

在这里插入图片描述

不支持网络图片地址，下面的代码无法满足要求
在这里插入图片描述
使用getImageInfo方法进行获取
在这里插入图片描述

在这里插入图片描述
设置白名单
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在downloadFile域名下配置这个图片网址
在这里插入图片描述

将其下载到腾讯的临时地址上
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

如果想弹出这个弹窗，需要提前配置服务内容声明
在这里插入图片描述

在这里插入图片描述
在这里点击更新协议
在这里插入图片描述
然后添加开发者处理的信息
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

如果不小心点击了拒绝，需要点击清理缓存 才可以继续
在这里插入图片描述
在这里插入图片描述
如果误点击拒绝
使用失败函数可以做个二次弹出
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

添加授权
在这里插入图片描述

使用openSetting
在这里插入图片描述

在这里插入图片描述

这里弹出的是你的所有之前勾选过的权限

在这里插入图片描述
开启后
在这里插入图片描述

在这里插入图片描述

这里需要对授权失败和取消保存做判断才可以使用
在这里插入图片描述

最好加上loading框，防止误操作
在这里插入图片描述

在complete(相当于finally)函数里进行隐藏
在这里插入图片描述

异步同步化出现的时候 记得把这段代码放在try{}catch{}中，然后通过catch进行操作 这里可以隐藏loading
使用throw 进行跳出try
在这里插入图片描述

在这里插入图片描述

如果有报错 可以在最外面加上v-if=“值是否存在”
在这里插入图片描述

currentInfo存在的时候在进行渲染
在这里插入图片描述

分享好友和分享微信朋友圈

在这里插入图片描述

在这里插入图片描述

分享好友onShareAppMessage

使用onShareAppMessage生命周期 实现点击右上角进行分享
在这里插入图片描述

这是个页面的生命周期 ，所以我们加在需要分享的页面上

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

按钮也可以触发分享

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
查看分享页跳转的地址就是上面的怕path的地址
在这里插入图片描述

分享微信朋友圈 onShareTimeline

在这里插入图片描述

这里我们需要到微信开发平台进行查询
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

图标可以使用网络图片或者本地图片
在这里插入图片描述
本地图片使用static文件夹下的 不要使用其他没有打包的文件夹

在这里插入图片描述

也可以使用传入值
在这里插入图片描述

使用传参的分享页

在这里插入图片描述

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

分享朋友圈的方式，使用query属性 前面不要加别的，直接写?后的参数
在这里插入图片描述

一些之前遗留的细节修改

解决由于安全区域导致底部悬空问题

在这里插入图片描述

给popup组件添加 :safe-area=“false” 这个属也可以解决这个问题

也可以修改组件（不建议）
找到uni-popup组件
在这里插入图片描述

注释这行
在这里插入图片描述

在这里插入图片描述

不推荐的原因是 因为从插件市场更新后 修改的地方会被重置
在这里插入图片描述

然后再popup组件里加一个安全区的view

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

如果页面缺少参数 可以写个公共的方法，跳回首页

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

在这里插入图片描述

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

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

相关文章

双十一宠物空气净化器决胜局，希喂、安德迈哪款性价比更高？

双十一宠物空气净化器决胜局，希喂、安德迈哪款性价比更高？

秋天到了，新一轮的猫咪换毛季又来了。尽管每天下班很累，但也不得不花上不少时间清理。有时候想偷懒，但身体是第一个反对的。要知道，长期堆积的猫毛除了会破坏家中的干净整洁外，浮毛还会随呼吸进入我们体内，…
阅读更多...
工程项目智能化管理平台，SpringBoot框架智慧工地源码，实现工程建设施工可视化、智能化的全过程闭环管理。

工程项目智能化管理平台，SpringBoot框架智慧工地源码，实现工程建设施工可视化、智能化的全过程闭环管理。

智慧工地管理系统的建设以“1个可扩展性平台2个应用端3方数据融合N个智能设备”为原则。以“智、保、安、全”为导向，与工程建设管理信息系统、综合安防平台深度集成，构建统一的标准化工地平台，实现现场人员、车辆、项目、安全、进度等方面的…
阅读更多...
springboot 自定义错误页面

springboot 自定义错误页面

自定义错误页面 背景：当我们访问应用程序不存在的接口路径或者参数传递不规范时，springboot 默认提示 如下页面 该页面对用户不友好，我们可以自定义展示错误页来改善。 优化后的简洁效果，可对 html 页面进一步美化，…
阅读更多...
SpringBoot 集成RabbitMQ 实现钉钉日报定时发送功能

SpringBoot 集成RabbitMQ 实现钉钉日报定时发送功能

文章目录 一、RabbitMq 下载安装二、开发步骤：1.MAVEN 配置2. RabbitMqConfig 配置3. RabbitMqUtil 工具类4. DailyDelaySendConsumer 消费者监听5. 测试延迟发送 一、RabbitMq 下载安装 官网：https://www.rabbitmq.com/docs 二、开发步骤：…
阅读更多...
低代码统一待办：提升任务管理效率的新模式

低代码统一待办：提升任务管理效率的新模式

低代码平台的魔力 低代码平台通过图形化用户界面和简化开发流程，让用户无需具备深厚的编程知识也能快速构建应用程序。这种技术不仅加速了应用开发速度，还大幅降低了开发成本和复杂度，适合各种规模的企业。 构建统一待办系统的优势 集中化管…
阅读更多...
itertools模块的combinations很牛

itertools模块的combinations很牛

在 Python 中，combinations 是 itertools 模块提供的一个非常有用的函数，用于生成给定序列的所有可能的组合（不考虑顺序）。combinations 函数可以生成从长度为 r 的所有子集，其中 r 是一个指定的正整数，表示…
阅读更多...
React中管理state的方式

React中管理state的方式

使用useState 使用useReducer 既然已经有了useState，为什么还需要useReducer呢？ 那么useReducer是如何将解决这些问题的呢？ reducer是如何更新state的呢？ reducer的工作方式非常类似JavaScript中的reduce方法，随着时…
阅读更多...
CSS网页布局综合练习（涵盖大多CSS知识点）

CSS网页布局综合练习（涵盖大多CSS知识点）

该综合练习就是为这个学校静态网页设置CSS样式&#xff0c;使其变成下面的模样 其基本骨架代码为&#xff1a; <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta name"viewport" content…
阅读更多...
放大器的保护机制

放大器的保护机制

在工作中&#xff0c;使用功率放大器或高压放大器这类精密仪器时&#xff0c;为了保护设备不受伤害&#xff0c;确保设备的稳定性和安全性&#xff0c;在设备上需要设置保护机制。保护机制起着至关重要的作用&#xff0c;可以防止设备因过流、过压、过热等因素而受损。放大器的…
阅读更多...
JavaSE笔记4】API、包、String类、Object类

JavaSE笔记4】API、包、String类、Object类

目录 一、API 二、包 2.导入不同包下的同名程序 三、String 1. String类是什么&#xff1f; 2. 如何创建String对象?(常用的四种方法&#xff09; 3. String API a. 遍历字符串 b. 判断字符串内容是否相等&#xff1a; c. 截取子串 d. 替换部分内容 e. 匹配子串 f. 匹配开头字…
阅读更多...
「C/C++」C/C++ 之 判断语句

「C/C++」C/C++ 之 判断语句

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…
阅读更多...
nrm的使用

nrm的使用

在安装nrm之前&#xff0c;要先完成node.js的安装。 1、nrm的介绍 ‌nrm&#xff08;npm registry manager&#xff09;是一个npm源管理器&#xff0c;允许用户在不同npm源之间快速切换。 关于npm和nvm的介绍&#xff0c;详见文章nvm的使用-CSDN博客。 解释&#xff1a;比如…
阅读更多...
芯片上音频相关的验证

芯片上音频相关的验证

通常芯片设计公司&#xff08;比如QUALCOMM&#xff09;把芯片设计好后交由芯片制造商&#xff08;比如台积电&#xff09;去生产&#xff0c;俗称流片。芯片设计公司由ASIC部门负责设计芯片。ASIC设计的芯片只有经过充分的验证&#xff08;这里说的验证是FPGA&#xff08;现场…
阅读更多...
【论文分享】通过太阳轨迹和街景图像测量不同街道网络方向的太阳辐射及其时空分布

【论文分享】通过太阳轨迹和街景图像测量不同街道网络方向的太阳辐射及其时空分布

本次我们给大家带来一篇SCI论文的全文翻译。该论文利用街景数据和太阳轨迹模拟技术&#xff0c;揭示了不同方向街道上的太阳辐射在时空上的差异&#xff0c;为城市的可持续发展提供了更有针对性的策略。 【论文题目】 Measuring solar radiation and spatio-temporal distrib…
阅读更多...
基于springboot+vue实现的公考知识学习平台 （源码+L文+ppt）4-103

基于springboot+vue实现的公考知识学习平台 （源码+L文+ppt）4-103

4.1 系统功能结构设计 根据对公考知识学习平台的具体需求分析&#xff0c;把系统可以划分为几个不同的功能模块&#xff1a;管理员可以对系统首页、个人中心、用户管理、讲师管理、在线咨询管理、学习资料管理、讲座信息管理、讲座预约管理、学习论坛、练习自测管理、试题管理…
阅读更多...
LabVIEW程序员的真实工作状态是怎样的？

LabVIEW程序员的真实工作状态是怎样的？

LabVIEW程序员的工作状态通常涉及以下几个方面&#xff1a; 1. 项目开发与设计 需求分析&#xff1a;与客户或团队成员沟通&#xff0c;明确项目需求&#xff0c;制定开发计划。 系统设计&#xff1a;根据需求进行系统架构设计&#xff0c;包括硬件选型和软件模块划分。 2.…
阅读更多...
搜索引擎算法更新对网站优化的影响与应对策略

搜索引擎算法更新对网站优化的影响与应对策略

内容概要 随着互联网的不断发展&#xff0c;搜索引擎算法也在不断地进行更新和优化。了解这些算法更新的背景与意义&#xff0c;对于网站管理者和优化人员而言&#xff0c;具有重要的指导意义。不仅因为算法更新可能影响到网站的排名&#xff0c;还因为这些变化也可能为网站带…
阅读更多...
安装中文版 Matlab R2022a

安装中文版 Matlab R2022a

下载安装包 压缩包有点大&#xff0c;大概20G 百度网盘&#xff1a;下载链接 提取码&#xff1a;rmja 安装 解压后打开目录&#xff0c;右键以管理员身份运行 setup.exe 选择输入安装秘钥 输入秘钥&#xff1a; 50874-33247-14209-37962-45495-25133-28159-33348-18070-6088…
阅读更多...
互联网大厂最全Java面试题及答案整理（2024最新版）

互联网大厂最全Java面试题及答案整理（2024最新版）

很多 Java 工程师的技术不错&#xff0c;但是一面试就头疼&#xff0c;10 次面试 9 次都是被刷&#xff0c;过的那次还是去了家不知名的小公司。 问题就在于&#xff1a;面试有技巧&#xff0c;而你不会把自己的能力表达给面试官。 应届生&#xff1a;你该如何准备简历&#…
阅读更多...
[Nginx]快速入门

[Nginx]快速入门

Nginx概述 介绍 Nginx是一款轻量级的web 服务器/ 反向代理服务器/ 电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少&#xff0c;并发能力强&#xff0c;事实上nginx的并发能力在同类型的网页服务器中表现较好 中国大陆使用nginx的网站有:百度、京东、新浪、网易、腾讯、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023