作者：TITF，来自公众号：TITF

，如需源码，请关注公众后索取；

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

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

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

    playVideoTap:function(e){
    //获取被点击了图片ID
    var id=e.target.id;
    for(var i=0;i<ARR_ITEM_DATA.length;i++){
      if(i==id){
        //显示视频组件
        ARR_ITEM_DATA[i].boolPlayVideo=true
      }else{
        //隐藏视频组件
        ARR_ITEM_DATA[i].boolPlayVideo=false
      }
    }
    this.setData({
      arrItemData:ARR_ITEM_DATA
    })
    //播放视频组件
    this.videoContext.play();
  },

二：设置指定标签的ID

示例：<view id="view1"></view>

说明：给标签添加事件，包括点击事件（bindtap）、触摸事件（bindtouchstart、bindtouchmove、bindtouchend），此处使用点击事件获取标签ID，事件名：getViewIdTap 
示例：

<view id="view1" bindtap="getViewIdTap"></view>

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

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

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

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

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

$_FILES['image']

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

$_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属性值 
示例：

    <input value="{{inputValue}}"/>

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

        <input bindtouchstart="inputTouchStart" bindtouchmove="inputTouchMove" bindtouchend="inputTouchEnd"/>

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

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

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

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

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

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

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

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

安卓app源码下载