（昨天不太舒服就鴿了一天偏形，QAQ）

前天看了一個(gè)最常用的網(wǎng)絡(luò)api——wx.request ！
然后可能會(huì)有人問了阻星，我想自己寫api，怎么去做呢已添？這里給大家提供一個(gè)思路妥箕，就是用spring boot去寫api，僅需要少量的配置酝碳，開發(fā)復(fù)雜度大大降低矾踱。（有需求的同學(xué)可以先去了解一下，我之后可能也會(huì)開一篇從零學(xué)spring boot吧疏哗，有興趣的朋友們可以關(guān)注一下）呛讲。

之前還說過，除了這個(gè)api還有很多api，這里就不一一演示了贝搁，因?yàn)闆]有現(xiàn)成的api供大家使用吗氏，所以看一下用法就ok，實(shí)際操作和wx.request大同小異雷逆。
詳情戳這里

• uploadFile
• downloadFile
• WebSocket

媒體api

今天我們主要來看看媒體api弦讽，媒體api大致分為5類：

• 圖片api
• 錄音api
• 音頻播放控制api
• 音樂播放控制api
• 視頻api

先來看一下圖片api

圖片api

圖片api主要實(shí)現(xiàn)對(duì)本地相冊(cè)圖片或相機(jī)拍照?qǐng)D片的處理，目前包括6個(gè)api接口

• wx.saveImageToPhotosAlbum(Object object) 接口用于預(yù)覽圖片膀哲。
• wx.previewImage(Object object) 接口用于在新頁面中全屏預(yù)覽圖片往产。預(yù)覽的過程中用戶可以進(jìn)行保存圖片、發(fā)送給朋友等操作某宪。
• wx.getImageInfo(Object object) 接口用于獲取圖片信息仿村。網(wǎng)絡(luò)圖片需先配置download域名才能生效。
• wx.compressImage(Object object) 接口用于壓縮圖片接口兴喂，可選壓縮質(zhì)量蔼囊。
• wx.chooseMessageFile(Object object) 接口用于從客戶端會(huì)話選擇文件。
• wx.chooseImage(Object object) 接口用于從本地相冊(cè)選擇圖片或使用相機(jī)拍照衣迷。

來一個(gè)一個(gè)看一下

1.wx.saveImageToPhotosAlbum(Object object) 接口用于預(yù)覽圖片畏鼓。

More Actions屬性類型必填說明filePathstring是圖片文件路徑，可以是臨時(shí)文件路徑或永久文件路徑壶谒，不支持網(wǎng)絡(luò)圖片路徑successfunction否接口調(diào)用成功的回調(diào)函數(shù)failfunction否接口調(diào)用失敗的回調(diào)函數(shù)completefunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功云矫、失敗都會(huì)執(zhí)行）

示例代碼

wx.saveImageToPhotosAlbum({
  success(res) { }
})

2.wx.previewImage(Object object)接口用于在新頁面中全屏預(yù)覽圖片。預(yù)覽的過程中用戶可以進(jìn)行保存圖片呵俏、發(fā)送給朋友等操作堆缘。

示例代碼

wx.previewImage({
  current: '', // 當(dāng)前顯示圖片的http鏈接
  urls: [] // 需要預(yù)覽的圖片http鏈接列表
})

3.wx.getImageInfo(Object object) 接口用于獲取圖片信息。網(wǎng)絡(luò)圖片需先配置download域名才能生效麻车。

示例代碼

wx.getImageInfo({
  src: 'images/a.jpg',
  success(res) {
    console.log(res.width)
    console.log(res.height)
  }
})

wx.chooseImage({
  success(res) {
    wx.getImageInfo({
      src: res.tempFilePaths[0],
      success(res) {
        console.log(res.width)
        console.log(res.height)
      }
    })
  }
})

4.wx.compressImage(Object object) 接口用于壓縮圖片接口赁咙，可選壓縮質(zhì)量钮莲。

示例代碼

wx.compressImage({
  src: '', // 圖片路徑
  quality: 80 // 壓縮質(zhì)量
})

5.wx.chooseMessageFile(Object object) 接口用于從客戶端會(huì)話選擇文件。

示例代碼

wx.chooseMessageFile({
  count: 10,
  type: 'image',
  success(res) {
    // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
    const tempFilePaths = res.tempFilePaths
  }
})

6.wx.chooseImage(Object object) 接口用于從本地相冊(cè)選擇圖片或使用相機(jī)拍照。

示例代碼

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success(res) {
    // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
    const tempFilePaths = res.tempFilePaths
  }
})

實(shí)踐

然后上一波實(shí)驗(yàn)代碼，學(xué)完一定要實(shí)踐璃哟，不然相當(dāng)于沒學(xué)氛琢！在實(shí)踐中才能真正搞懂文檔到底講的什么。
今天的代碼依然沒有任何美化随闪，只是功能的實(shí)踐（大概這就是直男吧）

<!--pages/mt/mt.wxml-->
<button bindtap='ciBtn'>chooseImage</button>
<button bindtap='cmfBtn'>chooseMessageFile</button>
<button bindtap='piBtn'>previewImage</button>
<button bindtap='giiBtn'>getImageInfo</button>
<button bindtap='sitpaBtn'>saveImageToPhotosAlbum</button>
src: <text>{{info}}</text>
<view wx:for="{{p}}" wx:for-item="image">
    <image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
</view>

// pages/mt/mt.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    p:null,
    info:null
  },

  //選擇圖片阳似，這里我設(shè)置可以選擇兩張
  ciBtn:function(){
    var that = this;
    wx.chooseImage({
      count:2,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {
        var tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        that.setData({
          p:tempFilePaths
        })
      },
    })
  },

  //預(yù)覽圖片
  piBtn:function(){
    wx.previewImage({
      urls:this.data.p,
      current: this.data.p[0],
    })
  },

  //獲取圖片信息，其實(shí)信息有很多铐伴，這里只打印了圖片路徑
  giiBtn:function(){
    var s = this.data.p[0];
    var that = this;
    wx.getImageInfo({
      src: s,
      success(res){
        that.setData({
          info: res.path
        })
      }
    })
  },

  //另外一種導(dǎo)入圖片的方式撮奏，同時(shí)可以導(dǎo)入其他文件
  cmfBtn:function(){
    var that = this;
    wx.chooseImage({
      count: 10,
      type: 'image',
      success: function (res) {
        var tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        that.setData({
          p: tempFilePaths
        })
      },
    })
  },

  //保存圖片到本地
  sitpaBtn:function(){
    wx.saveImageToPhotosAlbum({
      filePath: this.data.p[0],
      success(res){
        console.log('保存成功')
      }
    })
  }

})

要注意的是，這次代碼里面沒去做過多邏輯的處理当宴，所以一定先上傳圖片再做其他的功能畜吊，否則我也不知道會(huì)出什么bug。户矢。玲献。

然后這里再提一點(diǎn)關(guān)于使用方面的問題，調(diào)試的時(shí)候其實(shí)可以不用每次都用console.log（）去查看每一個(gè)變量的值梯浪，可以直接在控制臺(tái)的appdata里面查看數(shù)據(jù)捌年。會(huì)方便很多！

AppData的位置

好了挂洛，關(guān)于圖片這部分的api就先看到這里吧礼预。！

上一篇：微信開發(fā)之旅———Day6（遠(yuǎn)程請(qǐng)求）
下一篇：微信開發(fā)之旅———Day8（實(shí)戰(zhàn)演練）