自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(163)
  • 收藏
  • 关注

原创 浅谈Chrome DevTools开发的帮助

Chrome DevTools工具对开发过程中的帮助

2022-06-15 11:23:00 1381

转载 浅谈JavaScript内存机制

内存机制

2022-06-08 17:21:50 1166

原创 Vue3_循环数组v-for中使用refs

解决方法参考来源1. 使用背景我在swipe循环的时候,想要获取当前所展示内容的前一个和后一个进行操作。由于vue的版本是3.0,官方文档中曾给出这样的使用实例,将被循环元素动态绑定一个方法,将所获取到的值放在数组中,代码如下:代码简化,只展示有关内容<div v-for="item in arrList"> <div :ref="swipeRef"></div></div>setup() { const myRefs = ref([]

2022-05-06 11:58:11 7446 2

原创 Vue_element-ui 表单校验问题

elment-ui表单校验问题,ts使用方式el-form表单上面绑定ref=‘表单名称’ rules=‘表单规则’ <el-form ref="cateForm" :model="cateForm" :rul

2022-03-31 11:10:35 3097

原创 Angular_初识结构

1. 项目搭建执行npm install -g @angular/cli全局安装angular-cli初始化项目 ng new FAngular进入项目:cd FAngular运行项目: ng serve2. 路由信息可以在src/app/app-routing.module.ts中配置路由信息app-routing.module.tsimport { NgModule } from '@angular/core';import { RouterModule, Routes }

2022-03-19 16:35:44 636

转载 JavaScript_ES6中你需要牢记的那些事

1. let 声明变量let 声明变量与var类似,但略有不同1.1 let声明的变量只在当前let命令所在的代码块有效{ let myName = 'Ably'; var myAge = 22; console.log(myName) // Ably console.log(myAge) // 22}console.log(myName) // 报错 myName is not definedconsole.log(myAge) // 221.2 le

2022-03-16 14:19:20 186

原创 JavaScript_mock接口数据+ajax获取数据内容

最近在进行练习,设想场景,若在开发过程中,后端同学无法及时给到对应接口,前端同学如何自己mock数据并进行后续内容操作。以下是练习的demo:1. mock+node 造数据1.1 搭建环境新建mockserver文件夹npm init 初始化项目,生成package.json文件,并输入自己所需内容安装依赖 npm i express npm i mockjsnpm run start 运行接口服务器,确保接口可以被访问到package.json 文件内容:{ "name": "

2022-03-14 15:33:51 1271 1

原创 JavaScript——我眼中的Promise

最近做一个项目,需要对之前的同步代码进行修改,此时我发现,之前我面试时所谈及的promise在应用中一点也不懂,看文档自己写了一个demo,让我似乎明白了promise使用问题。1. 代码示例const promise1 = function (){ return new Promise((resolve, reject) => { let a = 0; setTimeout(() => { a = 111

2022-03-11 19:29:58 1140

转载 初识Flutter

1. 什么是flutterFlutter,本质上一套跨平台的UI框架,通过OpenGL这种跨平台的绘制库(内部会调用操作系统API)实现了一套代码跨多端。Framework底层是Flutter引擎,引擎全部使用C++实现,强大的引擎能力,提供高效的图形和文字绘制。所以Flutter主要做页面的跨端开发,当前情况下,开发一个成熟的跨端产品,并不能完全抛弃原生开发。2. flutter的优势一套代码,多端运行,而且运行效率和流畅性介于原生和H5之间掌握Flutter开发技巧后,多端页面开发工作中,人效

2021-12-31 10:48:19 153

原创 flutter安装_在macOS上搭建Flutter开发环境

flutter中文网1. 去flutter官网下载其最新可用的安装包下载官网2. 解压缩到想放置的文件夹该文件夹较大,且以后不需要动,所以可以根据自己的偏好放置在合适的位置3. 将flutter设置为全局环境变量open ~/.zshrc 打开该文件,若没有可以自己创建一个在.zshrc文件中添加以下内容export PATH="/Users/aaa/flutter/bin:$PATH" // /Users/aaa/flutter/替换成自己的flutter地址,可以在flutter文件中

2021-12-31 10:31:41 1114

原创 调研动画库SVGA在小程序当中的应用

svgaplayer-weapp githubsvga 指南1. 下载svga资源包直接复制 ./dist/svgaplayer.weapp.js 到你的小程序工程目录下。在需要添加播放器的 wxml 文件内,添加 canvas 组件,注意 canvas 的 id 必填,下一步会用到,type 必须为 2d。2. 使用xxx.wxml<view class="container"> <canvas id="demoCanvas" type="2d" style

2021-12-01 17:34:43 724

原创 调研动画库Lottie在微信小程序中的应用

1.安装第一步: 若项目中没有package.json文件 无法安装,可以通过 npm init初始化一个package.json文件lottie-miniprogram官网第二步: 安装 npm install --save lottie-miniprogram第三步: 微信开发者工具——工具 -> 构建npm2.使用2.1 在wxml中定义画布.wxml文件 <canvas id="canvas" type="2d"></canvas>2.2 在.js文

2021-11-30 16:50:54 1725

原创 搭建Vue3.0+Ts+Vite项目

1. 创建vite+ts+vue3.0项目npm init @vitejs/app -> y输入项目名称:例 myvite选择语言: vue -> vue-ts之后根据提示cd myvitenpm installnpm run dev若启动项目过程中出现报错情况,请检查npm 版本,我使用的是v16.13.02. 安装vue-router@4npm install vue-router@4...

2021-11-02 10:26:11 772

转载 Vue_vue-property-decorator在Vue中使用指南

描述比较清晰的文章

2021-10-28 16:42:19 314

原创 Uniapp—学习过程

1. 下载HBuilder官方文档,可以在此处下载HBuilder进行开发2. 创建项目点击HBuilder菜单栏中的文件->新建->项目,可以指定项目位置,项目名称,一些默认模板,之后点击保存,会生成一个uniapp项目3. 运行项目点击HBuilder菜单栏中的运行 -> 可以选择运行到某个平台上,此时注意,要选择具体文件进行运行查看我们想要的效果,如果想查看某个页面的效果,可以直接在该页面打开时运行。如果报错浏览器尚不支持此种类型文件,说明你运行了整个项目浏览器无法识别,可

2021-10-16 12:06:32 196

原创 Demo_canvas通过矩形虚线框设计立体图形

1. 实现效果2. 实现代码<template> <div> <canvas id="canvas" :width="1000" :height="1000"></canvas> </div></template><script>export default { data() { return { offsetVal: 0, startX: 0, s

2021-09-14 09:53:50 431

原创 Demo_使用canvas在Vue中绘制蚂蚁线(Ps中选择图形时出现的可动的虚线)

1. 需求效果需要一个蚂蚁线,周围边框可动,效果如下:2. 实现代码<template> <div> <canvas id="canvas" width="200" height="200"></canvas> </div></template><script>export default { data() { return { offsetVal: 0, };

2021-09-13 17:10:21 1147

原创 Vue实例——使用canvas封装polyline组件绘制一个五角星

1. 需求在看高德API时,发现有一个polyline组件,通过接收点的坐标数组,来绘制折线,正在看canvas API,就让我们一起试试吧。2. 实施思路:首先子组件需要接收父组件传递进来的点的数组,根据canvas API中的moveTo/lineTo/stroke来进行绘制2.1 封装子组件<template> <div class="polylinecanvas"> <canvas id="polyline" :width="ctxWidth" :

2021-09-13 10:40:34 927

原创 JavaScript——滑动翻页功能(缓慢移动+无缝衔接)

1. 需求+效果 展示最近做开发时有这样一个需求,滚动播放列表,数据有限,当这些数据滚动播放结束后再重头开始,做完之后的效果是这样的2. 实现代码(带标注)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="

2021-07-28 11:30:46 3338 1

原创 读季羡林《心安即是归处》中三种关系

世间吵闹,凡事琐碎,我们的心不知从何时开始变得愈发不能平静。我们有多久没有安安静静聆听内心的声音了?距离梦想的脚步是否又近了一些呢?在快节奏的生活下,我们该如何与身边的一些事物进行友好和谐的相处呢?季先生说:一个人活在世界上,必须处理好三个关系:第一,人与大自然的关系;第二,人与人的关系,包括家庭关系在内;第三,个人心中思想与感情矛盾与平衡的关系。这三个关系,如果能处理很好,生活就能很愉快;否则,生活就有苦恼。人与大自然的关系:我们生活在同一个地球上,共享上面的资源。没有谁是主宰,不过都是这芸芸众生中不

2021-07-26 21:15:59 580

转载 SSR——服务器端渲染(Vue)编写代码注意事项(二)

1. 编写通用代码运行在服务器端和客户端的代码,由于用例和平台API的差异,当运行在不同环境时,我们的代码不会完全相同2.服务器上的数据响应每个请求应该都是全新的、独立的应用程序实例,避免交叉请求造成的状态污染。实际的渲染过程需要确定性,我们也将在服务器上预取数据,这意味着我们在开始渲染的时候,我们的应用程序就已经解析完成其状态。所以默认情况下禁用响应式数据,这样也可以避免将数据转换为响应式对象的性能开销。3.组件生命周期钩子函数由于没有动态更新,所有的生命周期钩子函数中,只有before

2021-07-15 19:25:23 403

原创 微信小程序——子组件接收参数变化时如何监听

1. 使用场景当父组件传值给子组件时,有时会出现一开始为空,网络请求或者各种操作之后这个值才真正的传过去<t-activity-sites curPath="{{curPath}}"/>此时,我们在子组件中,若使用该属性来发起网络请求会出现问题,那么我们需要一种情况,在子组件中监听这个属性curPath的变化,当这个值存在时,再发起网络请求2. 实现(使用observer) data:{ currentPath:'', }, properties: { cu

2021-07-13 11:51:58 2410 2

原创 前端问题-返回ArrayBuffer数据的图片如何处理成base64格式并显示在img标签的src中

1.发现问题在开发的过程中,当我们嗲用网络请求在network中看到返回的数据是一张图片,而控制台打印出来的却是一堆乱码形式,如下2. 解决问题2.1 axios返回数据类型从json修改为blob查看多篇文档,发现是axios默认返回的数据为json格式,无法准确解析中当前我们图片的格式,我们可以通过配置选项,将返回数据格式改为blob类型。 const resBlob = await axios.get(`courses/tejia/${this.$route.params.name}/

2021-07-12 18:02:28 1401

转载 SSR——服务器端渲染(Vue)基础用法(一)

学习来源1.简介服务器端渲染:Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行。服务器端渲染优势:更好的SEO。Google 和 Bing 可以很好对

2021-07-12 16:29:52 334

原创 JavaScript实用工具库——Lodash用法-CDN

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

2021-07-08 15:54:12 3498

原创 微信小程序——自定义底部tabBar

在小程序开发时,在app.json中配置底部tabBar无法满足我现有的需求,所以准备自己定义一个tabBar.1.app.json中配置"tabBar": { "custom":true, // 支持自定义tabBar "list":[ // 至少包含两个tab信息 { "pagePath": "pages/staffs/staffs", "text": "机构", "iconPath": "./assets/commo

2021-07-08 13:10:11 2632

原创 JavaScript——不同类型数组去重(简单数组去重、对象数组去重)

1. 简单数组去重1.1 new Set() 去重MDN中对于Set的释义:Set对象是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。执行Set后返回的是一个Set结构,是类数组1.1.1 Array.from 将类数组转换成数组因为Set结构不是数组,我们可以通过Array.from()的形式将其转换成数组实例一: Set + Array.from去重let normalArr = [1,2,3,4,5,3,4,4,'a',

2021-07-07 17:59:59 1847

原创 微信小程序——组件的封装(暴露方法出去,在外部调用)

1.应用场景我们在开发时,封装一个公共底部组件,该组件拥有两个部分,第一部分是电话报名,第二部分是表单报名。我们需要在很多页面中使用这个组件,并且电话报名和表单报名逻辑是不同的,只有样式是相同的。此时,我们可以令这个组件暴露出两个方法供外部调用。2.组件封装html文件comp.wxml<!--底部报名表单组件--><view class="tapplyfooter"> <view class="tapplyfooter-left"> ...

2021-06-24 17:41:32 3186

原创 CSS——css+javascript轮播图/弹幕

1.transform方式实现轮播图1.1 实现效果1.2 实现原理一个包含轮播内容的容器,超出容器部分隐藏容器内多个子元素,flex布局子元素在固定时间内移动固定距离1.3 代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt

2021-06-22 16:41:16 1330 2

原创 CSS——两边通屏横线,中间是内容标题

1.实现效果2.实现思路一个容器,包含内部所有内容container三个元素,左边,右边为线,中间是title内容标题字数不固定,所以宽度不可限制,或者太长需要换行根据场景进行设置flex布局,不可压缩的设置flex-shrink:0;3.代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C

2021-06-21 17:07:28 557

原创 CSS——一个圆点绕着另一个圆点转动(animation动画中rotate使用)

1.要实现的效果2. 实现思路一个容器画出运动轨迹,设置宽高和border-radius,并relative定位一个中心点,绝对定位至圆心处一个移动点,固定在某处,跟着外部容器一起转动animation + transform:rotate的使用3.实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="

2021-06-21 16:53:13 5353

转载 CSS——按钮呼吸效果

1.效果演示2.实现思路定义一个按钮呼吸,即宽高在一定时间内都有一定的缩放效果我们可以使用transform中scale属性3.代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp

2021-06-21 15:57:05 5241 2

原创 微信小程序——IOS对sticky布局的支持,自定义navigation

在小程序开发时有这样一个要求,不用小程序本身的header,而是自己封装一个navigation,令其可以支持图片,文字等任意形式。1.自定义navigation我们可以在要求的页面的json文件中{ "navigationStyle":"custom", // 支持自定义navigation}2.封装组件header<view class="theader my-class"> <view class="theader-right" catchtap="toCh

2021-06-21 15:12:30 874

转载 Vue3——子路由路径时仅渲染子路由页面不渲染父路由页面

1.使用场景当我们在配置路由结构时,有父子关系时,会这样设计路由 { name: 'testA', path: '/testa', component:() => import('../views/test/testA.vue'), children: [ { name: 'testB', path: 'testb', component: ()=>import('../views/test/tes

2021-06-18 11:34:04 4076 1

原创 算法——快速排序

1.含义2.应用3.场景分析4.优点

2021-06-17 22:25:01 95

原创 JavaScript——那些年,让我们头疼的“闭包”

1.含义问:什么是闭包?答:由于在JavaScript函数中,只有函数内部的子函数才能读取局部变量,因此,可以把闭包简单理解为”函数内部的函数“。所以在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。问:闭包的用处?答:可以读取函数内部的变量,令这些变量始终保持在内存当中。2.使用实例一:闭包简要模型,理解闭包意义 // 在outside中定义一个变量a,值为888,我们想要在外部使用,正常方式无法使用,此时我们可以使用闭包的形式 // 在下面示例中,child函数就是闭

2021-06-17 22:22:21 84

转载 call,apply,bind改变this指向及实现原理

1.使用方法一个小例子,解释call,apply,bind的使用var value = '外面的值'function consoleLogVal(x,y){ console.log(this,"this指向") console.log(this.value) console.log(`x:${x},y:${y}`)}var callObj = { value:'callObj'}var bindObj = { value:'bindObj'}var

2021-06-17 18:51:27 707

原创 Webpack——webpack基础(entry,output,mode,chunk,bundle,module,loader,plugin)

webpack 4.01.默认配置当我们在使用webpack时,若默认没有webpack.config.js文件时,会有一个默认配置来执行,我们此时,只需要在src/index.js文件中写相应的内容,npx webpack 或在package.json中文件中配置了执行环境后 npm run dev就会打包index.js中的内容,生成对应的dist/main.js文件1.1 package.json中的配置"description":"","main":"index.js",..."sc

2021-06-13 13:47:01 438

原创 微信小程序——子组件给父组件传值

使用场景当子组件选中状态改变时,父组件实时收到子组件修改后的选中状态值第一步:在父组件中绑定事件// 父组件 wxml 中 子组件为 t-phone-first<t-phone-first bind:checkedagree="onCheckedAgree" content="{{firstGroup}}"/>绑定bind:checkedagree事件,并且在js中定义onCheckedAgree// 父组件 js中 onCheckedAgree:async function

2021-05-31 11:25:35 2061

原创 微信小程序——:nth-child等在小程序中使用

Vue中,父组件列表引入每一个子组件元素的时候,可以在父组件的CSS文件中设置子组件的margin,可以通过样式穿透在父组件设置子组件:nth-child(2n)为0等,那么在小程序中是如何实现的呢?父组件:WXML <view class="getnotice-list"> <t-notice-item class="getnotice-list-item" wx:for="{{getnotice}}" wx:key="index" content="{{item}}"

2021-05-27 16:17:35 4452

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除