应用场景
用户通过扫描条码,或者拍照,上传图片,可以查询某个产品的信息
条码实现
使用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 来写三元表达式