基于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-image
        • (1)js代码
        • (2)html代码
      • 2、使用image

食用本篇文章的前提是你引入了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}}" />

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/685279.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Adobe Photoshop PS 25.6.0 解锁版 (最流行的图像设计软件)

前言 Adobe Photoshop 是一款专业强大的图片处理工具&#xff0c;从照片编辑和合成到数字绘画、动画和图形设计&#xff0c;一流的图像处理和图形设计应用程序是几乎每个创意项目的核心所在。利用 Photoshop 在桌面上的强大功能&#xff0c;您可以在灵感来袭时随时随地进行创作…

Redis的数据类型及使用场景

redis命令大全官网: Commands | Docs (redis.io) 基本介绍 redis起初主要就是为了解决性能问题的&#xff0c;那么redis为什么快? 基于内存操作的&#xff0c;所以操作不需要跟磁盘进行交互&#xff0c;单次的执行会很快 命令执行是单线程 因为基于内存操作 单次执行时间反…

数据库调优-连接池优化

先贴下连接池的相关配置&#xff1a; 连接池参数配置&#xff1a; 字段含义Max Number of Connections最大连接数&#xff1b;做性能测试时&#xff0c;可以填 0 。在开发的项目中按实际代码填写&#xff0c;默认是 20 。Max Wait(ms)在连接池中取回连接最大等待时间&#xf…

ECO 视频分类模型

ECO分类模型 ECO 分类模型&#xff0c;可以对视频进行分类&#xff0c;视频是静止画面的集合&#xff0c;并短时间内进行播放&#xff0c;在人眼中形成了视频&#xff0c;通过 FPS 单位进行计算&#xff0c;指的是每秒显示多少张图片。如果直接把图片组合一张大图&#xff0c;…

第十三届蓝桥杯决赛(国赛)真题 Java A 组【原卷】

文章目录 发现宝藏【考生须知】试题 A: 火柴棒数字试题 B: 小蓝与钥匙试题 C: 内存空间试题 D: 斐波那契数组试题 E: 交通信号试题 F: 数组个数试题 G: 六六大顺试题 H : \mathrm{H}: H: 选素数试题 I: 图书借阅试题 J \mathrm{J} J : 括号序列树 发现宝藏 前些天发现了一个…

苹果公司因iPad广告争议而道歉,承认“未达标”|TodayAI

周二&#xff0c;苹果公司发布了一则新的iPad Pro广告&#xff0c;引起了广泛争议&#xff0c;该公司随后发表道歉声明&#xff0c;承认这则广告“未达标”。这则名为“压碎&#xff01;”的广告意图展示全新的M4芯片iPad Pro的创意潜力&#xff0c;但却因其表现方式而备受批评…

基于FPGA的数字信号处理(8)--RTL运算的溢出与保护

前言 在做加、减、乘、除等运算时&#xff0c;经常会发生 溢出 的情况。比如1个4bits的计数器&#xff08;每个时钟累加1&#xff09;&#xff0c;在4’b1111 1 后&#xff0c;原本其期望值应该是 151 即16&#xff0c;但是4bits的寄存器能表示的最大值只是4‘b1111即15&…

进一步解读英伟达 Blackwell 架构、NVlink及GB200 超级芯片

2024年3月19日&#xff0c;英伟达CEO黄仁勋在GTC大会上公布了新一代AI芯片架构BLACKWELL&#xff0c;并推出基于该架构的超级芯片GB200&#xff0c;将助推数据处理、工程模拟、电子设计自动化、计算机辅助药物设计、量子计算和生成式 AI 等领域。 为了纪念杰出的数学家David H…

H5一键关注微信公众号或打开进入公众号页面

登录自己的公众号&#xff0c;写文章。 第一步&#xff1a;插入链接 第二步&#xff1a;公众号文章链接 输入要跳转的公众号名称&#xff0c;点击搜索。 第三部&#xff1a;选择任意一篇文章 确定&#xff0c; 会得到公众号文章链接 第四部&#xff1a;点击进去 将这个文…

2024年记一次Mingw64-13.2.0编译Qt6.6.3,包含文档编译。

My C Development. 前言&#xff1a;不包含qtwebengine。 一、准备文件 &#xff08;1&#xff09;mingw64-13.2.0 下载链接&#xff1a;&#xff0c;ucrt64_13.2_ucrt_posix_rev6_msys2.7z【蓝奏云】。 &#xff08;2&#xff09;qt6.6.3源码 下载链接&#xff1a;Downlo…

使用 Gitea 进行私有 Git 仓库管理

在本文中&#xff0c;我们将介绍如何使用 Gitea 搭建并管理私有 Git 仓库。Gitea 是一个轻量级的 Git 服务&#xff0c;提供了类似于 GitHub 的功能&#xff0c;适合个人和小团队使用。我们将通过以下步骤来完成搭建和配置 Gitea 服务器。 步骤一&#xff1a;安装 Gitea 首先…

【论文阅读】<YOLOP: You Only Look Once for PanopticDriving Perception>

Abstract 全视驾驶感知系统是自动驾驶的重要组成部分。一个高精度的实时感知系统可以帮助车辆在驾驶时做出合理的决策。我们提出了一个全视驾驶感知网络&#xff08;您只需寻找一次全视驾驶感知网络&#xff08;YOLOP&#xff09;&#xff09;&#xff0c;以同时执行交通目标检…