小程序 -條碼識別和圖像ocr識別

應用場景

用戶通過掃描條碼，或者拍照，上傳圖片，可以查詢某個產品的信息

條碼實現

使用API ： uni.scanCode({})，成功之後，會返回barcode。
然後將此barcode傳遞到相應的頁面(因爲調用接口，需要barcode) 

  // 允許從相機和相冊掃碼
      uni.scanCode({
        success: async res => {
          console.log("條碼類型：" + res.scanType);
          console.log("條碼內容：" + res.result);
          this.qRCodeMsg = res.result;
          // 登陸接口例子
          const data = await searchApi(this.qRCodeMsg);
          uni.navigateTo({
            url: `/pages/scanResults/index?barcode=${this.qRCodeMsg}`
          });
        },
        fail: res => {
          console.log("抱歉，商品不存在");
        }
      });

拍照實現

使用API ：uni.chooseImage({}),成功之後，會返回當前圖片的路徑，將此圖片路徑傳到響應的頁面(因爲圖像ocr識別接口，需要這個參數)

  // 只允許通過相機掃碼
      uni.chooseImage({
        count: 1, //默認9
        sizeType: ["original", "compressed"], //可以指定是原圖還是壓縮圖，默認二者都有
        sourceType: ["album", "camera"], //從相冊選擇
        success: async res => {
          console.log(res);
          this.path = res.tempFilePaths[0];
          uni.navigateTo({
            url: `/pages/discern/index?image=${this.path}`
          });
        }
      });

題外話

1:一般圖片太大，需要轉base64

const params = {
        image: wx.getFileSystemManager().readFileSync(this.image, "base64")
      };

2: 接口返回的數據，要分兩類的處理

 for (var i = 0; i < this.getList.length; i++) {
          if (this.getList[i].ingredientType == 2) {
            this.getYList.push(this.getList[i]);
          }
          if (this.getList[i].ingredientType == 1) {
            this.getCList.push(this.getList[i]);
          }
        }

3:對於NetWork裏面error的處理，可以通過tyr catch 的形式來捕獲

 try {
        const data = await ocrApi(params);
        console.log("拍照數據", data);
        if (data == "") {
          this.hasData = false;
        }
        this.getList = data;
        // 成分是1 原料是2
        // var getCList = [];
        // var getYList = [];
        for (var i = 0; i < this.getList.length; i++) {
          if (this.getList[i].ingredientType == 2) {
            this.getYList.push(this.getList[i]);
          }
          if (this.getList[i].ingredientType == 1) {
            this.getCList.push(this.getList[i]);
          }
        }
      } catch (err) {
        console.log("錯誤異常", err);
        if (err.data.code == 1) {
          this.hasData = false;
        }
      }

4: 佈局，讓每一行的高度都是居中的,就不要設置行高了。這樣多行可以，但是單行會有問題。使用flex的align-items:center就ok

5：uni裏面，圖片變性了，拉長了。裏面有非常好用的

mode=''aspectFit"
	保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
	
mode="aspectFill"
	保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。

mode="scaleToFill"
	不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素

mode="widthFix"
	寬度不變，高度自動變化，保持原圖寬高比不變

6:合理的設置變量，關鍵是會使用style class 來寫三元表達式