本程序中，利用微信的远程API接口调用，完成了图片的获取，并用按钮动态加载图片。在图片显示页面，用wx.downloadFile接口调用，实现了本地图片的保存功能。比较完整得实现了一个图 ...
本程序中，利用微信的远程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(
"更多" +
" " + times );
}
