【uniapp踩坑记】——微信小程序转发保存图片

关于微信小程序转发&保存图片

  • 微信小程序图片转发保存简单说明
  • 网络图片的转发保存
  • base64流形式图片转发保存

已经好多年没写博客了,最近使用在用uniapp开发一个移动版管理后台,记录下自己踩过的一些坑
吃相别太难看,搞一堆下头僵尸号来点赞收藏我的东西,我情愿它就这样放着吃灰

微信小程序图片转发保存简单说明

微信小程序图片转发保存,依赖小程序的转发api—— wx.showShareImageMenu(Object object)
通过调用这个api能触发如下弹窗

在这里插入图片描述

代码如下:

wx.showShareImageMenu({path: filePath,//图片地址必须为本地路径或者临时路径success: (re) => {console.log({ success: re })},fail: (re) => {console.log({ fail: re })}})

这个api要求要分享的图片地址必须为本地路径或者临时路径,所以如果你的图片是本地路径或者临时路径,那就不需要继续往下看了。
如果不是本地路径或者临时路径,那我们要解决的问题就是怎么把图片转为临时路径,这里常见有两种图片形式:

网络图片:https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg

base64流形式图片:data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAPoA+gDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVF

网络图片的转发保存

网络图片的转发,依赖于小程序的下载api——wx.downloadFile(Object object)
通过调用这个api,可以将网络图片下载到临时文件夹中,然后再调用转发api,代码如下:

	wx.downloadFile({url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',success: (res) => {console.log({success:res})wx.showShareImageMenu({path: res.tempFilePath,success:(re)=>{console.log({success1:re})},fail:(re)=>{console.log({fail1:re})}})},fail:(res)=>{console.log({fail:res})}})

注意事项

这里要求下载域名必须在小程序开发配置白名单中
在这里插入图片描述

base64流形式图片转发保存

流形式图片这里需要用到小程序api——FileSystemManager.writeFile(Object object)
这里就是通过文件api,将流图片写入临时路径,再调用转发api,代码如下

		// 临时文件路径,可以自定义文件名和格式const filePath = wx.env.USER_DATA_PATH + '/temp-image.jpg'; //需要将流图片中的data:image/png;base64,去掉const data=url.replace("data:image/png;base64,","")uni.getFileSystemManager().writeFile({filePath: filePath,data: data,encoding: 'base64',success: () => {console.log('临时文件路径:', filePath);wx.showShareImageMenu({path: filePath,success: (re) => {console.log({ success1: re })},fail: (re) => {console.log({ fail1: re })}})// 在这里可以进行后续操作,比如展示图片等},fail: (error) => {console.error('写入临时文件失败', error);}});

注意事项
1.wx.env.USER_DATA_PATH:这个为小程序的环境变量,与机型无关,无需配置,直接使用即可
2.这个功能在开发工具调试能正常显示、在体验版小程序也能正常显示,在开发版小程序(即真机调试)中会报错,提示:showShareImageMenu:fail Cannot read property ‘initScl’ of undefined

这个情况告诉我们,不要过度依赖真机调试

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

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

相关文章

Spring Cloud学习笔记:Eureka集群搭建样例

这是本人学习的总结,主要学习资料如下 - 马士兵教育 1、项目架构2、Dependency3、项目启动类4、application.yml5、启动项目 1、项目架构 因为这是单机模拟集群搭建,为了方便管理就都放在了一个项目中。这次准备搭建三个项目server1, server2, server3 …

Linux网络基础 (二) ——(IP、MAC、端口号、TCPUDP协议、网络字节序)

文章目录 IP 地址基本概念源IP地址 & 目的IP地址 MAC 地址基本概念源MAC地址 & 目的MAC地址 端口号基本概念源端口号 & 目的端口号 TCP & UDP 协议基本概念TCP 与 UDP 的抉择 网络字节序大端、小端字节序 🎖 博主的CSDN主页:Ryan.Alask…

攻防世界---Web_php_include

1.题目链接 2.补充知识&#xff1a; 3.构造&#xff1a;执行成功 /?pagedata://text/plain,<?php phpinfo()?> 4.构造下面url&#xff0c;得到目录路径 /?pagedata://text/plain,<?php echo $_SERVER[DOCUMENT_ROOT]?> 5构造下面url&#xff0c;读取该路径的…

Linux的学习之路:10、进程(2)

摘要 本章主要是说一下fork的一些用法、进程状态、优先级和环境变量。 目录 摘要 一、fork 1、fork的基本用法 2、分流 二、进程状态 三、优先级 四、环境变量 1、常见环境变量 2、和环境变量相关的命令 3、通过代码如何获取环境变量 五、导图 一、fork 1、fork…

微信小程序实现预约生成二维码

业务需求&#xff1a;点击预约按钮即可生成二维码凭码入校参观~ 一.创建页面 如下是博主自己写的wxml&#xff1a; <swiper indicator-dots indicator-color"white" indicator-active-color"blue" autoplay interval"2000" circular > &…

Zookeeper和Kafka的部署

目录 一、Zookeeper的基本概念 1. Zookeeper定义 2. Zookeeper工作机制 3. Zookeeper特点 4. Zookeeper数据结构 5. Zookeeper应用场景 5.1 统一命名服务 5.2 统一配置管理 5.3 统一集群管理 5.4 服务器动态上下线 5.5 软负载均衡 6. Zookeeper 选举机制 6.1 第一…

Cortex-M3/M4处理器的bit-band(位带)技术

ARM Cortex-M3/M4的位带&#xff08;Bit-Band&#xff09;技术是一种内存映射技术&#xff0c;它允许对单个位进行直接操作&#xff0c;而不需要对整个字&#xff08;通常是32位&#xff09;进行操作。这项技术主要用于对特定的位进行高效的读写&#xff0c;特别是在需要对GPIO…

python-numpy(3)-线性代数

一、方程求解 参考资料 对于Ax b 这种方程&#xff1a; np.linalg.inv(A).dot(B)np.linalg.solve(A,b) 1.1 求解多元一次方程一个直观的例子 # AXB # X A^(-1)*B A np.array([[7, 3, 0, 1], [0, 1, 0, -1], [1, 0, 6, -3], [1, 1, -1, -1]]) B np.array([8, 6, -3, 1]…

Kafka 简单介绍

目录 一 消息队列&#xff08;MQ&#xff09; 1&#xff0c;为什么需要消息队列&#xff08;MQ 2&#xff0c;常见的 MQ 中间件 3&#xff0c;MQ 传统应用场景之异步处理 4&#xff0c;使用消息队列的好处 5&#xff0c;消息队列的两种模式 5.1点对点模式&#xf…

Hadoop+Spark大数据技术(微课版)曾国荪、曹洁版思维导图第四次作业 (第4章 HBase分布式DB)

1.简述Hbase的特点及与传统关系数据库的区别 HBase与传统关系数据库的区别 &#xff08;1&#xff09;数据类型 关系数据库具有丰富的数据类型&#xff0c;如字符串型、数值型、日期型、二进制型等。HBase只有字符串数据类型&#xff0c;数据的实际类型都是交由用户自己编写程序…

gitlab:Could not resolve host

fatal: unable to access http://xxx.git/: Could not resolve host: yyy Git-fatal: unable to access ‘https://gitlab.XX.git/‘: Could not resolve host: gitlab.XX.com.cn_drone unable to access .git/: could-CSDN博客 原因&#xff1a; 克隆的时候使用的是这里的HTT…

华为机考入门python3--(15)牛客15-求int型正整数在内存中存储时1的个数

分类&#xff1a;二进制 知识点&#xff1a; int转二进制 binary bin(n)[2:] 题目来自【牛客】 def count_ones_in_binary(n): # 将输入的整数转换为二进制字符串 # bin(n)为0b11011binary bin(n)[2:]# 初始化计数器为0 count 0 # 遍历二进制字符串的每一位 fo…