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，一经查实，立即删除！

相关文章

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

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

秋天到了，新一轮的猫咪换毛季又来了。尽管每天下班很累，但也不得不花上不少时间清理。有时候想偷懒，但身体是第一个反对的。要知道，长期堆积的猫毛除了会破坏家中的干净整洁外，浮毛还会随呼吸进入我们体内，…
阅读更多...
bluez hid host介绍，连接键盘/鼠标/手柄不是梦，安排

bluez hid host介绍，连接键盘/鼠标/手柄不是梦，安排

零. 前言 由于Bluez的介绍文档有限，以及对Linux 系统/驱动概念、D-Bus 通信和蓝牙协议都有要求，加上网络上其实没有一个完整的介绍Bluez系列的文档，所以不管是蓝牙初学者还是蓝牙从业人员，都有不小的难度，学习曲线也相对较陡，所以我有了这个想法，专门对Bluez做一个系统…
阅读更多...
18 Docker容器集群网络架构：一、etcd 概述

18 Docker容器集群网络架构：一、etcd 概述

文章目录 Docker容器集群网络架构：一、etcd概述1.1 etcd 的基本概念和特点1.1.1 定义1.1.2 特点1.2 etcd 在 Docker 集群网络中的作用1.3 etcd 集群的架构和原理1.3.1 架构1.3.2 原理Docker容器集群网络架构：一、etcd概述 etcd是一个高可用的分布式键值存储系统，它主要用于…
阅读更多...
自定义 Jackson 序列化、反序列化，支持 Java 8 日期新特性

自定义 Jackson 序列化、反序列化，支持 Java 8 日期新特性

自定义 Jackson 序列化、反序列化，支持 Java 8 日期新特性 ava 8 中，引入了新的时间和日期 API，相比较老旧的 Date , 它使用起来更加便捷，用过的都懂。自定义 Spring Boot 内置的 JSON 框架 Jackson，让出入参支持序列…
阅读更多...
工程项目智能化管理平台，SpringBoot框架智慧工地源码，实现工程建设施工可视化、智能化的全过程闭环管理。

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

智慧工地管理系统的建设以“1个可扩展性平台2个应用端3方数据融合N个智能设备”为原则。以“智、保、安、全”为导向，与工程建设管理信息系统、综合安防平台深度集成，构建统一的标准化工地平台，实现现场人员、车辆、项目、安全、进度等方面的…
阅读更多...
Django ORM 数据库管理 提高查询、更新性能的技巧和编程习惯：

Django ORM 数据库管理 提高查询、更新性能的技巧和编程习惯：

在Django中使用ORM进行数据库管理时，以下是一些提高数据查询、更新和插入效率的技巧和编程习惯： 1. 索引优化 - 效果最显而易见 为常用的查询字段（如外键、唯一字段等）添加数据库索引，可以显著提高查询速度。 class…
阅读更多...
springboot 自定义错误页面

springboot 自定义错误页面

自定义错误页面 背景：当我们访问应用程序不存在的接口路径或者参数传递不规范时，springboot 默认提示 如下页面 该页面对用户不友好，我们可以自定义展示错误页来改善。 优化后的简洁效果，可对 html 页面进一步美化，…
阅读更多...
深入浅出ES6 Promise

深入浅出ES6 Promise

写在前面 在现代前端开发中，异步编程是不可或缺的一部分。随着JavaScript应用变得越来越复杂，需要一种更好的方式来处理异步操作和回调。ECMAScript 6（ES6）引入了Promises，它提供了一种强大的方法来处理异步操作。本文…
阅读更多...
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…
阅读更多...
BERT，RoBERTa，Ernie的理解

BERT，RoBERTa，Ernie的理解

BERT&#xff1a; 全称&#xff1a;Bidirectional Encoder Representations from Transformers。可以理解为 “基于 Transformer 的双向编码器表示”。含义&#xff1a;是一种用于语言表征的预训练模型。它改变了以往传统单向语言模型预训练的方式&#xff0c;能够联合左侧和右…
阅读更多...
放大器的保护机制

放大器的保护机制

在工作中&#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…
阅读更多...
AES_ECB算法C++与Java相互加解密Demo

AES_ECB算法C++与Java相互加解密Demo

一、AES算法 AES是一种对称加密算法&#xff0c;算法秘钥长度可为128位(16字节)、192位(24字节)、256位(32字节)。加密模式分为ECB、CBC、CTR等&#xff0c;其中ECB模式最简单够用。现给出ECB模式下C和Java的实现&#xff0c;并且可以相互加解密验证。 二、AES_ECB实现DEMO …
阅读更多...
webRTC搭建：STUN 和 TURN 服务器 链接google的有点慢，是不是可以自己搭建

webRTC搭建：STUN 和 TURN 服务器 链接google的有点慢，是不是可以自己搭建

如果使用 Google 提供的 STUN/TURN 服务器速度较慢&#xff0c;你完全可以自己搭建 STUN 和 TURN 服务器。这有助于提升网络连接速度和稳定性&#xff0c;特别是在需要穿透 NAT 或防火墙的网络环境下。 下面是如何自己搭建 STUN 和 TURN 服务器的具体步骤&#xff1a; 1. 选择…
阅读更多...
nrm的使用

nrm的使用

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

Copyright @ 2022~2023