微信小程序chooseImage和previewImage使用方法

k00baa 发布于2019-08-22 11:08 / 1887人阅读

摘要：今天尝试了微信小程序的图片功能，选择图片和预览图片，开发工具是最新版哈。

今天尝试了微信小程序的图片功能，选择图片和预览图片，开发工具是最新版哈。
具体如下：
wxml文件：

选择图片

js文件：

data: {
    imagesList: []
  },
  chooseImage: function () {
    var that = this
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res)
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        that.setData({
          imagesList: tempFilePaths
        })
        console.log(tempFilePaths)
      }
    })
  },
  previewImage: function (e) {
    var current = e.target.dataset.src;
    wx.previewImage({
      current: current, // 当前显示图片的http链接  
      urls: this.data.imagesList // 需要预览的图片http链接列表  
    })
  },

wxss文件:

.loadpic{
  margin: 20px auto;
  width: 500rpx;
  height: 80rpx;
  background: #d34c17;
  text-align: center;
  color: white;
  line-height: 80rpx;
}
.previewimg{
  padding: 10rpx;
  float: left;
}
.image{
  display: block;
  width: 200rpx;
  height: 200rpx;
}
.showPic{
  margin: 0 auto;
  width: 90%;
}

无论本地还是真机测试都可以哈！！！开始在网上找资料，找了好多都不成功，最后自己慢慢调试成功了！！！哭一个！！

GPU云服务器云服务器微信小程序怎么使用怎样使用微信小程序如何使用微信小程序微信小程序如何在电脑上使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91845.html

微信小程序：截图组件welCropper，实现原理及其使用

摘要：最近做项目的时候，需要做一个截图功能。因为所以，就自己动手写了一个截图组件。下面介绍一下实现原理和使用方法。用来绘制适应屏幕比例大小的图片，因为通常原图大小是超过屏幕长宽的。 showImg(http://upload-images.jianshu.io/upload_images/2158535-2c383e1129188a2a.png?imageMogr2/auto-orient/...

jay_tian 2019-08-21 16:41 评论0 收藏0
微信小程序学习与wepy框架的使用详解

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

sf190404 2019-08-29 16:09 评论0 收藏0
微信小程序学习与wepy框架的使用详解

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

stormjun 2019-08-23 10:24 评论0 收藏0
微信小程序学习与wepy框架的使用详解

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

xiao7cn 2019-08-02 11:02 评论0 收藏0