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

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縮小圖片

而後把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，打開項目便可；

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

若是你要提交審覈並分佈小程序的話，你須要在公衆號平臺上的"設置>開發設置"頁面上設置小程序的服務器域名以下：

而後，因爲通常電腦沒有攝像頭不能掃碼，因此當你須要掃碼時，你能夠把下面這張條碼圖片保存在本地電腦上，點擊掃碼按鈕時打開這張圖片便可：

固然，你也能夠本身找其餘的條碼；

另外，須要注意的是，當你在本地電腦調試時，因爲咱們都是使用同一個後臺接口，因此你發的留言都會同步到個人小程序上，因此儘可能不要發送太明顯的測試留言，例如：

  

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

  

7.掃碼體驗

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

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