食用本篇文章的前提是你引入了Vant-UI，自己看如何引入，一定要注意是小程序版，up已經貼心的附上了鏈接：Vant Weapp輕量、可靠的小程序 UI 組件庫

（一）懸浮浮動

1、效果圖：只要無腦引用樣式就可以了

2、頁面代碼

<view class="float-icon" bind:tap="toQiuZhiFaBu"><van-icon name="add" color="#31df80" info="求職發布" size="50px" />
</view>

3、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、頁面代碼

<view style="width: 23%;height: 200rpx;text-align: center;" bind:tap="toWoyaofabu"><view style="width: 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; "></view><text style="font-size: 13px;">我要發布</text>
</view>

4、app.json代碼配置底部導航：tabBar

"tabBar": {"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) {let that = this;const {file} = event.detail;console.log("file=========", file);// 此處借助的是微信小程序開發工具的緩存路徑wx.getFileSystemManager().saveFile({tempFilePath: file.url, // 臨時文件路徑success(res) {// 保存文件成功后，將文件的本地路徑添加到 imageCoverPath 數組中const savedFilePath = res.savedFilePath;const newImage  = {url: savedFilePath,isImage: true,}const imageCoverPath = that.data.imageCoverPath;imageCoverPath.push(newImage);that.setData({imageCoverPath: imageCoverPath});console.log("");},fail(err) {// 保存文件失敗的處理console.log('保存文件失敗', err);}});},/**刪除文件 */deleteFile(event) {const {index} = event.detail; // 獲取要刪除的文件索引const imageCoverPath = this.data.imageCoverPath;imageCoverPath.splice(index, 1); // 從數組中移除指定索引的文件this.setData({imageCoverPath: imageCoverPath // 更新數據});},/**預覽圖片 */previewImage(event) {// 獲取點擊的圖片索引const {index} = event.detail;// 獲取當前圖片的預覽路徑const current = this.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.type === 'image');if (file.type != 'image') {wx.showToast({title: '請上傳圖片',})}},/**文件尺寸過大 */overSizeI() {wx.showToast({title: '尺寸過大',icon: "error"})},

3、上傳的重要代碼：替換了借助的是微信小程序開發工具的緩存路徑的代碼部分

afterRead(event) {let that = this;const {file} = event.detail;const token = wx.getStorageSync('token');console.log("file=========", file,"token",token);// 設置請求頭部信息const header = {'token': token,};// 上傳圖片wx.uploadFile({url: app.globalData.baseAPI+'/api/wx/student/file/upload', // 服務器地址filePath: file.tempFilePath, // 圖片的路徑name: 'file', // 文件對應的 key，開發者在服務器端通過這個 key 可以獲取到文件formData: { // HTTP 請求中其他額外的 form data'user': 'test'},header: header,success: function (res) {// 服務器成功響應處理if (res.statusCode == 200) {var data = res.data; // 服務器返回的數據console.log(data);// 在這里處理服務器返回的數據，例如，解析JSONvar jsonData = JSON.parse(data);if (jsonData.code === 1) {// 保存文件成功后，將文件的本地路徑添加到 imageCoverPath 數組中const savedFilePath = jsonData.response;const newImage = {url: savedFilePath,isImage: true,}const imageCoverPath = that.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、頁面代碼

<view style="margin-top: 20px;background-color: white;"><van-field label="車輛圖片(正、后、左、右方)/描述" required title-width="500rpx" readonly></van-field><view style="margin-left: 2%;margin-right: 2%;"><van-uploader file-list="{{ imageCoverPath }}" accept="image" max-count="4"use-before-read="true" deletable="{{ true }}" preview-size="120px" upload-text="上傳4M以內的圖片" bind:delete="deleteFile" bind:before-read="beforeRead" preview-image="true" bind:after-read="afterRead" bind:click-preview="previewImage" bind:oversize="overSizeI" capture="camera" max-size="4194304" /></view></view>

（四）圖片預覽

1、使用vant組件：van-image

（1）js代碼

 /**點擊圖片顯示預覽 */previewImage(e) {console.log(e,e.currentTarget);const currentSrc = e.currentTarget.dataset.src;const urls = this.data.releaseSheBeiRentalInfo.imageCoverPath; // releaseDetailsInfo.certificate是一個包含所有圖片URL的數組wx.previewImage({current: currentSrc, // 當前顯示圖片的鏈接urls: urls // 需要預覽的圖片鏈接列表});},

（2）html代碼

<view style="background-color: white;"><view style="font-weight: bold;margin: 0 0 20rpx 30rpx;padding-top: 30rpx;">前后左右照片：</view><view wx:for="{{releaseSheBeiRentalInfo.imageCoverPath}}" wx:key="index" style="display: flex;flex-direction: column;line-height: 1.5;align-items: center;justify-content: center;padding: 20rpx;"><van-image wx:if="{{item}}" width="620rpx" height="400rpx" fit="fill" src="{{item}}" data-src="{{item}}" lazy-load bind:click="previewImage" /></view><!-- <view wx:if="{{releaseSheBeiRentalInfo.imageCoverPath===0}}" wx:key="index" style="display: flex;flex-direction: column;line-height: 1.5;align-items: center;justify-content: center;padding: 20rpx;"><view width="620rpx" height="400rpx"><text style="color:#ccc;">未上傳照片</text></view></view> --></view>

2、使用image

 <image style="width: 100%; height: 200rpx;" bind:tap="previewImage" data-src="{{item}}" fit="fill" src="{{item}}" />