微信小程序（有始有終，全部代碼）開發(fā)--- 新增模塊： 圖片選取以及拍照功能

開篇語

前幾天發(fā)了一篇：
《簡年15： 微信小程序（有始有終，全部代碼）開發(fā)---跑步App+音樂播放器 》
后來又發(fā)了BUG修復(fù)的版本：
簡年18： 微信小程序（有始有終，全部代碼）開發(fā)---跑步App+音樂播放器 Bug修復(fù)
本來以為這篇文章要沉底了。結(jié)果，一不小心貌似又出事了：

本來以為這篇文章要沉底了。結(jié)果，一不小心貌似又出事了

經(jīng)過兩天的同學(xué)聚會，我今天下午五點(diǎn)多到家，然后馬不停蹄的開始進(jìn)行了新模塊的測試。這次有點(diǎn)不知道干嘛，但是突然想到要不要調(diào)用一下手機(jī)的硬件模塊？最經(jīng)典的自然就是照片了嗎。微信的那個(gè)拍照功能看的我還很眼饞的！所以回來就想著加了個(gè)選取照片的模塊上去。萬幸，隨著技術(shù)的逐漸進(jìn)步，現(xiàn)在很快的就可以引入一些API和組件！哈哈，接下來展示下我的成果！

正文

這次回來，暫時(shí)只加了一個(gè)圖片選取以及預(yù)覽模塊。雖然我說的很順利，但是確實(shí)也經(jīng)歷了很多的Debug，現(xiàn)在對Bug簡直是又愛又恨，愛恨交織，沒有她讓我覺得不真實(shí)，有了它讓我很苦惱！所以我的Debug過程還是不放出來了！

一、圖片選擇功能

從本地相冊選擇圖片或使用相機(jī)拍照

wx.chooseImage(OBJECT)
參數(shù)說明
效果圖，設(shè)置為一開始為Carly Rae Jeepson

使用過程如下：

wx.chooseImage({
  count: 1, // 默認(rèn)9
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
  sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
  success: function (res) {
    // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
    var tempFilePaths = res.tempFilePaths
  }
})

代碼鑲嵌在原本的代碼框架中就是現(xiàn)在這樣：

《---picture.js》

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
  data: {
source:"",
  },

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

wx.previewImage({
   current: 'http://119.29.74.46/myphoto/0.jpg', // 當(dāng)前顯示圖片的鏈接，不填則默認(rèn)為 urls 的第一張
  urls: [ 'http://119.29.74.46/myphoto/0.jpg',
   'http://119.29.74.46/myphoto/1.jpg',
    'http://119.29.74.46/myphoto/2.jpg',
     'http://119.29.74.46/myphoto/3.jpg',
      'http://119.29.74.46/myphoto/4.jpg'
      , 'http://119.29.74.46/myphoto/5.jpg',
       'http://119.29.74.46/myphoto/6.jpg',
        'http://119.29.74.46/myphoto/7.jpg'],
  success: function(res){

   
  },
  fail: function() {
    // fail
  },
  complete: function() {
    // complete
  }
})          }
      })
  },
  
   onShareAppMessage: function () {
    return {
      title: '歡迎使用顏大傻牌跑步計(jì)',
      desc: '將你的戰(zhàn)績分享到~~~',
      path: '/page/picture/picture.js'
    }
  },
})

《---picture.wxml》


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

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

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


<button bindtap="" class="button_anniu"> 發(fā)布 </button>
</view>

整體的文件架構(gòu)圖如下：

代碼框架圖

二、增置了圖片預(yù)覽

圖片預(yù)覽功能需要服務(wù)器端的配置。所以，今后這可能是作為一個(gè)網(wǎng)站架構(gòu)，成為某種服務(wù)性的商業(yè)軟件的需要。配置服務(wù)器的小程序相對于功能性的來說要麻煩點(diǎn)，因?yàn)樾枰?wù)端的配合。但是幸虧我手頭有幾個(gè)空置的云服務(wù)器，所以就直接拿來寫了一個(gè)這種東西。后期可能會直接開發(fā)一個(gè)類似于朋友圈的，可以把圖片放到服務(wù)器上去。附上文字，然后慢慢的形成一個(gè)閉環(huán)的圈子。當(dāng)然這是我的想法， 目前小程序只是玩耍的工具。

