- 博客(50)
- 收藏
- 关注
RSS订阅原创 Vue3中使用Pinia
订阅回调函数有两个参数 ，第一个是 mutations 参数，这个参数的events属性携带着变更前的值和变更后的值，但这个属性只有在开发环境下存在，生产环境下不存在。订阅的第二个参数是 state，这个参数包含 store 中的数据。6、Pinia 没有mutations，相应的工作都在actions中完成，而且actions直接支持异步函数。以这种方式更新 store 里的数据，不利于复用数据更新的逻辑，接下来我就介绍可以复用数据更新逻辑的方案。1、Pinia 性能优于 Vuex。
2022-12-14 17:04:27
1316
原创 HTML常用实体字符
在我们开发中难免会遇到一些特殊符号，语言的保留符号，为了不起冲突或者歧义所以我们会使用这些符号的字符来表示，下面是一些常用的符号
2022-12-07 17:26:35
745
原创 vue的计算属性(computed)
概念计算属性是vue里面为了简化在模板语法中对响应式属性做计算而存在的一个属性我的理解是可以同时监听多个响应式属性变化的监听器为了避免复杂逻辑重复出现在模板中使用同一个案列进行实验什么时候应该使用计算属性根据现有响应式的值得到一个新的值。......
2022-08-25 21:56:23
976
原创 vue3项目新用户引导组件(driver.js)
好用的用户引导插件有 intro.js 和 driver.js 两个，对比了一下，最终还是使用了driver.js。因为项目中使用时没有其他的要求 够用就行，后期如果有其他的要求可以再修改，嘿嘿。因为多个地方需要使用引导，就直接做成组件使用。"点此处可获取一些本站的相关说明""点击这里可获取我们的相关信息""本站首页是一些展示性的信息"项目使用的是vue3+ts。
2022-08-19 14:16:35
2426
6
原创 记录：富文本图片显示问题
情景：微信小程序里面有一个富文本显示，两条数据前一条显示出来图片，后面的没有显示图片，图片操作相同，在后台查看可以看到图片经检查：两张图片的域名相同原因：在两张图片上传中间服务器更换过域名，但是富文本图片拼接时使用的域名没有改变，都是使用老域名，而第一张图片在老域名服务器上是存在的，后面上传的图片是在新域名服务器，所以显示不出来...
2021-11-04 10:03:19
380
1
原创 腾讯云点播视频播放器使用步骤 uniapp
微信开发后台首先需要微信小程序的账号，各种认证，信息填写完整，然后–>设置–>第三方设置–>插件管理–>添加插件–>搜索云点播短视频播放器–>添加插件项目开发在page.json文件中的globalStyle下面加入 "usingComponents": { // #ifdef MP-WEIXIN "my-player": "plugin://myPlugin/player" // #endif }在manifest.json
2021-10-27 15:49:04
4160
3
原创 对于js中“节流“、“防抖“的理解
背景在前端开发中有一部分用户行为会频繁的触发事件执行，而对于DOM的操作、资源加载等耗费性能的处理，很可能会导致界面卡顿，甚至浏览器奔溃。函数的节流与防抖就是为了解决类似需求而产生的所以，这是前端性能优化的重点手段节流防抖的作用：防止用户频繁点击发送请求导致程序出现问题减轻浏览器的负担，优化用户体验防止恶意操作防止浪费请求资源什么是节流个人理解：是为了合理分配资源，限制资源请求频率，原理：在一定时间内，只能触发一次概念： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的
2021-10-26 17:37:28
148
原创 uniapp 微信小程序自定义导航栏（拿来即用）
html部分 <view class="header-fixed"> <!-- 状态栏占位 --> <view class="status_bar" :style="'height:' + tophight.top + 'px;'"></view> <!-- 导航栏文字 --> <view class="navs-view"> <view class="navs-image" :style="
2021-10-19 14:11:13
1134
原创 文字只显示两行，超出显示...
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/overflow: hidden; /* 超出隐藏 */text-overflow: ellipsis; /* 超出部分省略号 */word-break: break-all; /* break-all(允许在单词内换行。) */-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/-webkit-line-clamp: 2; /** 显示的行数 *
2021-08-19 10:08:08
327
原创 HTML特殊符号
（ ）空格符： （< ）小于号: <（>）大于号： >（&）和：&（©）版权： ©（￥）人民币：&rem;（®）注册商标：®（℃）摄氏度：℃（英文）、°（中文）;（±）正负号：±（×）乘号：&itmes;（÷）除号：÷（2）二次方（上标）：²（3）三次方（商
2021-06-02 10:47:06
298
原创 uniapp图片组件（加载失败或者没有图片地址显示默认图片，含有点击图片预览功能）
imgbox.vue<template> <image :src="ImgSrc" :mode="eMode" @click="PreviewImg(ImgSrc)" @error="ErrSrc"></image></template><script> import { TanPreviewImage } from '@/utils/imageTools.js'; export default { name:"ImgBox
2021-04-23 16:51:18
4252
原创 uniapp版本升级记录（整包升级，wgt资源升级）
本文章是基于升级中心 uni-upgrade-center - Admin 和升级中心 uni-upgrade-center - App两个插件完成的，特此感谢！下面记录一下在使用插件时的一些注意点：升级中心分为Admin和App两部分，先创建Admin项目，App部分是直接导入到自己的前端项目中就行1 添加检查提示2更换提示框背景图片3在app.vue里面引入import appUpdate from "@/uni_modules/uni-upgrade-center-app/utils/ch
2021-04-22 19:12:09
2817
原创 uniapp刷新当前页面
template部分<view class="btn"> <text @click="RedirectPage(item.Id)">查看详情</text></view>methods部分RedirectPage(id){ uni.setStorageSync("ProductionTaskId",id); uni.navigateTo({ url:"/pages/ProductionTask/ProductionTaskDetails2/P
2021-04-11 22:02:36
14180
原创 uniapp二维码识别
uni.scanCode({onlyFromCamera: true, success: function (res) { console.log('条码类型：' + res.scanType); console.log('条码内容：' + res.result); // 跳转提示页面==>请求数据(成功)==>显示数据;(失败)=>返回工作页面 plus.runtime.openURL(res.result); }});...
2021-02-22 16:48:43
2885
原创 uniapp中APP端图片转base64格式上传
import { pathToBase64, base64ToPath } from '../../utils/imageTools.js';pathToBase64(tempFilePaths).then(base64 => { // console.log("转换成功==>",base64) that.imgList = base64; that.upLoad(that.imgList); }) .catch(error => { console.error(
2021-01-22 17:07:32
4087
3
原创 uniapp发送验证码倒计时
<view class="sendCode"> <button size="mini" :disabled="btnDis" @tap="sendCode">{{btnText}}</button></view>btnDis: false,// 发送验证码按钮不禁用btnText: "发送验证码",// 提示// 发送验证码async sendCode() { //手机号校验 /*........*/ // 手机号没问题时发送验证码
2021-01-21 17:07:16
1270
3
原创 uniapp应用页面
<template> <view class="content main"> <view class="search-bar"> <input type="text" value="" placeholder="请输入应用关键字" /> </view> <view class="app-list"> <view class="side-bar"> <view class="item"
2021-01-20 16:22:57
539
1
原创 js复习---找出字符串中出现最多的字母
不废话，上代码，可以直接运行<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>找出字符串中出现次数最多的字母</title> <link rel="short icon" type="images/x-icon" href="/" /> </head> <body> <input type="t
2020-12-19 18:07:03
518
1
原创 微信小程序学习笔记----全局配置（app.json 文件）
全局配置小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：配置项属性 类型 必填 描述和最低版本支持entryPagePath string 否 小程序默认启动首页 pages string[] 是 页面路径列表 window Object 否 全局的默认窗口表现 tabBar Object 否 底部 tab 栏的表现 networkTimeout Object
2020-12-02 17:16:25
1649
原创 微信小程序---父子组件间传值
父子组件传值分为父传子和子传父两种情况1.父传子(直接传)2.子传父(父亲需要问一下)首先需要有父组件与子组件两个组件1父组件为正常页面,2子组件要放到components文件夹里面,3其次要在父组件的.json文件中注册子组件信息:"usingComponents": { "child":"../components/child/child" //名字:地址 }4然后再父组件的.wxml文件中写子组件的出口<child></child>要
2020-12-02 16:32:21
277
原创 Angular父子组件间的传值
1父组件向子组件传值import { Component, Input, OnInit } from '@angular/core';@Input() msg;msg="新闻栏目"<app-home [msg]="msg"></app-home><div>{{msg}}</div>2子组件向父组件传值import { Component, Output,EventEmitter, OnInit } from '@angular/cor
2020-11-24 16:14:06
337
原创 jQuery选择器复习
基本选择器 $("#id")id选择器 $(".class")类选择器 $("div")标签选择器 $("*")通配符选择器 $("div,span")并集选择器层次选择器 $("div span")先祖选择器 $("div>span")父子选择器 $("div+span")div紧跟着的span $("div~span")div之后的所有span过滤选择器基本过滤选择器 $("div:first")过滤选择器(所有的div中的第
2020-11-21 15:54:15
147
原创 vue学习笔记9-表单数据双向绑定
案例1–表单数据绑定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单数据绑定</title> <style type="text/css"> </style> <script src="../js/vue-v2.6.12.js" type="text/javascript" charset="utf-8"&g
2020-10-27 13:48:20
248
原创 vue学习笔记7-事件修饰符
vue中事件修饰符有6个 ：.stop .prevent .capture .self .once .passive在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。.stop阻止冒泡事件.preve
2020-10-27 11:18:01
376
1
原创 纯CSS+HTML实现3D立方体轮播图
1.实现点击左右按钮，点击图片下方圆点都可以使立方体旋转到对应面，实现了不同图片的展示2.主要技术：HTML元素的先后顺序，css的旋转，radio标签和lable标签的使用，transform-style: preserve-3d;，transition: all 3s;，transform: rotateY(0) translateZ(200px);，效果如图：代码如下：<!DOCTYPE html><html> <head> <meta cha
2020-09-14 22:41:01
2444
原创 CSS3动画+js实现气泡按钮
1，实现了一个可以点击产生气泡特效的按钮如图所示：2使用到的技术有CSS3动画，背景图片设置，伪类选择器和伪元素的使用，元素的缩放，元素类名的添加与去除等等具体如何操作见代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>气泡按钮</title> <style type="text/css"> /*样式初始化,去除轮廓
2020-09-14 21:24:38
1182
原创 css3+js实现时钟特效
1.实现了时钟的特效，可以转动，时间准确，画面美观大气；2.用到了css3的transform: rotate，transform-origin:,伪元素，border-radius，定位，z-index等等效果如图：代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3时钟特效</title> <link rel="sh
2020-09-11 21:19:25
464
原创 用纯CSS+HTML实现图片点击切换背景
1.实现了点击圆图片，切换对应的背景图片2.主要技术：css3的背景设置，边框圆角，定位，盒模型，选择器，浮动，锚点，由:target实现切换一、效果图如下二、代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>图片背景切换</title> <link rel="shortcut icon" type="image/x-ic
2020-09-10 19:21:57
9711
2
原创 js+canvas的像素操作的练习
1.练习一<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>像素处理</title> <style type="text/css"> * { margin: 0; padding: 0; } #mycanvas { margin: auto; background-color: b
2020-09-09 19:50:48
587
原创 js+canvas实现刮刮奖
1，实现了PC端的刮刮奖效果2.使用了canvas的文本，像素操作，合成，绘制图形，随机数<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>刮刮奖</title> <style type="text/css"> * { margin: 0; padding: 0; } .box { wi
2020-09-09 19:46:25
263
原创 js+video实现视频播放
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>视频案例</title> </head> <body> <video width="" height="" autoplay controls loop="loop" poster="img/lbt3_img1.jpg"> <source src="
2020-09-08 20:33:12
3491
原创 js+audio实现音乐播放器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>音乐播放器</title> <link rel="shortcut icon" type="image/x-icon" href="img/an.ico"/> <link rel="stylesheet" type="text/css" href="css/music_Play.c
2020-09-08 20:30:54
1476
2
原创 使用百度地图api实现地理定位
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {
2020-09-08 20:15:58
666
原创 jQuery+ajax实现用户登录验证
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>登录界面</title> <style type="text/css"> *{ margin: 0; padding: 0; } h3{ display: block; width: 100%; height: 50px; te
2020-09-08 20:12:28
1894
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人