微信小程序保存图片功能实现
小程序保存图片功能实现
wxml:
<view class="previewImage" style="display:{{previewImage}}" bindtap="closePrev">
<image src="{{img.url}}" mode="aspectFit" style="width:100%;height:100%;" catchlongtap="saveImg"></image>
</view>
<action-sheet hidden="{{saveImage}}" bindchange="actionSheetChange">
<block>
<action-sheet-item class="item" bindtap="downloadFile" data-image-href="{{img.url}}">保存图片</action-sheet-item>
</block>
<action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
wxss:
.previewImage{
position: absolute;
top:;
left:;
width: 100%;
height: 100%;
background-color: #000;
}
js:
previewImg:function(){
this.setData({
previewImage:"block"
});
},
saveImg:function(){
longTouch = true;
this.setData({
saveImage:false
})
},
closePrev:function(){
if(longTouch){
longTouch = false;
}else{
this.setData({
previewImage:"none"
});
}
},
actionSheetChange:function(){
this.setData({
saveImage:!this.data.saveImage
})
},
downloadFile:function(e){
var imgUrl = e.currentTarget.dataset.imageHref;
var that = this;
wx.downloadFile({
url: imgUrl,
type: 'image',
success:function(res){
var tempFilePath = res.tempFilePath;
console.log(tempFilePath);
wx.saveFile({
tempFilePath:tempFilePath,
success:function(res){
var savedFilePath = res.savedFilePath;
console.log(savedFilePath);
that.setData({
saveImage:true
});
},
fail:function(res){
console.log(res);
}
});
},
fail:function(res){
console.log(res);
}
});
}
微信小程序保存图片功能实现的更多相关文章
- [转] 扩展微信小程序框架功能
通过第三方 JavaScript 库,扩展微信小程序框架功能. 扩展微信小程序框架功能(1)——Promise ES6 对 Promise 有了原生的支持,但微信开发者工具更新版本(0.11.1122 ...
- 微信小程序的功能开发工具跟公众号的差别,小程序是一种减负思维对简单APP是巨大打击
微信小程序的功能开发工具跟公众号的差别,小程序是一种减负思维对简单APP是巨大打击 摘要: 小程序和公众号最大的区别有如下四点:1.小程序没有粉丝,开发者在后台能看到的只能是累计用户访问数以及实时统计 ...
- 微信小程序支付功能 C# .NET开发
微信小程序支付功能的开发的时候坑比较多,不过对于钱的事谨慎也是好事.网上关于小程序支付的实例很多,但是大多多少有些问题,C#开发的更少.此篇文档的目的是讲开发过程中遇到的问题做一个备注,也方便其他开发 ...
- 微信小程序 - 定位功能
(1) 查看微信小程序文档 大家可以从我截图中可以看到,API中的返回值有纬度和经度,所以我们接下来就是要用到纬度和经度逆地址解析出地址的一些信息. (2)注册腾讯地图开放平台 注册完之后选择WebS ...
- 微信小程序 保存图片
微信小程序 保存图片 注: 此处使用的是小程序 wepy框架, 原生或其他的请注意转换写法 <div class="handle"> <button class= ...
- 微信小程序--分享功能
微信小程序--分享功能 微信小程序前段时间开放了小程序右上角的分享功能, 可以分享任意一个页面到好友或者群聊, 但是不能分享到朋友圈 这里有微信开发文档链接:点击跳转到微信分享功能API 入口方法: ...
- 支付宝小程序与微信小程序开发功能和语法糖不同
最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: a ...
- 全栈项目|小书架|微信小程序-点赞功能实现
微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相 ...
- 微信小程序支付功能前端流程
只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app). handleCreate () { /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 ...
随机推荐
- 洛谷P1801 黑匣子
题目传送门 分析:这题和另外一个题目中位数非常相似,有兴趣可以先看看,比这一题简单.首先暴力模拟还是别想了,估计30%的数据都有点悬.正解应该是用二叉堆.但是如果用一个堆当然不方便,所以建两个堆,一个 ...
- HDU5742 It's All In The Mind 数学思维题
Problem Description Professor Zhang has a number sequence a1,a2,...,an. However, the sequence is not ...
- 查询续与ajax
查询分组 事例:统计不止一个作者的图书:(作者数量大于一) Book.objects.all().values('name').annotate(author_num=Count('authors__ ...
- Problem G: 零起点学算法106——首字母变大写
#include<stdio.h> #include<string.h> int main(void) { ]; int i,k; while(gets(a)!=NULL) { ...
- Generator函数(三)
Generator.prototype.return() 1.Generator函数返回的遍历器对象还有一个return方法,可以返回给定的值,并终结Generator函数的遍历. function* ...
- Java高级架构师(一)第34节:Nginx的Http模块部分的指令
默认长链接的数目在100个 默认长链接的超时时间,一般在75S.
- [转] FileSystemXmlApplicationContext、ClassPathXmlApplicationContext和XmlWebApplicationContext简介
今天在用Spring时遇到一个问题,提示找不到applicationContext.xml文件.原来是在加载这个文件时调用的方法不太合适,所以造成了程序找不到项目下的xml配置文件. 我们常用的加载c ...
- Linux 下的图形库介绍
在进行Linux下的图形系统编程时,我们常常会遇到以下这些概念: Framebuffer, X11, SDL,DFB, miniGUI, OpenGL,QT, GTK,KDE, GNOME等等. 一. ...
- mongo 误操作恢复数据
场景:我往同一个集合里面插入 三条数据 aa:aa bb:bb cc:cc .后来我后悔了,不想插入 bb:bb,通过oplog重放过滤好 bb:bb这条数据. 原理: 1.通过 oplog.r ...
- 各种软核处理器二进制文件FPGA初始化文件生成程序
不管是MIPS, Nios II, MicroBlaze, MSP430, 8051, OpenRISC, OpenSPARC, LEON2/LEON3等等软核处理器,在FPGA上实现的时候我们通常需 ...