摘要：功能介紹對準上面的小程序碼，掃一下，嘀地一聲，掃碼成功，打開小程序，進入小程序首頁。因為手頭上沒有可樂，所以我找來了一只非常專業(yè)的貓，扮演一瓶的可口可樂演示給大家看。

對準上面的小程序碼，掃一下，‘嘀’~地一聲，掃碼成功，打開小程序，進入小程序首頁。

因為手頭上沒有可樂，所以我找來了一只非常專業(yè)的貓，扮演一瓶330ml的可口可樂演示給大家看。

摁住它，對準它的條碼，掃一下，‘喵’~地一聲，說明貓跑掉了，掃碼失敗了，去追

如果‘嘀’~地一聲，說明掃碼成功了，這時頁面就自動跳到商品詳情頁。

然后你就可以看得到別人在可口可樂下寫的留言，當然你也可以點擊右下角的藍色按鈕就發(fā)表你的留言了；

原理：因為一個商品對應(yīng)唯一一個條碼，所以掃描同一個商品條碼就可以進入唯一一個留言列表；
全國各地的可口可樂330ml的條形碼都是一樣的，掃碼后都會進入同一個頁面
條形碼就像一個暗號，一句口令，一個郵差..
當然，不只是條形碼，二維碼也可以留言，比如說別人的微信二維碼一般是長時間不會變的，你可以碼上說別人壞話。

接下來詳細介紹一下每個頁面的功能

首頁有三個部分：

????1.用戶的信息：頭像和昵稱；
????2.輪播圖-可以放一些平時要展示的圖片；
????3.掃碼按鈕-點擊即可打開掃描條碼；

當用戶點擊掃碼按鈕時，我們就調(diào)用小程序的掃碼接口去掃描商品條碼，當用戶掃描好條碼后，我們就得到了商品條碼（barcode）；
這時，我們就可以跳轉(zhuǎn)到商品詳情頁面了，順便把條碼傳過去，這樣商品詳情頁才能知道用戶掃的是什么商品：

    wx.navigateTo({
          url: "/page/component/proDtl/proDtl?barcode=" + barcode,  //把商品條碼傳給商品詳情頁
    })

進入詳情頁后，我們的第一件事情：在生命周期onLoad中獲取首頁傳過來商品條碼，然后根據(jù)條碼請求當前商品的留言列表，如果這個商品還沒有人掃過的話，就可能沒有留言，那我們只要顯示“暫無留言”即可

  onLoad(options){
       var barcode = options.barcode ? options.barcode:"";
       this.getProductInfo(barcode)  //根據(jù)條碼請求當前商品的留言列表
  },

在getProductInfo（）方法中，我們會向后臺請求商品留言列表；
接著我們就把請求到的商品留言列表渲染到頁面上:

如果用戶覺得請求到的商品名稱是不對的，還可以點擊名稱進行編輯：

最后，頁面底部還有一個提交留言的小按鈕：

如果你要發(fā)表留言，你可以用你的食指點擊它：

點擊按鈕后，小程序就會跳到添加留言頁面，順便把商品條碼信息傳過去：

  turnToSubmit(){
    wx.navigateTo({
      url: "/page/component/addNode/addNode?barcode=" + this.data.barcode,
    })
  },

如圖，這時候我們就可以開始寫我們的留言了。

寫完留言之后，你可以標注一下你的留言類型：
如果你覺得你寫的是一首詩，你可以選擇類型為‘詩一首’；
如果你覺得你寫的是一封信，等待別人掃碼閱讀，你可以選擇類型為‘魚書’；
如果你掃描的是一本書的條碼，你可以選擇類型為‘書摘’；

類型的右邊就是是上傳圖片功能，
首先，我們點擊"添加圖片"小圖標，這時就會使用小程序選擇圖片的接口打開相冊或者直接拍照，
得到圖片之后，因為現(xiàn)在的手機圖片拍照像素都比較高，導(dǎo)致圖片比較大，上傳會很慢，占服務(wù)器空間，請求也會很慢...
所以為了優(yōu)化用戶體驗，我們需要壓縮一下圖片然后再上傳。

  wx.chooseImage({
      count: 1, // 默認9  
      sizeType: ["original"], // 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ["album", "camera"], // 可以指定來源是相冊還是相機，默認二者都有
      success: function (res) {  //圖片選擇成功之后
        
               var tempFilePaths = res.tempFilePaths;
               self.compressedImg(res)  //調(diào)用compressedImg方法，先把圖片壓縮一下

        }
  })

雖然小程序的選擇圖片接口可以設(shè)置默認壓縮，但好像沒什么用，還是需要找其他的方法壓縮一下，
網(wǎng)上最普遍的圖片壓縮是使用了小程序提供的canvas畫布，把用戶上傳的圖片搞到畫布上（....），然后根據(jù)畫布上的圖片高和寬判斷圖片是否過大，如果過大，就直接把畫布按比例縮小：

   while (canvasWidth > 220 || canvasHeight > 220) {  //如果寬度或者高度大于220，我就認為圖片要進一步壓縮，你可以根據(jù)需求改成其他的數(shù)字
          //比例取整
      canvasWidth = Math.trunc(res.width / ratio)
      canvasHeight = Math.trunc(res.height / ratio)
      ratio++;
   }

