實現一個掃描商品條碼進行評價或留言的小程式（附原始碼）

秋収冬藏發表於2018-09-04

原始碼

1.功能介紹

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

因為手頭上沒有可樂，所以我找來了一隻非常專業的貓，扮演一瓶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畫布，把使用者上傳的圖片搞到畫布上（....），然後根據畫布上的圖片高和寬判斷圖片是否過大，如果過大，就直接把畫布按比例縮小：

   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的不動圖...
所以蘋果手機暫時上傳不了動圖，似乎沒有解決辦法。。