小程序通过摄像头拍摄个人身份证
前段时间,手上刚好接手一个小程序的项目,心想之前自学过一段时间的小程序,终于有项目可以练练手了,可惜,万万没想到,加了两个周末的班结果却成了飞机稿。好在有些收获,于是趁思路尚且清晰,先记录下来,以下纯属个人见解。
项目大概是这样的,通过摄像头拍摄个人身份证,并上传资料完成备案。
帐号
首先,开发小程序,我们需要个开发者账号,这里具体的步骤就不再赘述了。
开发语言
小程序框架本身提供了一套描述语言WXML、WXSS、以及JavaScript的逻辑层框架,并在视图层和逻辑层提供了数据传输和事件系统。
视图层(View):主要是用来渲染页面,即WXML、WXSS;
逻辑层(App Service):处理页面逻辑、调用接口、数据请求。
这里我想重点说一下视图层,我们都知道HTML+CSS+JS是Web编程的组合,在小程序里,WXML对应的便是HTML,WXSS对应的是CSS。
比如我们看这样一个页面在小程序里的表现:
可能有些人不太喜欢这样的方式去写HTML,又或者原先写好的页面,没办法直接沿用到小程序,这里推荐使用工具转译,可以像往常编写web一样编写小程序,并且支持项目的导入和导出。
其中编译工具主要是将源码目录下的所有HTML文件进行转译,并创建一个xxx.build的文件夹,将所有编译好的WXML存放到page文件夹下面,当然app.json的配置文件也会自动创建,根据创建的目录名,将同名的CSS文件,重命名为WXSS文件,并存放到同名目录中,当CSS与文件名不符,则合并不符的CSS文件,存放到全局目录的 app.wxss中。同时,源码目录中的JS文件会被忽略,页面级的JS会被复制到同名目录中,这个JS包括注册页面的page函数基础模板。我们还是看图吧!
下面是源码 demo 的目录文件结构:
编译后的目录结构改变:
同时页面上的html也会发生变化:
<!--html-->
<div class="container"><div class="group tip-success"><i class="tip-success"></i></div><span class='tip-success-text'>人脸认证完成</span><span class='text-mod'>您的人脸认证已经完成</span><span class='text-go'>返回首页</span>
</div>
编译后:
<!--wxml-->
<view class="container"><view class="group tip-success"><icon type="success" size="60"/></view><text class='tip-success-text'>人脸认证完成</text><text class='text-mod'>您的人脸认证已经完成</text><text class='text-go'>返回首页</text>
</view>
屏幕适配
小程序自身有一个计量单位rpx,1rpx=0.5px=1物理像素,rpx其实是微信对于rem的一种应用规定,或者说一种设计的方案,官方规定屏幕宽度为20rem,规定屏幕宽为750rpx。所以在微信小程序中1rem=750/20rpx,同时设计稿的尺寸推荐使用750作为设计稿的标准宽度。
样式库
小程序本身提供了一套带交互的样式库WeUI,官方文档有比较详细的调用和说明,但是并不是所有的样式都是我们想要的,有时候设计师会根据当前的页面来设计需要的样式,比如我们常用的image、button都含有默认样式,最直接的办法,是重置默认样式。
图片的引用
起初我只尝试通过网络的方式加载图片,但是其实小程序加载图片的方式是有两种的,分别是本地图片和网络图片,但是由于微信小程序本身整体的大小限制在2M以内,所以还是建议大家采用网络图片的方式来加载,以减少程序包的大小。
下面我们来看一下具体的实现方法:
目录结构如下,只要图片按正确的方式放入小程序的开发工具的项目中,即可在wxml文件中用内联样式或者image标签都可以引用本地的图片。
然后,新建个image文件夹,然后把图片拷贝到这个目录下。
注意:一定要用你从微信开发工具打开的项目window窗口完成新建文件夹和把图片copy到这个目录下的这两个步骤:
相对路径去访问图片,可以用style样式的方式或者image标签。
不能使用wxml样式去引用本地的图片,虽然不会报错,但其实是没有效果的。
注意:在手机模拟预览,样式的背景图只能用服务器的图片,不能用本地。
媒体组件 camera
这个项目的主要难点其实是如何在拍照的界面上添加文字和遮罩层,起初我尝试用很多方法,都无法在人体轮廓上面显示所需要的内容,如图,预览界面显示的效果是我想要的,但是手机上却并没有显示对应的内容:
后来我看到报错,同时我查阅了官方文档,原来小程序直接有提供给我们camera的组件cover-view和cover-image可以覆盖在相机界面层上,有一点要注意的是:原生控件cover-view作为父容器时,不能使用其他控件嵌套作为子元素,只能使用cover类的控件如:cover-view、cover-image,切记!
下面的嵌套方式就能在手机上正常显示所需的提示内容了:
以上都是个人对这次项目的小结,肯定也有更好的方法,希望不吝指教!
小程序通过摄像头拍摄个人身份证相关推荐
- 微信小程序开发(3) - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
- 小程序拒绝摄像头授权,重新允许无法调起摄像头
小程序拒绝摄像头授权,重新允许无法调起摄像头 公司项目需要做到自动拍照功能,发现如果用户拒绝了授权,再重新引导用户授权后,无法重新调用摄像头. 然后做了各种尝试,发现是页面渲染camera问题,当用户 ...
- 微信小程序实战通:小程序结合flask后台实现身份证智能识别
最近在工作上需要在微信上开发小程序.作为一个熟练于电脑客户端开发,网页前后台全栈开发,驱动开发,系统底层开发等多年经验的老鸟而言,刚开始接触小程序任务时居然一时有点懵逼,这是任何人面对全新领域时的正常 ...
- 微信小程序调用摄像头扫描识别二维码和条形码
今天在整一个有关于快递的小程序,快递单号一般比较长,手动录入会很麻烦. 然后就找了一下,其实微信小程序 API 中自带一个扫码识别的功能. wx.scanCode(Object object) 调起客 ...
- 微信小程序摄像头监控_微信小程序读取摄像头 微信调用摄像头
为什么微信扫一扫无法获取摄像头? 安装微信时,您没有授予微信使用摄像头的权限. 设置-应用权限-找到微信图标,点击"使用摄像头". 微信无法获取摄像头数据什么原因? 可能是因为** ...
- 微信小程序+百度AI OCR二代身份证识别
微信小程序内虽然有OCR识别功能 但是收费是按次计费的,还是选用了百度ai提供的OCR识别二代身份证. // 上传人面像upFileFront:function(e){let type = e.cur ...
- 微信小程序调用摄像头实现拍照
微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/component/camera.html 首先,需要用户授权摄像头权限,这一步是 ...
- 微信小程序调用摄像头
一.调用摄像头与身份证对比验证 摄像头层级太高,要用cover-view和cover-image写按钮和icon,才能覆盖在camera上 二.代码 <template><div c ...
- 微信小程序图片上传以及身份证识别
在开发过程中需要对用户进行实名认证,查阅微信开放文档apiwx.chooseImage(Object object) 进行了简单开发 ,具体的参数以及回调参数 文档中都有详细介绍 (wx.choose ...
最新文章
- arcgis合并tif影像_微图影像地图导出拼接大图的参数说明
- 第七篇:循环神经网络
- 学习笔记---取得枚举项的2种方法: Enum.GetValues()-Array.GetValue()和Enum.GetNames()-Enum.Parse()...
- 小试“ASUS WL-500W无线路由”
- 凤凰式期权matlab代码,美式期权二叉树定价及MATLAB程序.doc
- hbase 架构和存储
- Git 输入命令git branch -a 后怎么返回
- C#后台调用跨域MVC服务,带Cookie验证
- 关于编程中的一些颜色代码
- .tar.bz2文件怎么解压
- 人工智能AI工程师职业规划指南
- 调用系统相机和相册出现闪退报错No Activity found to handle Intent
- C# MessageBox.Show 用法
- python扩展包安装_Python包管理工具Distribute的安装
- 全球及中国隔热保温材料市场十四五需求规模与供给前景分析报告2022-2028年
- [答疑]费用报销系统的用例图
- ionic5 + cordova:使用QRScanner完成扫描二维码功能
- 我辞职了,35岁中年博后失业,决定给找教职的一些建议,警醒后人,深坑勿视...
- 对登录接口的简单图形验证码进行识别 20221004
- python中分组频率统计功能_python频数统计value_counts和groupby方法