基于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);
          // 在这里处理服务器返回的数据，例如，解析JSON
          var 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}}" />

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

SQL注入（sqli-labs第一关）

SQL注入（sqli-labs第一关）

sqli-labs第一关 方法一&#xff1a;手工注入 来到第一关&#xff0c;图上说我们需要一个数字的参数 于是我们先手工注入?id1 and 11 跟?id1 and 12发现页面没有报错 每张截图上面页面中有select查询语句&#xff0c;这是我在第一关的源码中加上了echo "$sql ";…
阅读更多...
Linux下安装mysql8.0（以tar.xz包安装--编译安装）

Linux下安装mysql8.0（以tar.xz包安装--编译安装）

前言&#xff1a;原文在我的博客网站中&#xff0c;持续更新数通、系统方面的知识&#xff0c;欢迎来访&#xff01; Linux下安装mysql8.0&#xff08;以tar.xz包安装--编译安装&#xff09;https://myweb.myskillstree.cn/126.html 目录 一、下载对应自己glic版本的MySQL …
阅读更多...
VS远程调试

VS远程调试

因为是做工厂应用的客制化项目&#xff0c;在客户现场出现异常&#xff0c;本地又很难复现&#xff0c;而且重启软件可能又自动恢复了&#xff0c;此时可以用VisualStudio自带的远程调试功能进行调试&#xff0c;不需要重启软件&#xff0c;能较好的定位问题。客户电脑上不需要…
阅读更多...
上位机图像处理和嵌入式模块部署（树莓派4b和电源供给）

上位机图像处理和嵌入式模块部署（树莓派4b和电源供给）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面&#xff0c;我们说过pc电脑和嵌入式设备&#xff0c;两者都可以实现相同的软件功能。但是和pc相比较&#xff0c;嵌入式设备不仅价格更便宜&a…
阅读更多...
【Java】高效解决 非降序数组合并 两种方法

【Java】高效解决 非降序数组合并 两种方法

欢迎浏览高耳机的博客 希望我们彼此都有更好的收获 感谢三连支持&#xff01; oj&#xff1a;https://leetcode.cn/problems/merge-sorted-array/submissions/ 合并两个有序数组是个经典问题&#xff0c;它不仅在算法学习中频繁出现&#xff0c;也在实际开发中经常遇到。合并数…
阅读更多...
「51媒体」邀请媒体参会报道和媒体发稿有啥不同

「51媒体」邀请媒体参会报道和媒体发稿有啥不同

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体参会报道和媒体发稿是新闻报道的两种不同形式&#xff0c;它们的主要区别在于内容来源、报道方式和目的。 内容来源&#xff1a; 媒体参会报道&#xff1a;通常指的是记者或媒体代…
阅读更多...
【配置】IT-Tools部署

【配置】IT-Tools部署

github地址 docker运行如下&#xff0c;记得打开云服务器的9090端口 docker run -d --name it-tools --restart unless-stopped -p 9090:80 corentinth/it-tools:latestip:9090查看&#xff0c;很香大部分工具都有
阅读更多...
在ＷＨＭ面板中启用两要素验证

在ＷＨＭ面板中启用两要素验证

我使用的Hostease的美国独立服务器产品也购买了cPanel面板&#xff0c;但是发现只要获取服务器密码就可以登陆我的cPanel面板&#xff0c;这种给我的感觉不安全&#xff0c;因此联系Hostease的咨询了Hostease技术支持&#xff0c;寻求帮助了解到可以在cPanel面板中开启安全验证…
阅读更多...
【ZYNQ】Vivado 封装自定义 IP

【ZYNQ】Vivado 封装自定义 IP

在 FPGA 开发设计中&#xff0c;IP 核的使用通常是不可缺少的。FPGA IP 核是指一些已经过验证的、可重用的模块或者组件&#xff0c;可以帮助构建更加复杂的系统。本文主要介绍如何使用 Vivado 创建与封装用户自定义 IP 核&#xff0c;并使用创建的 IP 核进行串口回环测试。 目…
阅读更多...
【高阶数据结构】图--最短路径问题

【高阶数据结构】图--最短路径问题

图--最短路径问题 一、单源最短路径--Dijkstra算法1、简介2、解析3、代码4、测试用例5、打印最小路径代码和测试6、缺陷&#xff1a;不能使用负路径 二、单源最短路径--Bellman-Ford算法1、简介2、解析&#xff08;1&#xff09;详情i、负权问题&#xff1a;一个点只跑一趟找最…
阅读更多...
Git操作GitHub全记录

