对于怎么在微信小程序中使用图片预览功能?还不明白的朋友们，一起来看看小编为大家准备的这篇教程吧。
图片预览功能需要服务器端的配置。所以，今后这可能是作为一个网站架构，成为某种服务性的商业软件的需要。配置服务器的小程序相对于功能性的来说要麻烦点，因为需要服务端的配合。但是幸亏我手头有几个空置的云服务器，所以就直接拿来写了一个这种东西。后期可能会直接开发一个类似于朋友圈的，可以把图片放到服务器上去。附上文字，然后慢慢的形成一个闭环的圈子。当然这是我的想法， 目前小程序只是玩耍的工具。
图片预览功能其实很简单，就是把服务器端的图片下载下来进行一种压缩格式的预览。稍后容我一一道来。目前这个功能，怎么来说呢，其实就是个鸡肋。因为我的图片大多是本地文件，要不就是直接加载的服务端的图片，预览这个作用实在让我难以找到用途。不过，如果今后真要布置一个圈子的话，这一点又是必不可少的。毕竟预览这个功能可以省下巨多流量!
《picture.js》
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
source function() {var that = this;
wx.chooseImage({
count: 1,
//original原图，compressed压缩图
sizeType: [\'original\'],
//album来源相册 camera相机
sourceType: [\'album\', \'camera\'],
//成功时会回调
success: function(res) {
//重绘视图
that.setData({
source: res.tempFilePaths,
})
}
})
},
yulan:function(){
wx.previewImage({
current: \'//119.29.74.46/myphoto/0.jpg\', // 当前显示图片的链接，不填则默认为 urls 的第一张urls: [ \'//119.29.74.46/myphoto/0.jpg\',\'//119.29.74.46/myphoto/1.jpg\',\'//119.29.74.46/myphoto/2.jpg\',\'//119.29.74.46/myphoto/3.jpg\',
\'//119.29.74.46/myphoto/4.jpg\',
\'//119.29.74.46/myphoto/5.jpg\',
\'//119.29.74.46/myphoto/6.jpg\',
\'//119.29.74.46/myphoto/7.jpg\'],
success: function(res){
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
onShareAppMessage: function () {
return {
title: \'欢迎使用颜大傻牌跑步计\',
desc: \'将你的战绩分享到~~~\',
path: \'/page/picture/picture.js\'
}
},
})
《picture.wxml》
效果图
预览功能的原理很简单，其实就是给你一个按钮，绑定一个事件。这个事件就是向服务器请求预览图片加载，所谓预览图片加载呢。其实就是一个压缩过的，低像素的图片啦。然后给你发送过来，你就完成了所谓的预览。
以上就是怎么在微信小程序中使用图片预览功能的全部内容了，大家都学会了吗?
End
