E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

为了使网页更加美观,体验效果更好,采用微信小程序中的体验小程序,按如下路径下载即可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中显示相应的以时间命名的文件,文件下有上传的图片。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信信息,如何使用微信小程序采集个人信息?
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