Git操作GitHub全记录

目录 一. GitHub ssh-key配置二. 添加GitHub仓库Git提交本地代码到Github仓库远程克隆仓库到本地的文件夹再上传本地的无.git的文件夹上传到远程仓库 三. Git删除Github仓库或某个文件或文件夹1.删除已有Github仓库2.删除Github中的某个文件或文件夹①如果没有建立本地库或者克…
阅读更多...
力扣例题（循环队列）

力扣例题（循环队列）

链接 . - 力扣&#xff08;LeetCode&#xff09; 描述 思路 我们使用数组来创建循环队列 数组的大小我们就额外对开辟一块空间 MyCircularQueue(k) 开辟一个结构体&#xff0c;存放队列的相关数据 分别为size,数组指针_a,起始位置head,结束位置tail 注意&#xff1a;我们…
阅读更多...
代码质量检查jacoco环境搭建

代码质量检查jacoco环境搭建

这里主要介绍集成和系统测试覆盖率环境搭建&#xff0c;并简单介绍各个工具。 关于单元测试的覆盖率监控(只需要修改ant或maven配置即可)&#xff0c;下一篇说明 环境准备 需要环境 jdk1.8centos 7posgresql 9.6 工具下载 jacoco 0.8.2 https://www.eclemma.org/jacoco/ a…
阅读更多...
docker01-简介和概述

docker01-简介和概述

什么是docker&#xff1f; 我们现在开发项目是在windows操作系统使用idea开发&#xff0c;本地windows操作系统上有我们项目所需的jdk&#xff0c;mysql&#xff0c;redis&#xff0c;tomcat等环境&#xff0c;如果我们想打包我们的项目到一个别的服务器上&#xff0c;在别的服…
阅读更多...
大模型面试常考知识点2

大模型面试常考知识点2

文章目录 1. LLM推理attention优化技术KV CachePageAttention显存优化MHA\GQA\MQA优化技术FlashAttention优化技术稀疏Attention1. Atrous Self Attention2. Local Self Attention3. Sparse Self Attention 2. LLM数据处理关键去重多样性保证构造扩充数据充分利用数据 参考文献…
阅读更多...
iview(viewUI) span-method 表格实现将指定列的值相同的行合并单元格

iview(viewUI) span-method 表格实现将指定列的值相同的行合并单元格

效果图是上面这样的&#xff0c;将第一列的名字一样的合并在一起&#xff1b; <template><div class"table-wrap"><Table stripe :columns"columns" :data"data" :span-method"handleSpan"></Table></div&…
阅读更多...
Windows Python 安装准备

Windows Python 安装准备

首先安装配置 1. 环境的安装和配置： 运行环境: 官方提供了cpython解释器 编辑环境： 课程初级阶段：推荐大家使用： 记事本工具（UE、notepad++、editplus、sublime、vscode） 中期阶段IDE的使用，pycharm 2. 安装python环境： 在官方下载python解释器 www.python.org …
阅读更多...
AI图书推荐：杀手级ChatGPT提示词——利用人工智能实现成功与盈利

AI图书推荐：杀手级ChatGPT提示词——利用人工智能实现成功与盈利

《杀手级ChatGPT提示词——利用人工智能实现成功与盈利》&#xff08;Killer ChatGPT Prompts_ Harness the Power of AI for Success and Profit &#xff09;一书是作者Guy Hart-Davis关于ChatGPT的指南&#xff0c;ChatGPT是OpenAI开发的大语言模型。这本书提供了各种职业角…
阅读更多...
Appium测试之获取appPackage和appActivity

Appium测试之获取appPackage和appActivity

appPackage和appActivity 进行appium自动化测试非常重要的两个参数&#xff0c;我们所测试的APP不同&#xff0c;这两个参数肯定也是不一样的。那如何快速的获取这APP的这两个参数呢&#xff1f;我这里介绍两个方法。 import org.openqa.selenium.remote.DesiredCapabilities;i…
阅读更多...
Milvus Cloud：打造向量数据库的Airtable级体验

Milvus Cloud：打造向量数据库的Airtable级体验

向量数据库Milvus Cloud是一种用于处理和存储向量数据的数据库，它通常用于机器学习、图像和视频检索、自然语言处理等领域。要将其升级为类似Airtable那样易用且一体化的系统，需要考虑以下几个关键方面： 1. 用户界面(UI)设计 Airtable之所以用户友好，很大程度上归功于其直…
阅读更多...
最新文章

Copyright @ 2022~2023