1.把weui.wxss引入到新建的项目中，这样我们就可以使用小程序官方中的组件了
2.首先做一个采集个人信息的页面，eg：
!--index.wxml--formbindsubmit="formSubmit"viewviewview学号/view/viewviewinputname="no"placeholder="请输入学号"value='1635050131'//view/viewviewviewview姓名/view/viewviewinputname="name"placeholder="请输入姓名"value='安庆雅'//view/viewviewviewview性别/view/viewviewinputname="sex"value="{{sex}}"//viewviewswitchcheckedbindchange="switch1Change"//view/viewviewviewview年龄/view/viewviewinputname="age"placeholder="请输入年龄"value='21'//view/viewviewviewviewviewviewview个人照片/viewview0/1/view/viewviewviewblockwx:for="{{imageList}}"wx:for-item="image"viewimagesrc="{{image}}"data-src="{{image}}"bindtap="previewImage"/image/view/block/viewviewviewbindtap="chooseImage"/view/view/view/view/view/view/viewviewbuttontype="primary"form-type="submit"确定/button/view/form效果如下：
3.为了可以远程调试，需要用thinkphp框架调用自己的服务器及数据库，写相应的php控制器代码，如下：
?phpnamespaceHomeController;useThinkController;classIndexControllerextendsController{publicfunctionindex($no,$name,$sex,$age){$data['no']=$no;$data['name']=$name;$data['sex']=$sex;$data['age']=$age;$id=M('student')-add($data);if($id){return$this-ajaxReturn(array('error'=false,'id'=$id));}else{return$this-ajaxReturn(array('error'=true,'msg'='添加出错'));}}//上传publicfunctionupload(){$upload=newThinkUpload();//实例化上传类$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:如下
viewviewview性别/view/viewviewinputname="sex"value="{{sex}}"//viewviewswitchcheckedbindchange="switch1Change"//view/viewPage({data:{sex:'男',imageList:[]},switch1Change:function(e){if(e.detail.value){this.setData({sex:'男'})}else{this.setData({sex:'女'})}},})
使用wx.chooseImage():从本地相册选择图片或使用相机拍照
wx.previewImage():预览图片。
获取到一个本地资源的临时文件路径
//拍照chooseImage:function(){varthat=thiswx.chooseImage({count:1,//默认9sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有success:function(res){console.log(res)that.setData({imageList:res.tempFilePaths})}})},//预览照片previewImage:function(e){varcurrent=e.target.dataset.srcwx.previewImage({current:current,urls:this.data.imageList})}wx.uploadFile():将本地资源上传到开发者服务器，客户端发起一个HTTPSPOST请求，其中content-type为multipart/form-data。
示例代码：
wx.chooseImage({success:function(res){vartempFilePaths=res.tempFilePathswx.uploadFile({url:'https://example.weixin.qq.com/upload',//仅为示例，非真实的接口地址filePath:tempFilePaths[0],name:'file',formData:{'user':'test'},success:function(res){vardata=res.data//dosomething}})}})整体的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(){varthat=thiswx.chooseImage({count:1,//默认9sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有success:function(res){console.log(res)that.setData({imageList:res.tempFilePaths})}})},//预览照片previewImage:function(e){varcurrent=e.target.dataset.srcwx.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){vardata=res.dataconsole.log(data);varjson=JSON.parse(res.data);wx.showToast({title:json.msg,icon:'none',duration:3000,})}})}})上传成功就会在自己服务器的Uploads中显示相应的以时间命名的文件，文件下有上传的图片。
