本程序中，利用微信的远程API接口调用，完成了图片的获取，并用按钮动态加载图片。在图片显示页面，用wx.downloadFile接口调用，实现了本地图片的保存功能。比较完整得实现了一个图片浏览的微信小程序。我们先看一下这个小程序的运行效果：
可以看到我们可以浏览很多美女图片，
而且一页看完后，还可以通过点击【点击加载更多】按钮，动态加载更多的图片；
此外，可以可以支持点击单个图片，单独查看一张完整的图片；
并支持按住图片后，保存到本地的功能。
下面就这个项目的代码做些解析：下面是index页面的JS代码：
//index.js
//获取应用实例
var app = getApp()
Page( {
data: {
items: [],
hidden: false,
loading: false,
loadmorehidden:true,
plain: false
},
onItemClick: function( event ) {
var targetUrl = "/pages/image/image";
if( event.currentTarget.dataset.url != null )
targetUrl = targetUrl + "?url=" + event.currentTarget.dataset.url;
wx.navigateTo( {
url: targetUrl
});
},
loadMore: function( event ) {
var that = this
requestData( that, mCurrentPage + 1 );
},
onLoad: function() {
console.log( 'onLoad' )
var that = this
requestData( that, mCurrentPage + 1 );
}
})
/**
* 定义几个数组用来存取item中的数据
*/
var mUrl = [];
var mDesc = [];
var mWho = [];
var mTimes = [];
var mTitles = [];
var mCurrentPage = 0;
// 引入utils包下的js文件
var Constant = require('../../utils/constant.js');
/**
* 请求数据
* @param that Page的对象，用来setData更新数据
* @param targetPage 请求的目标页码
*/
function requestData( that, targetPage ) {
wx.request( {
url: Constant.GET_MEIZHI_URL+targetPage,
header: {
"Content-Type": "application/json"
},
success: function( res ) {
if( res == null ||
res.data == null ||
res.data.results == null ||
res.data.results.length <= 0 ) {
console.error( "god bless you..." );
return;
}
var i = 0;
for( ;i < res.data.results.length;i++ )
bindData( res.data.results[ i ] );
//将获得的各种数据写入itemList，用于setData
var itemList = [];
for( var i = 0;i < mUrl.length;i++ )
itemList.push( { url: mUrl[ i ], desc: mDesc[ i ], who: mWho[ i ], time: mTimes[ i ], title: mTitles[ i ] });
that.setData( {
items: itemList,
hidden: true,
loadmorehidden:false,
});
mCurrentPage = targetPage;
}
});
}
/**
* 绑定接口中返回的数据
* @param itemData Gank.io返回的content;
*/
function bindData( itemData ) {
var url = itemData.url.replace( "//ww", "//ws" );
var desc = itemData.desc;
var who = itemData.who;
var times = itemData.publishedAt.split( "T" )[ 0 ];
mUrl.push( url );
mDesc.push( desc );
mWho.push( who );
mTimes.push( times );
mTitles.push( "更多请关注51小程序：html51.com" + " " + times );
}
这里在点击的时候，把点击的图片的url传递image页面，注册了点击更多时，动态加载图片的事件；
函数requestData通过API接口调用，完成远程请求，把图片加载到本地，并通过bindData绑定接口中返回的数据。
下面是index页面的WXML代码：
<!--index.wxml-->
<view>
<loading hidden="{{hidden}}" >
加载中...
</loading>
<view class= "card" wx:for = "{{items}}">
<view data-url="{{item.url}}" bindtap = "onItemClick">
<image class= "image" mode="aspectFill" src="{{item.url}}"/>
<view class="title">{{item.title}}</view>
</view>
</view>
<button hidden="{{loadmorehidden}}" type="primary" class="loadmore" size="default" loading="{{loading}}" plain="{{plain}}" bindtap="loadMore">
点击加载更多
</button>
</view>
下面是index页面的WXSS代码：
/**index.wxss**/
.card {
border: 2px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 5px 1px #cccccc;
margin: 8px;
position: relative;
}
.loadmore {
border: 0px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 5px 1px #cccccc;
margin: 8px;
}
.image{
width:100%;
height:240px;
}
.title {
padding: 14px;
font-size: 14px;
}
下面是另外一个单独显示图片的image页面的JS代码：
Page( {
data: {
url: "",
hidden: false,
toastHidden: true,
modalHidden: true,
toastText: "数据异常",
loadingText: "加载中..."
},
onLoad: function( options ) {
that = this;
if( options == null || options.url == null ) {
this.setData( { hidden: true, toastHidden: false });
return;
}
this.setData( {
hidden: true,
toastHidden: true,
url: options.url
})
},
//Toast信息改变
onToastChanged: function( event ) {
this.setData( { toastHidden: true });
},
// 长按
onlongclick: function() {
this.setData( { modalHidden: false });
},
// 保存
onSaveClick: function( event ) {
var mUrl = "";
if( event.currentTarget.dataset.url != null )
mUrl = event.currentTarget.dataset.url;
console.log( "download：" + mUrl );
saveImage( mUrl );
},
// 取消
onCancelClick: function( event ) {
this.setData( { modalHidden: true });
},
});
var that;
/**
* 保存图片
*/
function saveImage( mUrl ) {
that.setData( {
hidden: false,
toastHidden: true,
modalHidden: true,
loadingText: "下载中..."
});
wx.downloadFile( {
url: mUrl,
type: 'image',
success: function( res ) {
console.log( "download success" );
that.setData( {
hidden: true,
toastHidden: false,
toastText: "恭喜你，图片保存成功"
});
},
fail: function( res ) {
console.log( "download fail" );
that.setData( {
hidden: true,
toastHidden: false,
toastText: "保存失败，请稍后再试"
});
},
complete:function(res){
console.log( "download complete" );
}
})
}
这里的js代码主要是实现了图片的加载和长按后的保存功能。
saveImage函数中，主要调用了微信的wx.downloadFile接口完成本地图片的保存功能。
大家看到一下代码，实现起来也非常的容易。
下面是image页面的WXML代码：
<!--image.wxml-->
<view >
<loading hidden="{{hidden}}" >
{{loadingText}}
</loading>
<toast hidden="{{toastHidden}}" bindchange="onToastChanged">
{{toastText}}
</toast>
<view bindlongtap = "onlongclick">
<image class = "bigImage" mode="aspectFill" src="{{url}}" />
</view>
<modal title="是否保存？" confirm-text="保存" cancel-text="取消" data-url="{{url}}"
hidden="{{modalHidden}}" bindconfirm="onSaveClick" bindcancel="onCancelClick">
</modal>
</view>
下面是image页面的WXSS代码：
/*image.wxss*/
.bigImage{
width: 95%;
height: 1000rpx;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
更多微信小程序教程请至51小程序官网查看：http://html51.com/欢迎您与51小程序共同成长，成为微信小程序定制开发专家。
网友评论