基于Vant UI的微信小程序开发

基于Vant UI的微信小程序开发✨一悬浮浮动1、效果图只要无脑引用样式就可以了2、页面代码3、js代码4、样式代码二底部跳转1、效果图点击我要发布跳转到发布的页面2、js代码3、页面代码4、app.json代码配置底部导航tabBar三上传组件实现图片/文件上传预览、上传数量限制、大小限制、删除、点击之后列表查看1、效果图2、js代码借助的是微信小程序开发工具的缓存路径的代码返回的微信小程序图片路径进行预览下面第三个才是回调自己的上传接口进行预览操作我会再写一篇关于阿里云对象存储的文章帮助大家实现3、上传的重要代码替换了借助的是微信小程序开发工具的缓存路径的代码部分4、页面代码四图片预览1、使用vant组件van-image1js代码2html代码2、使用image食用本篇文章的前提是你引入了Vant-UI自己看如何引入一定要注意是小程序版up已经贴心的附上了链接Vant Weapp轻量、可靠的小程序 UI 组件库一悬浮浮动1、效果图只要无脑引用样式就可以了2、页面代码viewclassfloat-iconbind:taptoQiuZhiFaBuvan-iconnameaddcolor#31df80info求职发布size50px//view3、js代码/**跳转到我的发布-求职发布 */toQiuZhiFaBu(){wx.navigateTo({url:/pages/record/QiuZhiFaBu/index,})},4、样式代码.float-icon{position:fixed;bottom:10%;right:10%;z-index:99;border-radius:50rpx;background-color:white;display:flex;justify-content:center;}二底部跳转1、效果图点击我要发布跳转到发布的页面2、js代码toWoyaofabu(){wx.switchTab({url:/pages/record/index,})},3、页面代码viewstylewidth:23%;height:200rpx;text-align:center;bind:taptoWoyaofabuviewstylewidth:100rpx;height:100rpx;margin:10rpx auto;background-image:url(https://zhihuifile.oss-cn-qingdao.aliyuncs.com/chacheyoufu/assets/carousel/%E6%88%91%E8%A6%81%E5%8F%91%E5%B8%83%E7%BB%BF%E7%89%88.png);background-size:100% 100%;border-radius:20rpx;/viewtextstylefont-size:13px;我要发布/text/view4、app.json代码配置底部导航tabBartabBar:{color:#000,selectedColor:#31df80,borderStyle:black,backgroundColor:#ffffff,list:[{pagePath:pages/index/index,text:首页,iconPath:/assets/tabBar/index1.png,selectedIconPath:/assets/tabBar/index1-select.png,iconSize:10},{pagePath:pages/exam/index/index,text:商城,iconPath:/assets/tabBar/shopping.png,selectedIconPath:/assets/tabBar/shopping-select.png},{pagePath:pages/record/index,text:发布,iconPath:/assets/tabBar/publish.png,selectedIconPath:/assets/tabBar/publish-select.png},{pagePath:pages/shoppingCart/index,text:购物车,iconPath:/assets/tabBar/shoppingcart.png,selectedIconPath:/assets/tabBar/shoppingcart-select.png},{pagePath:pages/my/index/index,text:个人中心,iconPath:/assets/tabBar/my1.png,selectedIconPath:/assets/tabBar/my1-select.png}]},三上传组件实现图片/文件上传预览、上传数量限制、大小限制、删除、点击之后列表查看1、效果图上传数量限制点击预览删除大小限制2、js代码借助的是微信小程序开发工具的缓存路径的代码返回的微信小程序图片路径进行预览下面第三个才是回调自己的上传接口进行预览操作我会再写一篇关于阿里云对象存储的文章帮助大家实现/**上传文件 */afterRead(event){letthatthis;const{file}event.detail;console.log(file,file);// 此处借助的是微信小程序开发工具的缓存路径wx.getFileSystemManager().saveFile({tempFilePath:file.url,// 临时文件路径success(res){// 保存文件成功后将文件的本地路径添加到 imageCoverPath 数组中constsavedFilePathres.savedFilePath;constnewImage{url:savedFilePath,isImage:true,}constimageCoverPaththat.data.imageCoverPath;imageCoverPath.push(newImage);that.setData({imageCoverPath:imageCoverPath});console.log();},fail(err){// 保存文件失败的处理console.log(保存文件失败,err);}});},/**删除文件 */deleteFile(event){const{index}event.detail;// 获取要删除的文件索引constimageCoverPaththis.data.imageCoverPath;imageCoverPath.splice(index,1);// 从数组中移除指定索引的文件this.setData({imageCoverPath:imageCoverPath// 更新数据});},/**预览图片 */previewImage(event){// 获取点击的图片索引const{index}event.detail;// 获取当前图片的预览路径constcurrentthis.data.imageCoverPath[index];// 预览图片console.log(预览图片,current,event.detail.index,this.data.imageCoverPath);wx.previewImage({current:current,// 当前显示图片的链接urls:this.data.imageCoverPath// 所有图片的链接数组});},/**方法通用 *//**上传前校验 */beforeRead(event){const{file,callback}event.detail;callback(file.typeimage);if(file.type!image){wx.showToast({title:请上传图片,})}},/**文件尺寸过大 */overSizeI(){wx.showToast({title:尺寸过大,icon:error})},3、上传的重要代码替换了借助的是微信小程序开发工具的缓存路径的代码部分afterRead(event){letthatthis;const{file}event.detail;consttokenwx.getStorageSync(token);console.log(file,file,token,token);// 设置请求头部信息constheader{token:token,};// 上传图片wx.uploadFile({url:app.globalData.baseAPI/api/wx/student/file/upload,// 服务器地址filePath:file.tempFilePath,// 图片的路径name:file,// 文件对应的 key开发者在服务器端通过这个 key 可以获取到文件formData:{// HTTP 请求中其他额外的 form datauser:test},header:header,success:function(res){// 服务器成功响应处理if(res.statusCode200){vardatares.data;// 服务器返回的数据console.log(data);// 在这里处理服务器返回的数据例如解析JSONvarjsonDataJSON.parse(data);if(jsonData.code1){// 保存文件成功后将文件的本地路径添加到 imageCoverPath 数组中constsavedFilePathjsonData.response;constnewImage{url:savedFilePath,isImage:true,}constimageCoverPaththat.data.certificate;imageCoverPath.push(newImage);that.setData({certificate:imageCoverPath});}else{wx.showToast({title:发布失败,icon:error,})}}},fail:function(error){// 请求失败处理wx.showToast({title:上传失败,icon:none,})console.error(uploadFile fail,error);}});},4、页面代码viewstylemargin-top:20px;background-color:white;van-fieldlabel车辆图片(正、后、左、右方)/描述requiredtitle-width500rpxreadonly/van-fieldviewstylemargin-left:2%;margin-right:2%;van-uploaderfile-list{{ imageCoverPath }}acceptimagemax-count4use-before-readtruedeletable{{ true }}preview-size120pxupload-text上传4M以内的图片bind:deletedeleteFilebind:before-readbeforeReadpreview-imagetruebind:after-readafterReadbind:click-previewpreviewImagebind:oversizeoverSizeIcapturecameramax-size4194304//view/view四图片预览1、使用vant组件van-image1js代码/**点击图片显示预览 */previewImage(e){console.log(e,e.currentTarget);constcurrentSrce.currentTarget.dataset.src;consturlsthis.data.releaseSheBeiRentalInfo.imageCoverPath;// releaseDetailsInfo.certificate是一个包含所有图片URL的数组wx.previewImage({current:currentSrc,// 当前显示图片的链接urls:urls// 需要预览的图片链接列表});},2html代码viewstylebackground-color:white;viewstylefont-weight:bold;margin:0 0 20rpx 30rpx;padding-top:30rpx;前后左右照片/viewviewwx:for{{releaseSheBeiRentalInfo.imageCoverPath}}wx:keyindexstyledisplay:flex;flex-direction:column;line-height:1.5;align-items:center;justify-content:center;padding:20rpx;van-imagewx:if{{item}}width620rpxheight400rpxfitfillsrc{{item}}data-src{{item}}lazy-loadbind:clickpreviewImage//view!-- view wx:if{{releaseSheBeiRentalInfo.imageCoverPath0}} wx:keyindex styledisplay: flex;flex-direction: column;line-height: 1.5;align-items: center;justify-content: center;padding: 20rpx; view width620rpx height400rpx text stylecolor:#ccc;未上传照片/text /view /view --/view2、使用imageimagestylewidth:100%;height:200rpx;bind:tappreviewImagedata-src{{item}}fitfillsrc{{item}}/