本程序中，利用微信的远程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}}"> <viewdata-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小程序共同成长，成为微信小程序定制开发专家。

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/15988.html