夜雨聆风
uni-app开发极简入门(9):图片&摄像头&扫码
先说一下，uni-app有很多针对物理设备的API，比如系统信息、陀螺仪、蓝牙、通讯录、GPS位置信息等。
很多API的使用都很简单，大家看看官方就知道怎么用，例如打电话：
uni.makePhoneCall({phoneNumber: '114' //仅为示例});
另外大家可以对着微信小程序的官方文档看一下，你会发现uni-app的很多API几乎与之一致，微信小程序的打电话：
wx.makePhoneCall({phoneNumber: '114' //仅为示例})
所以如果之前有微信小程序的开发经验，uni-app的开发就会轻松许多，所以这一类的API我就不水文章了。
额外要说位置相关的API，大家可以比对两个平台的文档，其API、参数、返回结果基本一致，但是因为uni-app要适配多端，就需要考虑很多：地图服务的提供商，相关的key、权限，各平台的个性化要求等。
而微信小程序用地图现在是免费的。
我是个人开发，去搞这些挺麻烦的，且之前微信小程序系列文章，我已经写了使用的方法，如果大家有兴趣的话，就自己去申请一下地图服务商的资源，然后对着微信小程序那篇文章看看。
包括下面说的图片、相机API，也有一些注意事项。
pics.vue：
<template><divclass='pics'><h1>图片</h1><image:src="imgSrc"mode="aspectFit" @click="previewPic"></image><buttontype="default" @click="choosePic">选择图片</button><buttontype="default" @click="scan">扫码</button>{{scanResult}}</div></template><scriptlang='ts'setupname='Pics'>import {Ref,ref} from 'vue';const imgSrc: Ref < string >= ref < string > ("https://images.dog.ceo/breeds/hound-afghan/n02088094_10263.jpg")const choosePic = () => {uni.chooseImage({count: 1, //默认9张sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，original 原图，compressed 压缩图，默认二者都有//sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项success: function(res) {console.log(JSON.stringify(res.tempFilePaths));imgSrc.value = res.tempFilePaths[0]}});}const previewPic = () => {// 预览图片uni.previewImage({urls: [imgSrc.value],longPressActions: {itemList: ['发送给朋友', '保存图片', '收藏'],success: function(data) {console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');//根据点击的图片、按钮，执行相应的逻辑},fail: function(err) {console.log(err.errMsg);}}});}const scanResult: Ref < string >= ref < string > ("-")const scan = () => {uni.scanCode({onlyFromCamera: true,success: function(res) {scanResult.value = '条码类型：' + res.scanType + '。条码内容：' + res.result}});}</script><stylescoped>.pics {background-color: darkkhaki;}</style>
说明：
-
代码都很简单，配置项也少，就不解释了。
-
chooseImage还有个对应的视频api——chooseVideo。
-
uni.chooseImage()几乎就是微信小程序 wx.chooseImage()的像素级复制。因为新版本的微信小程序（2.21.0以后）wx.chooseImage()停止维护，改为使用wx.chooseMedia()，同样的，uni-app也出了像素级复制uni.chooseMedia()。但是uni.chooseMedia()的兼容性有点问题，例如不支持H5，在Android端开发模式下也不起作用，看了官网好像涉及权限、打包的问题。我这边就不费这心思了。
-
Android/iOS的扫码引擎，使用zxing等开源库，识别效率较弱。如需更强的扫码效果，推荐使用插件。
-
至于活体认证，人脸识别，这些对资质的要求严，作为一个个体开发者就不搞了。
