如何使用微信小程序采集个人信息？

为了使网页更加美观，体验效果更好，采用微信小程序中的体验小程序，按如下路径下载即可

1.把weui.wxss引入到新建的项目中，这样我们就可以使用小程序官方中的组件了

2.首先做一个采集个人信息的页面，eg：

  
    学号
   
    
    
   
  
  
  
    姓名
   
    
    
   
  
  
  
    性别
   
    
    
   
     
    
  
  
  
  
    年龄
   
    
    
   
  
  
          
            
              
                
                  个人照片
                  0/1
                
                
                  
                    
                      
                        
                      
                    
                  
                  
                    
                  
                
              
            
          
        
     
    确定
        

效果如下：

3.为了可以远程调试，需要用thinkphp框架调用自己的服务器及数据库，写相应的php控制器代码，如下：

add($data);
       if($id){
       	return $this->ajaxReturn(array('error'=>false,'id'=>$id));
       }else{
       		return $this->ajaxReturn(array('error'=>true,'msg'=>'添加出错'));
       }
    }
    //上传
    public function upload(){
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize = 3145728 ;// 设置附件上传大小
        $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath = './Uploads/'; // 设置附件上传根目录
        // 上传单个文件
        $info = $upload->uploadOne($_FILES['file']);
        if(!$info) {// 上传错误提示错误信息
          return $this->ajaxReturn(array('error'=>true,'msg'=>$upload->getError()));
        }else{// 上传成功 获取上传文件信息
          return $this->ajaxReturn(array('error'=>false,'msg'=>$info['savepath'].$info['savename']));
        }
        }
}

4.使用 switch:开关选择器  来控制性别

eg:如下

  
    性别
   
    
    
   
     
    
  
  

Page({
  data: {
   sex: '男',
   imageList:[]
  },
  switch1Change:function(e){
    if(e.detail.value){
      this.setData({sex:'男'})
    }else{
      this.setData({sex:'女'})
    }
  },
})

使用  wx.chooseImage():从本地相册选择图片或使用相机拍照   

        wx.previewImage():预览图片。

获取到一个本地资源的临时文件路径

//拍照
  chooseImage: function () {
    var that = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res)
        that.setData({
          imageList: res.tempFilePaths
        })
      }
    })
  },
  //预览照片
  previewImage: function (e) {
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: this.data.imageList
    })
  }

wx.uploadFile():将本地资源上传到开发者服务器，客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data 。

示例代码：

wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData:{
        'user': 'test'
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

整体的js代码，如下：

//index.js
//获取应用实例
Page({
  data: {
   sex: '男',
   imageList:[]
  },
  switch1Change:function(e){
    if(e.detail.value){
      this.setData({sex:'男'})
    }else{
      this.setData({sex:'女'})
    }
  },
  //表单提交
  formSubmit: function (e) {
      wx.request({
        url: 'http://anqingya.top/face/index.php/home/index/index', //仅为示例，并非真实的接口地址
        data:e.detail.value,
        method:'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值
        },
        success: (res)=>{
          console.log(res)
          if (res.error) {
            wx.showToast({
              title:res.data.msg,
              icon: 'none',
              duration: 2000,
            })
          } else {
            wx.showToast({
              title: '添加成功',
              icon: 'success',
              duration: 2000,
            })

            this.upload();
          }
        }
      })
  },
//拍照
  chooseImage: function () {
    var that = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res)
        that.setData({
          imageList: res.tempFilePaths
        })
      }
    })
  },
  //预览照片
  previewImage: function (e) {
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: this.data.imageList
    })
  },

  //上传
  upload:function(){
    wx.uploadFile({
      url: 'http://anqingya.top/face/index.php/home/index/upload', //仅为示例，非真实的接口地址
      filePath: this.data.imageList[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: function (res) {
        var data = res.data
        console.log(data);
        var json=JSON.parse(res.data);
        wx.showToast({
          title: json.msg,
          icon: 'none',
          duration: 3000,
        })
      }
    })
  }
})

上传成功就会在自己服务器的Uploads中显示相应的以时间命名的文件，文件下有上传的图片。