微信小程序實例：美女圖集：調用遠程API獲取圖片及保存
本程序中(zhong)，利用(yong)(yong)微信的遠程API接(jie)口(kou)調用(yong)(yong)，完成了圖(tu)(tu)(tu)片(pian)(pian)(pian)的獲(huo)取，并用(yong)(yong)按(an)鈕動態加(jia)載(zai)圖(tu)(tu)(tu)片(pian)(pian)(pian)。在圖(tu)(tu)(tu)片(pian)(pian)(pian)顯示頁(ye)面，用(yong)(yong)wx.downloadFile接(jie)口(kou)調用(yong)(yong)，實現了本地圖(tu)(tu)(tu)片(pian)(pian)(pian)的保存(cun)功能。比較完整得實現了一個(ge)圖(tu)(tu)(tu) ...
本程序中，利用微信的遠程API接口調用，完成了圖片的獲取，并用按鈕動態加載圖片。在圖片顯示頁面，用wx.downloadFile接口調用，實現了本地圖片的保存功能。比較完整得實現了一個圖片瀏覽的微信小程序。我們先看一下(xia)這(zhe)個(ge)小程序的(de)運行效果：
可(ke)以(yi)看到我們(men)可(ke)以(yi)瀏(liu)覽很多美女(nv)圖(tu)片，
而(er)且一頁看完(wan)后，還(huan)可以通過點擊(ji)【點擊(ji)加載更(geng)(geng)多】按鈕，動態加載更(geng)(geng)多的圖片；
此外，可以可以支持(chi)點擊單個圖片，單獨查(cha)看一張完整(zheng)的圖片；
并支持按住圖片后，保存(cun)到本地的功能。
下面(mian)(mian)就這個項(xiang)目的代碼做些解析：下面(mian)(mian)是index頁(ye)面(mian)(mian)的JS代碼：
//index.js
//獲(huo)取(qu)應用實例
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 );
}
})
/**
* 定(ding)義幾個數(shu)組用(yong)來(lai)存取item中的(de)數(shu)據
*/
var mUrl = [];
var mDesc = [];
var mWho = [];
var mTimes = [];
var mTitles = [];
var mCurrentPage = 0;
// 引(yin)入(ru)utils包下的js文(wen)件
var Constant = require('../../utils/constant.js');
/**
* 請(qing)求數據
* @param that Page的(de)對象，用來setData更新(xin)數據
* @param targetPage 請(qing)求的(de)目標頁(ye)碼
*/
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 ] );
//將(jiang)獲(huo)得的各(ge)種數(shu)據寫入itemList，用于(yu)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;
}
});
}
/**
* 綁(bang)定接口(kou)中返回的(de)數(shu)據
* @param itemData Gank.io返回的(de)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 );
}
這里在點擊的時候，把點擊的圖片的url傳遞image頁面，注冊了點擊更多時，動態加載圖片的事件；
函數(shu)requestData通過(guo)API接口調用(yong)，完(wan)成遠程請求，把圖片加載到本(ben)地，并通過(guo)bindData綁定接口中返回的數(shu)據。
下面(mian)是index頁(ye)面(mian)的(de)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>
下(xia)面是(shi)index頁面的WXSS代(dai)碼：
/**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;
}
下面(mian)是另外一個單獨(du)顯示圖片的image頁面(mian)的JS代(dai)碼：
Page( {
data: {
url: "",
hidden: false,
toastHidden: true,
modalHidden: true,
toastText: "數據異(yi)常",
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: "恭喜你(ni)，圖片保存成功"
});
},
fail: function( res ) {
console.log( "download fail" );
that.setData( {
hidden: true,
toastHidden: false,
toastText: "保存失敗(bai)，請(qing)稍后(hou)再(zai)試"
});
},
complete:function(res){
console.log( "download complete" );
}
})
}
這里的js代碼主要是實現了圖片的加載和長按后的保存功能。
saveImage函數中，主要調用了微信的wx.downloadFile接口完成本地圖片的保存功能。
大(da)家看到一下代碼，實(shi)現起來也非(fei)常的(de)容(rong)易。
下面(mian)是image頁面(mian)的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="是(shi)否(fou)保存？" confirm-text="保存" cancel-text="取(qu)消" data-url="{{url}}"
hidden="{{modalHidden}}" bindconfirm="onSaveClick" bindcancel="onCancelClick">
</modal>
</view>
下面是image頁面的WXSS代碼(ma)：
/*image.wxss*/
.bigImage{
width: 95%;
height: 1000rpx;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
