微信小程序撸图片小试手
发布时间：2017-03-28, 17:25:55 分类：HTML | 编辑 off 网址 | 辅助
图集1/1
正文 10187字数 461,313阅读
Github项目地址https://github.com/dubaiyouyue/xcx
//2017.03.29
更新：
1.图片保存到本地
2.图片长按操作
3.打开远程图片
4.图片预加载
5.代码优化
index.js
//index.js
Page({
data: {
url: "",
title: "正在加载...",
imgcss:'',
modalHidden: true
},
onLoad: function(options) {
// Do some initialize when page load.
this.setData({
title:'正在加载...'
})
var that = this;
wx.request({
url: 'https://lizhenqiu.com/xcxrequest.php',
header: {
'content-type': 'application/json'
},
success: function(res) {
//console.log(123)
that.setData(res.data)
/*this.setData({
title:'正在加载...'
})*/
}
})
},
onReady: function() {
// Do something when page ready.
//getApp().getUserInfo
//console.log(getApp().globalData)
//this.setData(getApp().globalData)
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
this.setData({
title:'正在加载...'
})
var that = this;
wx.request({
url: 'https://lizhenqiu.com/xcxrequest.php', //仅为示例，并非真实的接口地址
header: {
'content-type': 'application/json'
},
success: function(res) {
//console.log(123)
that.setData(res.data)
/*that.setData({
title:'正在加载...'
})*/
}
})
wx.stopPullDownRefresh()
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
/*this.setData({
src:'https://lizhenqiu.com/xcxrequest.php?dimg='+this.data.src
})*/
return {
title: 'lizhenqiu.com',
path: '/page/index/index'
}
},
// Event handler.
/*viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}*/
imgload:function(){
this.setData({
title:'下拉刷新',
imgcss:'1'
})
},
imgerror:function(){
this.setData({
title:'加载失败！'
})
/*this.setData({
title:'正在加载...'
})*/
var that = this;
wx.request({
url: 'https://lizhenqiu.com/xcxrequest.php', //仅为示例，并非真实的接口地址
header: {
'content-type': 'application/json'
},
success: function(res) {
//console.log(123)
that.setData(res.data)
that.setData({
title:'正在加载...'
})
}
})
},
// 长按
onlongclick: function() {
//this.setData( { modalHidden: false });
wx.previewImage({
current: this.data.src, // 当前显示图片的http链接
urls: [this.data.src] // 需要预览的图片http链接列表
})
},
// 保存
onSaveClick: function( event ) {
var mUrl = "";
var that=this;
if( event.currentTarget.dataset.url != null )
mUrl = event.currentTarget.dataset.url;
//console.log( "download：" + mUrl );
//saveImage( mUrl );
that.setData( {
modalHidden: true
});
if(!mUrl){
wx.showToast({
title: '保存失败！',
mask:"true",
image:"/screenshots/fail.png",
duration: 2000
})
return false;
}
wx.showToast({
title: '正在保存...',
mask:"true",
icon:"loading",
duration: 200000
})
wx.downloadFile( {
url: mUrl,
type: 'image',
success: function( res ) {
/*console.log( "download success" );
that.setData( {
hidden: true,
toastHidden: false,
toastText: "恭喜你，图片保存成功"
});*/
var tempFilePaths = res.tempFilePath
//console.log( res );
wx.saveFile({
tempFilePath: tempFilePaths,
success: function(resss) {
//var savedFilePath = resss.savedFilePath
//console.log( savedFilePath )
wx.showToast({
title: '保存成功',
mask:"true",
image:"/screenshots/Success.png",
duration: 2000
})
}
})
},
fail: function( res ) {
/*console.log( "download fail" );
that.setData( {
hidden: true,
toastHidden: false,
toastText: "保存失败，请稍后再试"
});*/
wx.showToast({
title: '保存失败！',
mask:"true",
image:"/screenshots/fail.png",
duration: 2000
})
},
complete:function(res){
//console.log( "download complete" );
}
})
},
// 取消
onCancelClick: function( event ) {
this.setData( { modalHidden: true });
}
})Run code
Cut to clipboard
index.wxml
<!--index.wxml-->
<view class="title">
<icon type="waiting" size="30" class="icmm nnnssf{{imgcss}}" />
<icon type="waiting_circle" size="20" class="icmm nnnssf{{imgcss}}" />
<text class="titlesize">{{title}}</text>
<icon type="success" size="20" class="icmm nnnss{{imgcss}}" />
<icon type="download" size="30" class="icmm nnnss{{imgcss}}" />
<view style="text-align: center;" bindlongtap = "onlongclick">
<image mode="widthFix" style="width:100%;" class="nnnss{{imgcss}}" src="{{src}}" bindload="imgload" binderror="imgerror"></image>
</view>
<modal title="是否保存图片？" confirm-text="保存" cancel-text="取消" data-url="https://lizhenqiu.com/xcxrequest.php?dimg={{src}}"
hidden="{{modalHidden}}" bindconfirm="onSaveClick" bindcancel="onCancelClick">
</modal>
<view class="tttip nnnss{{imgcss}}"><image src="/screenshots/tip.png" style="width:16px;height:16px;vertical-align:bottom;"></image>长按操作图片</view>
</view>Run code
Cut to clipboard
index.wxss
/**index.wxss**/
.title{
text-align: center;
margin: 12px;
}
.titlesize{
font-size:12px;
color:green;
}
.nnnss,.nnnssf1{
display: none;
}
.icmm{
vertical-align:middle;
}
.tttip{
text-align:right;
color:#999;
font-size:12px;
margin-top:6px;
}Run code
Cut to clipboard
源代码下载
//end 更新
旧版本：
index.js
//index.js
Page({
data: {
title: "正在加载..."
},
onLoad: function(options) {
// Do some initialize when page load.
this.setData({
title:'正在加载...'
})
var that = this;
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
//console.log(123)
that.setData(res.data)
/*this.setData({
title:'正在加载...'
})*/
}
})
},
onReady: function() {
// Do something when page ready.
//getApp().getUserInfo
//console.log(getApp().globalData)
//this.setData(getApp().globalData)
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
this.setData({
title:'正在加载...'
})
var that = this;
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
header: {
'content-type': 'application/json'
},
success: function(res) {
//console.log(123)
that.setData(res.data)
/*that.setData({
title:'正在加载...'
})*/
}
})
wx.stopPullDownRefresh()
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
return {
title: 'lizhenqiu.com',
path: '/page/index/index'
}
},
// Event handler.
/*viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}*/
imgload:function(){
this.setData({
title:'下拉刷新',
imgcss:'1'
})
},
imgerror:function(){
this.setData({
title:'加载失败！'
})
}
})Run code
Cut to clipboard
index.wxml
<!--index.wxml-->
<view class="title">
<text class="titlesize">{{title}}</text>
<icon type="info" size="6" />
<icon type="download" size="6" />
</view>
<view style="text-align: center;"><image mode="widthFix" class="nnnss{{imgcss}}" src="{{src}}" bindload="imgload" binderror="imgerror"></image></view>Run code
Cut to clipboard
微信小程序开发文档
在微信小程序里实现图片预加载组件
小程序运行效果
Github微信小程序示例 - 小相册
微信小程序《美女图集》Demo下载（调用远程API获取图片，本地保存图片）html51.com-MeinvPic.zip
（支付宝）给作者钱财以资鼓励 （微信）→
标签: 微信小程序1
有过 3 条评论 »
<?php $arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); echo json_encode($arr); ?><?php header('content-type: image/png'); echo file_get_contents($imgurl); ?><span style="font-size:24px;"><!--index.wxml--> <view class="btn-area"> <navigator url="../navigator/navigator?title=我是navigate" >跳转到新页面</navigator> <navigator url="../redirect/redirect?title=我是redirect" redirect>在当前页打开</navigator> </view></span>在navigatort.wxml中通过js代码可以获取到title,代码如下
//navigatort.js
Page({ onLoad: function(options) { this.setData({ title: options.title }) } })