国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

stefanieliang / 940人閱讀

摘要:功能介紹對準上面的小程序碼,掃一下,嘀地一聲,掃碼成功,打開小程序,進入小程序首頁。因為手頭上沒有可樂,所以我找來了一只非常專業的貓,扮演一瓶的可口可樂演示給大家看。

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...]

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113871.html

相關文章

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

    摘要:功能介紹對準上面的小程序碼,掃一下,嘀地一聲,掃碼成功,打開小程序,進入小程序首頁。因為手頭上沒有可樂,所以我找來了一只非常專業的貓,扮演一瓶的可口可樂演示給大家看。 1.功能介紹 showImg(https://segmentfault.com/img/remote/1460000016260048?w=240&h=240); 對準上面的小程序碼,掃一下,‘嘀’~地一聲,掃碼成功,打...

    elina 評論0 收藏0
  • 實現一個可以在可口可樂上寫日記的小程序

    摘要:技術棧小程序使用了有贊提供的庫功能介紹假設有一天你在深圳的一間便利店里面品嘗一瓶可口可樂,這時,你拿出了這個小程序商品手賬掃描這瓶可樂的商品條碼,然后寫下一段留言。 1.技術棧 1.小程序; 2.使用了有贊提供的UI庫zan-ui 3.express+mongoose+nginx; 2.功能介紹 showImg(https://segmentfault.com/img/bVbe36...

    econi 評論0 收藏0
  • 實現一個可以在可口可樂上寫日記的小程序

    摘要:技術棧小程序使用了有贊提供的庫功能介紹假設有一天你在深圳的一間便利店里面品嘗一瓶可口可樂,這時,你拿出了這個小程序商品手賬掃描這瓶可樂的商品條碼,然后寫下一段留言。 1.技術棧 1.小程序; 2.使用了有贊提供的UI庫zan-ui 3.express+mongoose+nginx; 2.功能介紹 showImg(https://segmentfault.com/img/bVbe36...

    tinyq 評論0 收藏0

發表評論

0條評論

stefanieliang

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<