基于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.mzph.cn/web/9941.shtml

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

相关文章

vue项目设置主题色

在vue开发过程中&#xff0c;很多页面为了保持主题颜色统一&#xff0c;且方便后期管理&#xff0c;通常会设有主题色&#xff0c;通过主题色可以使得页面上的按钮单选框等控件保持颜色统一。 接下来介绍其中一种方法&#xff1a; 1.先建立一个js文件用于存放主题色&#xff…

我觉得POC应该贴近实际

今天我看到一位老师给我一份测试数据。 这是三个国产数据库。算是分布式的。其中有两个和我比较熟悉&#xff0c;但是这个数据看上去并不好。看上去第一个黄色的数据库数据是这里最好的了。但是即使如此&#xff0c;我相信大部分做数据库的人都知道。MySQL和PostgreSQL平时拿出…

Spark Streaming笔记总结(保姆级)

万字长文警告&#xff01;&#xff01;&#xff01; 目录 一、离线计算与流式计算 1.1 离线计算 1.1.1 离线计算的特点 1.1.2 离线计算的应用场景 1.1.3 离线计算代表技术 1.2 流式计算 1.2.1 流式计算的特点 1.2.2 流式计算的应用场景 1.2.3 流式计算的代表技术 二…

最小生成树刷题笔记

算法基础&#xff1a; 首先是prim算法三部曲&#xff1a; &#xff08;1&#xff09;找到距离最小生成树最近的节点。 &#xff08;2&#xff09;将距离最小生成树最近的节点加入到最小生成树中。 &#xff08;3&#xff09;更新非最小生成树节点到最小生成树的距离。 实现…

HTML批量文件上传3—Servlet批量文件处理FileUpLoad

作者:私语茶馆 1.开源的文件上传组件介绍 本文使用的是Apache Commons下面的一个子项目FileUpload,另外一个常见组件是SmartUpload。FileUpload遵循RFC 1897,即“Form-based File Upload in HTML”,对于请求需要满足:HTTP协议,Post请求,content Type=“multipart/form-d…

Kafka 面试题(五)

1. kafka的消费者是pull(拉)还是push(推)模式&#xff0c;这种模式有什么好处&#xff1f; Kafka的消费者是pull&#xff08;拉&#xff09;模式。在这种模式下&#xff0c;消费者主动从Kafka的broker中拉取数据来进行消费。 这种pull模式的好处主要体现在以下几个方面&#…

人工智能是什么

人工智能是一个广泛的领域&#xff0c;其中包括了机器学习和深度学习。 - 机器学习&#xff1a; 是人工智能的一个子领域&#xff0c;它关注的是让计算机系统通过学习数据&#xff0c;从中获取知识并做出预测或决策&#xff0c;而无需明确地编写特定的规则。机器学习的方法包括…

kernel32.dll丢失要如何解决?电脑kernel32.dll文件下载方法

kernel32.dll丢失要怎么解决才好&#xff1f;其实针对这个问题还是有很多种的解决方法的&#xff0c;只要你明白了kernel32.dll的作用&#xff0c;了解kernel32.dll&#xff0c;那么就可以有很多种方法去解决&#xff0c;下面一起来看看吧。 一.了解kernel32.dll文件 kernel32…

6个超TM好用的神仙App推荐!

1. AI文本视频生成工具——Jurilu Jurilu 是一款功能强大的 AI 文本视频生成器&#xff0c;允许用户快速将文本内容转换成极具吸引力的视频。它的使用非常简单&#xff1a;只需要输入文字&#xff0c;选择想要的样式和模板&#xff0c;Jurilu 就会自动将文字转换成生动的视频。…

Vue项目npm install certificate has expired报错解决方法

1.Vue项目 npm install 安装依赖突然报错&#xff1a; npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/zrender/download/zrender-4.3.0.tgz failed, reason: certificate has expired npm ERR! A com…

