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

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

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

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

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

原理：因為一個商品對應唯一一個條碼，所以掃描同一個商品條碼就可以進入唯一一個留言列表；

全國各地的可口可樂330ml的條形碼都是一樣的，掃碼后都會進入同一個頁面

條形碼就像一個暗號，一句口令，一個郵差.. 當然，不只是條形碼，二維碼也可以留言，比如說別人的微信二維碼一般是長時間不會變的，你可以碼上說別人壞話。

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

2.首頁

首頁有三個部分：

1.用戶的信息：頭像和昵稱；

2.輪播圖-可以放一些平時要展示的圖片；

3.掃碼按鈕-點擊即可打開掃描條碼；

當用戶點擊掃碼按鈕時，我們就調用小程序的掃碼接口去掃描商品條碼，當用戶掃描好條碼后，我們就得到了商品條碼（barcode）；

這時，我們就可以跳轉到商品詳情頁面了，順便把條碼傳過去，這樣商品詳情頁才能知道用戶掃的是什么商品：

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

3.商品詳情頁

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

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

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

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

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

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

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

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

4.添加留言頁面

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

寫完留言之后，你可以標注一下你的留言類型：

如果你覺得你寫的是一首詩，你可以選擇類型為‘詩一首’；

如果你覺得你寫的是一封信，等待別人掃碼閱讀，你可以選擇類型為‘魚書’；

如果你掃描的是一本書的條碼，你可以選擇類型為‘書摘’；

類型的右邊就是是上傳圖片功能，

首先，我們點擊'添加圖片'小圖標，這時就會使用小程序選擇圖片的接口打開相冊或者直接拍照，

得到圖片之后，因為現在的手機圖片拍照像素都比較高，導致圖片比較大，上傳會很慢，占服務器空間，請求也會很慢...

所以為了優化用戶體驗，我們需要壓縮一下圖片然后再上傳。

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

        }
  })
復制代碼

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

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

圖片的壓縮參考自：[微信小程序：利用canvas縮小圖片][ blog.csdn.net/akony/artic… ]

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

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

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

最后點擊'提交'按鈕，就會把以下內容發送給后臺，后臺就會自動將留言保存到數據庫；

復制代碼

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

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

5.排行榜頁面

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

6.其他實現的功能

1.分頁

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

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

onReachBottom: function () { //滑動到底部時觸發
       this.setData({
           bottomLoading: true  // 顯示loading提示
       })
       this.getRankList()  //請求下一頁數據
  }
復制代碼

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

2.通過wx.login獲取用戶唯一憑證openId

由于用戶的昵稱，頭像什么的都可能隨時會改變，當openID不會變，所以使用openId作為用戶唯一憑證；

雖然我獲取了用戶的Id，但暫時還沒有使用到；

如果以后要弄個用戶個人主頁或者留言回復等等可能就要用到openId；

3.gif圖片上傳

如上所述，在圖片上傳前，我們把圖片壓縮了一下 如果圖片是jpeg，png時沒問題的 但如果圖片時gif動圖的話，那可能會導致動圖不會動了（可能直接變成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的不動圖...

所以蘋果手機暫時上傳不了動圖，似乎沒有解決辦法。。

7.下載與本地電腦運行

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

記得在開發者工具點擊‘’詳情‘’設置不校驗域名：

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

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

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

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

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