正文

這(zhe)次回來，暫時只加(jia)了(le)一個圖片選(xuan)取以及預覽模塊。雖然我(wo)(wo)說的很(hen)(hen)順利(li)，但(dan)是確實(shi)也經歷了(le)很(hen)(hen)多的Debug，現在(zai)對Bug簡直是又愛又恨，愛恨交織，沒有她讓(rang)我(wo)(wo)覺得不真實(shi)，有了(le)它讓(rang)我(wo)(wo)很(hen)(hen)苦惱！所(suo)以我(wo)(wo)的Debug過程還(huan)是不放出來了(le)！

一、圖片選擇功能

從(cong)本地相(xiang)冊(ce)選擇圖片或使用相(xiang)機拍照(zhao)

wx.chooseImage(OBJECT)

使用過程如下：

wx.chooseImage({
  count: 1, // 默認(ren)9
  sizeType: ['original', 'compressed'], // 可以指定是原(yuan)圖(tu)還(huan)是壓縮圖(tu)，默(mo)認二者都(dou)有
  sourceType: ['album', 'camera'], // 可以指定來源(yuan)是(shi)相冊還(huan)是(shi)相機，默(mo)認(ren)二(er)者都(dou)有
  success: function (res) {
    // 返回選定照片(pian)的本地文(wen)件路徑列表，tempFilePath可以作為(wei)img標簽(qian)的src屬性顯(xian)示(shi)圖片(pian)
    var tempFilePaths = res.tempFilePaths
  }
})

 代碼(ma)鑲(xiang)嵌在原本的代碼(ma)框架中(zhong)就是現(xian)在這樣：

《---picture.js》