圖片預(yù)覽功能其實(shí)很簡單，就是把服務(wù)器端的圖片下載下來進(jìn)行一種壓縮格式的預(yù)覽。稍后容我一一道來。目前這個(gè)功能，怎么來說呢，其實(shí)就是個(gè)雞肋。因?yàn)槲业膱D片大多是本地文件，要不就是直接加載的服務(wù)端的圖片，預(yù)覽這個(gè)作用實(shí)在讓我難以找到用途。不過，如果今后真要布置一個(gè)圈子的話，這一點(diǎn)又是必不可少的。畢竟預(yù)覽這個(gè)功能可以省下巨多流量！

《picture.js》

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
  data: {
source:"http://159.203.250.111/Carly.png",
  },

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

          }
      })
  },
  
  yulan:function(){
    wx.previewImage({
   current: 'http://119.29.74.46/myphoto/0.jpg', // 當(dāng)前顯示圖片的鏈接，不填則默認(rèn)為 urls 的第一張
  urls: [ 'http://119.29.74.46/myphoto/0.jpg',
   'http://119.29.74.46/myphoto/1.jpg',
    'http://119.29.74.46/myphoto/2.jpg',
     'http://119.29.74.46/myphoto/3.jpg',
      'http://119.29.74.46/myphoto/4.jpg',
       'http://119.29.74.46/myphoto/5.jpg',
       'http://119.29.74.46/myphoto/6.jpg',
        'http://119.29.74.46/myphoto/7.jpg'],
  success: function(res){

   
  },
  fail: function() {
    // fail
  },
  complete: function() {
    // complete
  }
})
  },

   onShareAppMessage: function () {
    return {
      title: '歡迎使用顏大傻牌跑步計(jì)',
      desc: '將你的戰(zhàn)績分享到~~~',
      path: '/page/picture/picture.js'
    }
  },
})

《picture.wxml》

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

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

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

<button bindtap="yulan"><image src="/resources/yulan.png"  class="swiper"></image></button>
<button bindtap="" class="button_anniu"> 發(fā)布 </button>
</view>
效果圖

預(yù)覽功能的原理很簡單，其實(shí)就是給你一個(gè)按鈕，綁定一個(gè)事件。這個(gè)事件就是向服務(wù)器請求預(yù)覽圖片加載，所謂預(yù)覽圖片加載呢。其實(shí)就是一個(gè)壓縮過的，低像素的圖片啦。然后給你發(fā)送過來，你就完成了所謂的預(yù)覽。

服務(wù)器端遠(yuǎn)程控制界面。好吧，這就是為了震懾一下看到此文的小白玩家的。大神們就不要笑我了。

結(jié)束語

小程序算是假期的一個(gè)調(diào)劑吧，不然可能就真的天天看小說，然后逛逛B站了。昨天跟今天同學(xué)聚會，現(xiàn)在弄完了。在家還有三四天，好好珍惜，天天學(xué)習(xí)。爭取做一個(gè)更好的我自己!

快夸我

寫完教程片之后第一個(gè)項(xiàng)目性的完整文章：
簡年15： 微信小程序（有始有終，全部代碼）開發(fā)---跑步App+音樂播放器

Bug修復(fù)：調(diào)整了Banner以及插入了音樂切換功能。
簡年18： 微信小程序（有始有終，全部代碼）開發(fā)---跑步App+音樂播放器 Bug修復(fù)

全部功能的展示。飛速，可能看不清，如果有興趣請你看文章！

個(gè)人宣言

知識傳遞力量，技術(shù)無國界，文化改變生活！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容