怎么在微信小程序中使用图片预览功能？

  对于怎么在微信小程序中使用图片预览功能?还不明白的朋友们，一起来看看小编为大家准备的这篇教程吧。

  图片预览功能需要服务器端的配置。所以，今后这可能是作为一个网站架构，成为某种服务性的商业软件的需要。配置服务器的小程序相对于功能性的来说要麻烦点，因为需要服务端的配合。但是幸亏我手头有几个空置的云服务器，所以就直接拿来写了一个这种东西。后期可能会直接开发一个类似于朋友圈的，可以把图片放到服务器上去。附上文字，然后慢慢的形成一个闭环的圈子。当然这是我的想法， 目前小程序只是玩耍的工具。

  图片预览功能其实很简单，就是把服务器端的图片下载下来进行一种压缩格式的预览。稍后容我一一道来。目前这个功能，怎么来说呢，其实就是个鸡肋。因为我的图片大多是本地文件，要不就是直接加载的服务端的图片，预览这个作用实在让我难以找到用途。不过，如果今后真要布置一个圈子的话，这一点又是必不可少的。毕竟预览这个功能可以省下巨多流量!

  《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》

  

  

  

  

   点击我选择相册

  

   发布

  

  效果图

  预览功能的原理很简单，其实就是给你一个按钮，绑定一个事件。这个事件就是向服务器请求预览图片加载，所谓预览图片加载呢。其实就是一个压缩过的，低像素的图片啦。然后给你发送过来，你就完成了所谓的预览。

  以上就是怎么在微信小程序中使用图片预览功能的全部内容了，大家都学会了吗?