- 資源介紹
- 歷史當天
商品手賬微信小程序，商品留言評論小程序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縮小圖片][[url]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 //用戶上傳的圖片的地址 }複製代碼留言提交成功之後，頁面會自動切回商品詳情頁面，這時，你就可以看到自己剛剛的留言了；
內容加載中..
1. 本站所有資源來源於用戶上傳和網絡，如有侵權請郵件聯繫站長！
2. 分享目的僅供大家學習和交流，不能確保資源完整性和時效性，請在下載後24小時內刪除！
3. 不得使用於非法商業用途，不得違反國家法律。否則後果自負！
4. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
5. 如有鏈接無法下載、失效或廣告，請聯繫管理員處理！
6. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
耘藝源碼網 » 商品手賬微信小程序，商品留言評論小程序
2. 分享目的僅供大家學習和交流，不能確保資源完整性和時效性，請在下載後24小時內刪除！
3. 不得使用於非法商業用途，不得違反國家法律。否則後果自負！
4. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
5. 如有鏈接無法下載、失效或廣告，請聯繫管理員處理！
6. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
耘藝源碼網 » 商品手賬微信小程序，商品留言評論小程序
