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縮小圖片][https://blog.csdn.net/akony/article/details/78815544]
然后把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/proSay]