- 博客(26)
- 收藏
- 关注
RSS订阅原创 vue3中对websoket的二次封装，拿来即用
封装的重点是响应式状态管理、自动重连、心跳检测、消息队列、生命周期管理和易用性。通过Composition API将这些功能模块化，方便在Vue3组件中复用。1、在 Vue3 中对 WebSocket 进行封装时，可以利用 Composition API 实现更优雅的封装。2、使用示例。
2025-04-10 17:34:44
343
原创 npm 安装 pnpm 问题记录
windows 打开 cmd 后 安装 npm install -g pnpm 后，运行 pnpm -v 能检测到版本， 说明安装成功，在vscode 运行pnpm 不被识别，是因为权限问题。
2024-10-30 09:31:06
261
1
原创 js获取前一天和后一天
/ console.log(timeStamp,"这是转换的时间戳") // 1660579200000 转回去是2022-08-16 00:00:00。console.log(yy + '年' + mm +"月" + dd+ "日","9999")this.CurrentRescue() // 更改时间后 刷新环形图 和柱状图。return yy + '年' + mm +"月" + dd+ "日"return yy + '年' + mm +"月" + dd+ "日"// 得到上一天和下一天。
2023-05-16 17:10:54
746
原创 web项目调用qq临时会话功能实现方法
实现思路在Web开发中，启动QQ来临时会话，可以通过一个URL链接使用<a>标签实现跳转访问：uin字段接收一个临时会话的客服qq号。<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=此处放置需要联系的QQ号(如：2512442361)&site=qq&menu=yes" rel="external nofollow" >启动QQ</a> // 正常访问的地址：&
2022-04-02 14:18:53
1724
原创 分享海报的组件用canvas标签画
<template> <view> <uni-popup ref="sharePopup" type="center" background-color="#55aa7f"> <view class="imagePathBox"> <!-- 生成的海报图 --> <view class="max_canvas"> <view class="canvas_box" style="width...
2021-12-06 13:45:52
347
原创 pc端的富文本数据展示：需要做哪些处理
<template> <div class="JournalismDetail_BOX"> <!-- 新闻资讯 --> <div class="Journalism_heard"> <img src="../../assets/news_banner@2x.png" /> </div> <div class="JournalismDetail_box"> ...
2021-11-20 16:51:14
889
原创 uniapp小程序的富文本解析页面展示：
// 活动介绍<view class="activity_introduce"> <view class="top_box"> <view class="top_box_circle"> <view class="min_circle_1"></view> <view class="min_circle_2"></view> </vie...
2021-11-20 16:36:07
2286
原创 小程序的图片base64图片的处理：页面显示和下载
页面显示：显示情况1（后端处理好的）：如果页面显示时，后端已经生成图片base64文件流格式，则直接赋值给image的src属性做绑定，就能进行对应的展示。显示情况2（后端未处理的）：如果页面显示时，后端生成的图片不是base64文件流格式，则需要手动（后端如果返回的时文件访问路径，那么需要在返回的文件路径最前面拼接（“data:image/png;base64,”）进行转化后赋值给image的src属性做绑定，就能进行对应的展示。页面下载：下载情况1（后端处理好的）：如果页面下载...
2021-11-20 15:51:02
2030
原创 uniapp小程序预览多张图片
<view class="bottom_box"> <view class="enclosure_box" v-if="activityData.attachmentTemplateList.length > 0"> <view class="enclosure_item" v-for="(item, index) in activityData.attachmentTemplateList" :key="index">...
2021-11-19 10:52:24
718
原创 uniapp小程序跳转第三方直播网络页面的实现方式
利用<web-view src="https://v.qq.com/"></web-view> 标签的特性，它能打开移动web端进行浏览 案例如下： <!-- 跳转到腾讯会议 --> <web-view v-if="liveShow" :src="liveAddress"></web-view>js实现逻辑 data() { return { liveShow: false ,// 是否...
2021-11-19 10:34:21
2691
原创 uniapp 的图片下载功能并加了防抖函数处理
<view class="business_card_box"> <view class="business_card_name">活动对接人名片</view> <view class="business_content_box"> <view class="business_left_box"> <view class="business_leftimg_box"><ima...
2021-11-19 09:30:38
135
原创 小程序中实现图片不停旋转的效果，如正在加载中...
<!-- 加载中 --> <view class="Loading_box"> <view class="Loading_img_box"><image class="Loading_img" src="../../static/activity/roll@2x.png" mode=""></image></view> <view class="Loading_tisp_content"&...
2021-10-19 10:54:26
1039
原创 vue项目打包到上线
1、开发环境到生产环境的转变项目开发结束之后，首先我们需要通知后端，获取一个线上的路径，之后将之前的开发路径切换为线上路径。打开项目中config文件夹里面的 dev.env.js 文件。'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, { NODE_ENV: '"development"',
2021-09-28 10:52:16
200
原创 vue 项目中关闭弹窗后使video实现视频暂停播放
通过ref的使用得到video标签身上的属性及方法，然后加以控制，就实现了，最好在本地文件放一个小视频进行测试实现思路： html代码 <video :src="videoUrl" controls="controls" style="width:400px;height:400px;" ref="vueRef"></video>javaScript的代码：this.video_url='视频源url地址'判断是否暂停状态返回true false 如下：t
2021-08-06 11:10:38
8211
7
原创 利用CSS改变图片颜色的多种方法！
前言“说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。”强大的 CSS:filterCSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。filter: none | blur() | brightness() ...
2021-08-06 10:47:07
7432
原创 tab栏选项多条件搜索及文字两端对齐的实现，自定义封装组件
文字两端对齐和tab多条件选择的自定义封装组件：代码如下：（复制需要点赞????）<template> <div> <!-- 活动中心页面 --> <div class="Cooperative_Unit"> <div class="Condition_search"> <div class="conditions"> <div class="heading
2021-08-04 17:19:06
572
原创 pc端调用qq和微博信息授权 的文档地址，根据文档操作
文档链接地址：QQ API开发文档地址：https://connect.qq.com/sdk/webtools/index.html#get_user_info
2021-08-03 15:28:22
262
原创 底部按钮自动适配任意机型的小程序案例
只看确认按钮部分的代码： 底部适配最主要的 css样式代码是： padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);<template> <view> <!-- 顾问认证输入手机号获取验证码页面 --> <view class=""> <view class="Get_th...
2021-07-31 16:12:39
291
原创 vue-awesome-swiper 如何控制图片居左开始轮播
范德萨f'd这个效果是第一张图从头左边开始轮播，如果要想居中轮播，请去掉，这几个属性：loop、autoplay、。如果要想居中显示 可以把 centeredSlides:false, 设置为true。组件引入方式请看官方文档 ：配置文档：https://swiperjs.com/swiper-api#initialize-swiper效果图文档：https://github.surmon.me/vue-awesome-swiper/swiper组件引入vue项目的，官方文档：https:...
2021-07-28 11:47:51
1603
原创 防抖函数 简易版
<view class="" @click="antiShake">连续触发三秒后再执行</view><script>export default { data() { return { }; }, components: { }, onLoad(option) { }, onShow() {}, methods: { // 防抖函数 antiShake() { let that = this; let timer.
2021-07-23 15:23:34
162
原创 输入6位数验证码的实现原理
<template> <view> <view class="Box"> <view class="Get_the_prize"> <view class="Award_name">输入验证码</view> <view class="Award_input"></view> </view> <!-- 6位验证码第二版开始 --> <v.
2021-07-23 11:58:10
2922
3
原创 解决uniapp小程序下载全部图片的问题
解决uniapp小程序下载全部图片的问题 代码如下：遇到特殊情况： 如果遇到小程序预览时只有开启调试功能才能下载图片，说明你的服务器图片地址有误，要和后端人员确认下载接口的域名地址是否与下载图片的接口是否对应， 希望能帮到大家。插入html代码片<template> <view> <!-- 限时推广页面 --> <view class="TimeLimit_Box"> <view class="TimeLimit_card">
2021-07-23 10:51:32
1566
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人