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

k00baa 發布于2019-08-22 11:08 / 1940人閱讀

摘要：今天嘗試了微信小程序的圖片功能，選擇圖片和預覽圖片，開發工具是最新版哈。

今天嘗試了微信小程序的圖片功能，選擇圖片和預覽圖片，開發工具是最新版哈。
具體如下：
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云服務器云服務器微信小程序怎么使用怎樣使用微信小程序如何使用微信小程序微信小程序如何在電腦上使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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