代码随想录-算法训练营day35【贪心算法05:无重叠区间、划分字母区间、合并区间】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第八章 贪心算法 part05● 435. 无重叠区间 ● 763.划分字母区间 ● 56. 合并区间 详细布置 今天的三道题目&#xff0c;都算是 重叠区间 问题&#xff0c;大家可以好好感受一下。 都属于那种看起来好复杂&#xff…

AI预测福彩3D+排3实战化赚米验证第6弹2024年5月10日第6次测试

由于最近几天会比较忙&#xff0c;空闲时间较少&#xff0c;为了尽快的发布预测结果&#xff0c;今天继续把3D和排3合并至一篇文章进行发布。好了&#xff0c;直接上结果吧&#xff5e; 1.5月10日3D预测结果 百位&#xff1a;4、5、6、3、1、0 十位&#xff1a;4、2、5、7、…

一个可以同时使用USB和WIFI传输文件到电脑的软件

双轨快传 结合USB2.0和WIFI6技术&#xff0c;通过1000Mbps网口实现每秒高达150MB的传输速率&#xff08;理论上可达40MB/s通过USB和110MB/s通过WIFI&#xff09;。 使用 模式 支持普通模式和Root模式&#xff0c;Root模式可访问~/Android/data/与/data/data/目录下的文件。 …

ETL-kettle数据转换及组件使用详解

目录 一、txt文本转换成excel 1、新建、转换 2、构建流程图 3、配置数据流图中的各个组件 3.1、配置文件文本输入组件 3.2、 配置Excel输出组件 4、保存执行 二、excel转换成mysql &#xff08;1&#xff09;在MySQL数据库中创建数据库&#xff0c;这个根据自身情况。我…

一文了解spring的aop知识

推荐工具 objectlog 对于重要的一些数据&#xff0c;我们需要记录一条记录的所有版本变化过程&#xff0c;做到持续追踪&#xff0c;为后续问题追踪提供思路。objectlog工具是一个记录单个对象属性变化的日志工具,工具采用spring切面和mybatis拦截器相关技术编写了api依赖包&a…

机器学习实战宝典:用scikit-learn打造智能应用

书接上文——《数据探险家的终极指南&#xff1a;用Python挖掘机器学习的奥秘》 前文我们在这段精彩的机器学习探险之旅中&#xff0c;从基础概念出发&#xff0c;深入探索了使用Python和scikit-learn库进行数据分析和模型构建的全过程。 我们首先了解了机器学习的基本原理&am…

Mysql 锁

锁 从锁的性能有乐观锁和悲观锁&#xff1b;锁的粒度有行锁、页锁、表锁&#xff1b;锁的对数据库操作类型有读锁、写锁、意向锁 乐观锁&#xff1a;采用cas机制&#xff0c;不会阻塞数据库操作&#xff0c;只会针对当前事务进行失败重试。(用于写操作不多的情况)悲观锁&…

[c++]多态的分析

多态详细解读 多态的概念多态的构成条件 接口继承和实现继承: 多态的原理:动态绑定和静态绑定 多继承中的虚函数表 多态的概念 -通俗的来说&#xff1a;当不同的对象去完成某同一行为时&#xff0c;会产生不同的状态。 多态的构成条件 必须通过基类的指针或者引用调用虚函数1虚…

【C++刷题】优选算法——递归第一辑

什么是递归&#xff1f; 函数自己调用自己的情况为什么会用到递归&#xff1f; 本质&#xff1a;在解决主问题的时候衍生出一个相同处理过程的子问题&#xff0c;子问题再继续衍生子问题…如何理解递归&#xff1f; 第一层次的理解&#xff1a;递归展开的细节图第二层次的理解&…

C语言/数据结构——(链表的回文结构)

一.前言 今天在牛客网上刷到了一道链表题——链表的回文结构https://www.nowcoder.com/practice/d281619e4b3e4a60a2cc66ea32855bfa?&#xff0c;巧合的是它的解题思路恰好是我们一起分享过两道链表题的汇总。这两道题分别是反转链表和链表的中间节点。废话不多数&#xff0c…