游逗网,重度移动游戏垂直门户!

最新游戏|最新软件|游戏更新|电脑软件|电脑游戏|专题合集|合集排行
您当前位置:首页 > 资讯教程 > 软件教程 >  怎么在微信小程序中使用图片预览功能?

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

作者:终止符发布时间:

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

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

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

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

  

  

  

  

   点击我选择相册

  

   发布

  

  效果图

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

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

复制本文链接攻略文章为游逗网所有,未经允许不得转载。
系统教程更多
相关资讯更多
热门资讯更多
  1. 1如何在AutoCAD中选框选图形?在AutoCAD中选框选图形的方法
  2. 2QQ如何使用面对面快传?QQ使用面对面快传的方法
  3. 3怎么使用AutoCAD中的快速标注?
  4. 4如何在会声会影10中插入字幕?
  5. 5微信电脑版如何视频聊天?微信电脑版视频聊天的方法
  6. 6微信电脑版如何无限多开?微信电脑版无限多开的方法
  7. 7微信电脑版撤回消息的具体操作步骤介绍
  8. 8会声会影X7功能优势是什么?会声会影X7功能优势详解
火爆软件榜更多
精选资讯更多
热门专题全部>
热门分类全部>