圖片的壓縮參考自：微信小程序：利用canvas縮小圖片

然后把canvas上這張壓縮了的圖片上傳到后臺服務(wù)器：

   ......
   wx.uploadFile({  //上傳圖片
          url: "https://mp.orancat.com/proImgUpload",
          filePath: photo.tempFilePath,  //壓縮后的圖片
          name: "file",
          header: {
            "content-type": "multipart/form-data"
          },
          success: function (res) {
    .......          

圖片上傳成功之后，后臺會返回上傳圖片的地址給我們，我們把圖片渲染到頁面上，用戶就會知道圖片上傳成功了；

最后點擊"提交"按鈕，就會把以下內(nèi)容發(fā)送給后臺，后臺就會自動將留言保存到數(shù)據(jù)庫；

   var data={
      authorName: userName, //用戶昵稱
      token: userId,  //用戶ID
      content: this.data.textContent, //留言文本內(nèi)容
      imgUrl: userImg,  //用戶的頭像
      code: this.data.barcode,  //商品的條碼
      typeIndex: this.data.typeIndex, //留言的類型
      nodeImgUrl: this.data.nodeImgUrl //用戶上傳的圖片的地址
    }

留言提交成功之后，頁面會自動切回商品詳情頁面，這時，你就可以看到自己剛剛的留言了；

有過留言的商品都會出現(xiàn)在排行榜頁面，并且按照留言的數(shù)量多少進行排列，點擊單個商品就查看該商品下的留言；

在商品詳情頁，有可能出現(xiàn)這種情況，比如說假設(shè)A商品有120條留言，如果一進A商品詳情頁就要加載120條留言的話，可能頁面加載半天都沒有出來；這樣的話用戶體驗就會非常不好。所以相對理想的方式應(yīng)該是，假設(shè)12條留言為一頁，那么A商品的留言總共有10頁，當我們進入A商品的詳情頁面時，先加載第一頁（前12條留言），當我們往上滑動頁面到底部時就自動加載下一頁的內(nèi)容，一頁一頁按需加載；

我們使用小程序提供的OnReachBottom觸底事件實現(xiàn)分頁加載，當用戶滑動留言列表到底部時觸發(fā)加載下一頁：

  onReachBottom: function () { //滑動到底部時觸發(fā)
       this.setData({
           bottomLoading: true  // 顯示loading提示
       })
       this.getRankList()  //請求下一頁數(shù)據(jù)
  }

同理，排行榜頁面也使用了分頁加載；

由于用戶的昵稱，頭像什么的都可能隨時會改變，當openID不會變，所以使用openId作為用戶唯一憑證；
雖然我獲取了用戶的Id，但暫時還沒有使用到；
如果以后要弄個用戶個人主頁或者留言回復(fù)等等可能就要用到openId；

如上所述，在圖片上傳前，我們把圖片壓縮了一下
如果圖片是jpeg，png時沒問題的
但如果圖片時gif動圖的話，那可能會導(dǎo)致動圖不會動了（可能直接變成jpeg圖片？）
所以我另外加了一個判斷：如果圖片時gif格式的話，就不壓縮圖片,直接上傳：

    if(res.type=="gif"){
       if(res.width>666||res.height>666){ //如果圖片太大了，拒絕上傳
         wx.hideLoading()
         wx.showModal({
           title: "提示",
           content: "動圖太大了，請上傳小一點的",
           showCancel: false
         })
         return false;
       }
       res.tempFilePath=res.path;
       _this.uploadImg(res)  //上傳圖片
       return false;
    }

這樣在window和安卓下就可以上傳gif圖片了。
蘋果手機呢？？
咳咳..蘋果手機一打開相冊選動圖，動圖就自動變成了jpeg的不動圖...
所以蘋果手機暫時上傳不了動圖，似乎沒有解決辦法。。

在本文底部的github地址下載源碼，用微信開發(fā)者工具，填上你的小程序appId，打開項目即可；

記得在開發(fā)者工具點擊‘’詳情‘’設(shè)置不校驗域名：

如果你要提交審核并分布小程序的話，你需要在公眾號平臺上的"設(shè)置>開發(fā)設(shè)置"頁面上設(shè)置小程序的服務(wù)器域名如下：

然后，由于一般電腦沒有攝像頭不能掃碼，所以當你需要掃碼時，你可以把下面這張條碼圖片保存在本地電腦上，點擊掃碼按鈕時打開這張圖片即可：

當然，你也可以自己找其他的條碼；

另外，需要注意的是，當你在本地電腦調(diào)試時，由于我們都是使用同一個后臺接口，所以你發(fā)的留言都會同步到我的小程序上，所以盡量不要發(fā)送太明顯的測試留言，例如：

??

可以發(fā)一些強顏歡笑，積極向上，人畜無害的留言，例如：

??

你也可以直接掃描這個的小程序碼體驗一下：

源碼下載地址:[https://github.com/AUSERGEE/p...]