基于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,一经查实,立即删除!

相关文章

我觉得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 流式计算的代表技术 二…

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…

一个可以同时使用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语言/数据结构——(链表的回文结构)

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

Redis 源码安装和入门介绍

Linux下的redis源码安装 redis介绍 Redis 是一个开源&#xff08;BSD许可&#xff09;的&#xff0c;内存中的数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息中间件。它支持多种类型的数据结构&#xff0c;如 字符串&#xff08;strings&#xff09;&#xff0c;…

智能商品计划系统:引领未来零售业的革新之路

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;和大数据技术已成为推动各行业革新的关键动力。在零售行业中&#xff0c;智能商品计划系统的出现&#xff0c;正逐步改变着传统的商品规划与管理方式&#xff0c;为品牌注入新的活力与竞争力。本文将对智能商…

Java入门基础学习笔记14——数据类型转换

类型转换&#xff1a; 1、存在某种类型的变量赋值给另一种类型的变量&#xff1b; 2、存在不同类型的数据一起运算。 自动类型转换&#xff1a; 类型范围小的变量&#xff0c;可以直接赋值给类型范围大的变量。 byte类型赋值给int类型&#xff0c;就是自动类型转换。 pack…

Android 屏幕适配全攻略(中)-从九宫格到矢量图,揭秘Android多屏幕适配的正确打开方式

在移动互联网时代&#xff0c;无论是小小的手机屏幕&#xff0c;还是大大的平板显示器&#xff0c;Android 应用都必须做到完美适配&#xff0c;给用户以极佳的体验。本文将剖析 Android 多屏幕适配背后的种种技术细节&#xff0c;为您揭开最佳实践的正确打开方式&#xff0c;让…

速卖通ip地址会相互影响吗?如何防止账号关联?

在跨境电商行业&#xff0c;大部分平台都是不允许一个卖家操作多个店铺的&#xff0c;如果被平台检测出账户关联&#xff0c;可能会被封店。在速卖通平台&#xff0c;会通过IP地址来判断是否经营多个账号吗?IP地址会使店铺相互影响吗? 一、速卖通IP地址会关联吗? 首先各位卖…

解决mybatis的配置文件没代码提示的问题

1.将org.apache.ibatis.builder.xml包里的两个dtd文件复制出来&#xff0c;jar包里复制 2.复制dtd的url地址&#xff1a; http://mybatis.org/dtd/mybatis-3-mapper.dtd 一样的做法&#xff01; 3.关闭两个配置文件&#xff0c;重新打开&#xff0c;就可以有代码提示了&…

【智能优化算法】白鲨智能优化算法(White Shark Optimizer,WSO)

白鲨智能优化算法(White Shark Optimizer,WSO)是期刊“KNOWLEDGE-BASED SYSTEMS”&#xff08;中科院一区期刊 IF8.6&#xff09;的2022年智能优化算法 01.引言 白鲨智能优化算法(White Shark Optimizer,WSO)的核心理念和基础灵感来自大白鲨的行为&#xff0c;包括它们在导航和…

从项目开始学习Vue——02(若依框架)

往期&#xff1a; 从项目开始学习Vue——01 目录标题 一、基础插件&#xff08;一&#xff09;路由Vue Router&#xff08;二&#xff09;导航守卫&#xff08;路由拦截器&#xff09;二、Vuex&#xff08;一&#xff09;什么是VuexVuex的部分介绍内容&#xff1a; &#xff08…