//index.js
//獲取應(ying)用實(shi)例(li)
var app = getApp()
Page({
  data: {
source:"",
  },


 listenerButtonChooseImage: function() {
      var that = this;
      wx.chooseImage({
          count: 1,
          //original原圖(tu)，compressed壓縮圖(tu)
          sizeType: ['original'],
          //album來源(yuan)相(xiang)(xiang)冊 camera相(xiang)(xiang)機 
          sourceType: ['album', 'camera'],
          //成功(gong)時會回調
          success: function(res) {
                //重繪視圖
              that.setData({
                  source: res.tempFilePaths,
                             })

wx.previewImage({
   current: '//119.29.74.46/myphoto/0.jpg', // 當前顯(xian)示圖(tu)片的鏈接，不填則(ze)默認為 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: '歡迎(ying)使用顏大傻牌跑步計',
      desc: '將你的戰績分享到~~~',
      path: '/page/picture/picture.js'
    }
  },
})

《---picture.wxml》

<view class="header" style="flex-direction:row;">

<!--通過數據綁定的方式動(dong)態(tai)獲取js數據-->
<image src="{{source}}" mode="fulltoFill"  class="pic"/>

<!--監(jian)聽按鈕-->
<button type="primary" bindtap="listenerButtonChooseImage" class="button_anniu">點擊我選擇相冊</button>


<button bindtap="" class="button_anniu"> 發布 </button>
</view>

整體的文件架構圖如下：

二、增置了圖片預覽

圖片預(yu)覽功能需(xu)要服(fu)務(wu)器(qi)(qi)端的(de)配(pei)置。所以(yi)，今(jin)后這可能是作為(wei)一(yi)個網站架構，成(cheng)(cheng)為(wei)某種服(fu)務(wu)性(xing)的(de)商(shang)業軟件(jian)的(de)需(xu)要。配(pei)置服(fu)務(wu)器(qi)(qi)的(de)小(xiao)程序相對于功能性(xing)的(de)來(lai)說要麻(ma)煩(fan)點，因為(wei)需(xu)要服(fu)務(wu)端的(de)配(pei)合。但是幸虧我手(shou)頭有幾(ji)個空置的(de)云服(fu)務(wu)器(qi)(qi)，所以(yi)就直接拿來(lai)寫了一(yi)個這種東西。后期可能會直接開(kai)發一(yi)個類似于朋友圈的(de)，可以(yi)把(ba)圖片放(fang)到服(fu)務(wu)器(qi)(qi)上去。附上文字，然后慢(man)慢(man)的(de)形成(cheng)(cheng)一(yi)個閉環的(de)圈子。當(dang)然這是我的(de)想法， 目(mu)前小(xiao)程序只是玩耍的(de)工具。

---

圖片預(yu)覽功能其實很簡單，就(jiu)是(shi)(shi)(shi)把服務(wu)器端的圖片下(xia)載(zai)下(xia)來(lai)進行一種壓縮格(ge)式的預(yu)覽。稍后容我一一道來(lai)。目前這個功能，怎么來(lai)說呢，其實就(jiu)是(shi)(shi)(shi)個雞肋。因(yin)為我的圖片大多是(shi)(shi)(shi)本地文(wen)件(jian)，要不就(jiu)是(shi)(shi)(shi)直接加載(zai)的服務(wu)端的圖片，預(yu)覽這個作(zuo)用(yong)實在讓我難以(yi)(yi)找到用(yong)途。不過，如(ru)果今(jin)后真要布置一個圈(quan)子(zi)的話(hua)，這一點又(you)是(shi)(shi)(shi)必不可少(shao)的。畢竟預(yu)覽這個功能可以(yi)(yi)省下(xia)巨多流量！

《picture.js》

//index.js
//獲取應(ying)用(yong)實例
var app = getApp()
Page({
  data: {
source:"//159.203.250.111/Carly.png",
  },


 listenerButtonChooseImage: function() {
      var that = this;
      wx.chooseImage({
          count: 1,
          //original原圖(tu)，compressed壓縮(suo)圖(tu)
          sizeType: ['original'],
          //album來源相冊 camera相機 
          sourceType: ['album', 'camera'],
          //成功時會(hui)回調(diao)
          success: function(res) {
                //重繪(hui)視圖
              that.setData({
                  source: res.tempFilePaths,
                             })

          }
      })
  },

  yulan:function(){
    wx.previewImage({
   current: '//119.29.74.46/myphoto/0.jpg', // 當前顯示圖片的(de)鏈接，不填則(ze)默認為(wei) urls 的(de)第一張
  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: '歡迎使用顏大傻(sha)牌跑步計',
      desc: '將你(ni)的戰績分享到~~~',
      path: '/page/picture/picture.js'
    }
  },
})

《picture.wxml》

<view class="header" style="flex-direction:row;">

<!--通過數據綁定的方式動態獲取js數據-->
<image src="{{source}}" mode="fulltoFill"  class="pic"/>

<!--監聽按鈕(niu)-->
<button type="primary" bindtap="listenerButtonChooseImage" class="button_anniu">點擊我選擇相冊</button>

<button bindtap="yulan"><image src="/resources/yulan.png"  class="swiper"></image></button>
<button bindtap="" class="button_anniu"> 發布 </button>
</view>

 預(yu)(yu)覽(lan)(lan)功能的(de)原理很簡單，其實(shi)就是(shi)給(gei)你(ni)一(yi)(yi)個(ge)按(an)鈕，綁定一(yi)(yi)個(ge)事件。這個(ge)事件就是(shi)向(xiang)服務器請求(qiu)預(yu)(yu)覽(lan)(lan)圖片(pian)加載，所謂(wei)預(yu)(yu)覽(lan)(lan)圖片(pian)加載呢。其實(shi)就是(shi)一(yi)(yi)個(ge)壓縮(suo)過的(de)，低像素的(de)圖片(pian)啦。然后給(gei)你(ni)發送過來(lai)，你(ni)就完成了所謂(wei)的(de)預(yu)(yu)覽(lan)(lan)。

結束語

小程序算是假(jia)期的一個調(diao)劑吧，不然可(ke)能就(jiu)真(zhen)的天天看小說，然后逛逛B站了。昨天跟今天同學(xue)聚會，現在弄完了。在家還有三四天，好好珍惜，天天學(xue)習。爭(zheng)取做一個更好的我自己!

代碼請看相關(guan)文章內連接(jie)！