用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

TITF精选:设置指定标签的ID,清空文本框,身份证信息识别功能思路 ... ...

纸飞机 2018-3-8 09:38

作者:TITF,来自公众号:TITF,如需源码,请关注公众后索取;一:点击图片切换视频播放功能功能说明 1、用户点击指定图片播放图片对应的视频。 2、每一张图片对应不同的视频。 注:布局文件使用数据渲染for循环显示 ...

作者:TITF,来自公众号:TITF,如需源码,请关注公众后索取;

一:点击图片切换视频播放功能

功能说明
1、用户点击指定图片播放图片对应的视频。
2、每一张图片对应不同的视频。
注:布局文件使用数据渲染for循环显示组件,逻辑文件可添加若干个视频数据。

实现思路
1、初始化时,系统默认显示图片组件、隐藏视频组件。
2、用户点击图片组件时,系统隐藏图片组件、显示视频组件。
3、设置图片组件ID,用于判断用户点击了哪一张图片。
4、通过for语句遍历所有数据,结合if语句与点击事件获取的图片组件的ID判断用户要播放的视频。
关键代码:

  1. playVideoTap:function(e){
  2. //获取被点击了图片ID
  3. var id=e.target.id;
  4. for(var i=0;i<ARR_ITEM_DATA.length;i++){
  5. if(i==id){
  6. //显示视频组件
  7. ARR_ITEM_DATA[i].boolPlayVideo=true
  8. }else{
  9. //隐藏视频组件
  10. ARR_ITEM_DATA[i].boolPlayVideo=false
  11. }
  12. }
  13. this.setData({
  14. arrItemData:ARR_ITEM_DATA
  15. })
  16. //播放视频组件
  17. this.videoContext.play();
  18. },

二:设置指定标签的ID

示例:

说明:给标签添加事件,包括点击事件(bindtap)、触摸事件(bindtouchstart、bindtouchmove、bindtouchend),此处使用点击事件获取标签ID,事件名:getViewIdTap
示例:

  1. id="view1" bindtap="getViewIdTap">

在页面逻辑页面中写事件响应函数getViewIdTap:function(e){},e为回调参数,类型为对象
示例:

  1. Page({
  2. //获取view标签id事件响应函数
  3. getViewIdTap:function(e){
  4. //将view标签的id输出到控制台
  5. console.log(e.target.id);
  6. }
  7. })

三:身份证信息识别功能思路

自动识别用户上传的身份证图片的正反面信息,并显示到小程序页上


原理说明:
1、客户端(小程序)
调用wx.chooseImage(OBJECT) 选择本地图片
调用wx.uploadFile(OBJECT) 将用户选择的图片上传到服务器,并获取服务器返回的数据进行处理
调用setData方法将处理好的数据显示到小程序页上
2、服务器端(PHP)
调用预定义变量$_FILES获取客户端用户上传的文件
示例:

  1. $_FILES['image']

获取用户上传的文件格式
示例:

  1. $_FILES['image']['type']

判断用户上传的文件格式是否为图片格式(JPG、JPEG、PJEPG……),图片格式判断根据实际情况设定
判断用户上传的图片是否已存在
不存在则将调用move_uploaded_file( string $filename , string $destination)函数将上传的文件保存到指定位置
示例:move_uploaded_file($image_tmp_name,"uploads/".$strRondom.$image_name);
调用Face++图片识别API,并输出返回的数据

四:清空文本框小创意

用户通过左滑动作清空输入框数据

原理说明:
1、输入框(input)设置
数据绑定input的value属性值
示例:

  1. value="{{inputValue}}"/>

定义input的触摸事件:bindtouchstart(触摸动作开始时触发)、bindtouchmove(触摸后移动时触发)、bindtouchend(触摸动作结束后触发)
示例:

  1. bindtouchstart="inputTouchStart" bindtouchmove="inputTouchMove" bindtouchend="inputTouchEnd"/>

2、事件逻辑
bindtouchstart:获取用户开始触摸屏幕时的X坐标(e.touches[0].clientX)
示例:

  1. inputTouchStart:function(e){
  2. OBJ_INPUT_TOUCH.start.x=e.touches[0].clientX;
  3. }

bindtouchmove:获取用户触摸屏幕移动时的X坐标(e.touches[0].clientX)
示例:

  1. inputTouchMove:function(e){
  2. OBJ_INPUT_TOUCH.move.x=e.touches[0].clientX;
  3. },

bindtouchend:判断用户是否有移动,若有移动则判断用户滑动的方向
3、如何判断用户滑动的方向?
逻辑1: 若移动后的X坐标小于开始触摸时的X坐标,则为向左滑动;否则,反之。
示例:

  1. if(OBJ_INPUT_TOUCH.move.x<OBJ_INPUT_TOUCH.start.x){
  2. console.log('用户向左移动')
  3. }

逻辑2: 用移动后的X坐标减开始触摸时的X坐标,若结果小于0,则为向左滑动;否则,反之。
示例:

  1. if((OBJ_INPUT_TOUCH.move.x-OBJ_INPUT_TOUCH.start.x)<0){
  2. console.log('用户向左移动')
  3. }
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