前端学习笔记
ITzhongzi
不管前方的路有多远和多苦,只要走的方向是正确的,不管多么崎岖不平,都比站在原地更接近幸福!
展开
-
html无缝轮播图原理解析
html无缝轮播图原理解析原创 2022-09-28 11:34:11 · 323 阅读 · 0 评论 -
vue3中ref绑定dom或者组件失败原因分析
vue3中ref绑定dom或者组件失败原因分析原创 2022-09-27 18:36:23 · 5257 阅读 · 0 评论 -
js数据过滤算法搭建
js数据过滤算法搭建原创 2022-09-20 16:33:41 · 416 阅读 · 0 评论 -
npm err Could not resolve dependency: peer html-webpack-plugin@“^3.0.0“ from script-ext-html-webpac
问题截图原因:因为npm7.x的版本比npm6.x更严格,两种解决方案:1.降级到npm6.x2.npm i --legacy-peer-deps问题解决原创 2022-04-15 15:19:42 · 5521 阅读 · 0 评论 -
vue3.0双向绑定原理解析
vue3.0 的数据绑定 利用了 对象的Proxy 来实现的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s.原创 2022-01-11 10:20:27 · 634 阅读 · 0 评论 -
ES6数组的扩展方法
扩展运算符的使用深拷贝一维数组const list = [1, 2, 3, 4, 5];const list1 = [...list];console.log(list1);分割数组const list = [1, 2, 3, 4, 5];const [, ...list1] = list;console.log(list1);将数组转化成参数传递给函数const list = [1, 2];function xd(a, b) { console.log(a + b.原创 2022-01-11 10:08:24 · 301 阅读 · 0 评论 -
使用Proxy实现简单的双向数据绑定
简介:手把手教你如何使用Proxy实现简单的双向数据绑定获取dom对象const input = document.getElementById('input');const span = document.getElementById('span');设置代理对象const obj = {};const inputProxy = new Proxy(obj, handler);配置代理选项const handler = { get: function (target.原创 2022-01-11 10:05:25 · 692 阅读 · 1 评论 -
ES6中的代理Proxy和反射Reflect(上)
简介:认识高阶知识点之代理Proxy和反射ReflectProxy概述正如Proxy的英译"代理"所示,Proxy是ES6为了操作对象引入的API。它不直接作用在对象上,而是作为一种媒介,如果需要操作对象的话,需要经过这个媒介的同意。使用方式 /* @params ** target: 用Proxy包装的目标对象 ** handler: 一个对象,对代理对象进行拦截操作的函数,如set、get */ let p = new Proxy(target, handler)使用原创 2022-01-11 10:03:35 · 155 阅读 · 0 评论 -
Map、Set与Array及Object间的区别和
Map与WeakMap对象的特点简介:详细介绍Map与WeakMap结构的特点背景JavaScript中的对象,实质就是键值对的集合,但是在对象里却只能用字符串作为键名。在一些特殊的场景里就满足不了我们的需求了,正因为此,Map这一数据提出了,它是JavaScript中的一种更完善Hash结构。Map对象用于保存键值对,任何值(对象或者原始值)都可以作为一个键名或一个值。使用介绍// 通过构造函数创建一个Maplet m = new Map();m.set([1,2],'原创 2022-01-11 09:48:35 · 671 阅读 · 0 评论 -
小程序canvas图片变形问题处理
问题背景和问题描述问题描述新版小程序canvas drawImage绘制图片后,图片在canvas上变形,如图所示:原图变形图片问题背景小程序sdk版本更新之后,原来的canvas基本废弃了,启用了新版的canvs的api和方法:解决方案:新版的canvas在获取到nodeRef的对象之后,要对canvas重新设置一下宽高,不然就会出现图片变形。问题代码 const query = wx.createSelectorQuery() quer原创 2021-04-12 09:59:22 · 2428 阅读 · 2 评论 -
小程序(css)显示两行文本超出显示省略号
简单的很,兄弟font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; align-content: center; height: 44px; width: 420r原创 2021-03-25 15:53:13 · 1065 阅读 · 0 评论 -
小程序自定义tabbar双击切换问题汇总
问题描述小程序自定义的tabbar按照官方的文档使用时,会出现点击无法切换底部tabbar, 双击才能切换的问题,没有去找原因,直接从网上看了一个相对好的方法, 警示后来者……解决方法在底部tabbar要跳转的页面的onshow方法内部加入一下代码 if(typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ select原创 2021-02-25 15:03:53 · 2027 阅读 · 3 评论 -
小程序生成二维码(使用weapp-qrcode)以及相应的bug汇总
效果展示github 地址github 地址 https://github.com/MrITzhongzi/small_routine_components/tree/master/6.create_qr_code下载weapp-qrcode可以通过小程序的npm功能下载:npm i weapp-qrcode -S小程序引入方法一 import drawQrcode from 'weapp-qrcode';方法二 把npm下载的程序包中dist文件夹中的文件引入(任意引入一原创 2021-02-23 15:57:23 · 3300 阅读 · 10 评论 -
微信小程序WeUI组件,通过 useExtendedLib 扩展库 的方式引入后总提示“未找到”,完整解决方案
错误解读…/components/cells/cells" 未找到很明显插件导入失败,只需要更换导入方式即可错误示范 { "navigationBarTitleText": "确认订单", "usingComponents": { "mp-icon": "weui-miniprogram/icon/icon", "mp-cells": "../components/cells/cells", "mp-cell": "../components/cell/cell"原创 2021-02-18 16:25:28 · 969 阅读 · 0 评论 -
小程序canvas生成图片压缩和失真问题draw失效问题汇总
canvas生成图片失真问题canvas生成图片的过程把网络图片保存到小程序的缓存中,并获取到图片的信息用getImageInfo在canvas上绘制想要的图片,用canvas各种方法使用canvasToTempFilePath或者saveImageToPhotosAlbum保存图片分析决定图片质量, 图片失真的原因在第三部,使用canvasToTempFilePath保存的时候。示例代码saveImageCanvas(){ wx.showLoading({原创 2021-02-10 11:17:13 · 3747 阅读 · 1 评论 -
小程序文本原样输出(保存空格和换行)
css语法style="white-space:pre-wrap;"在 view 标签加上这个white-space:pre-wrap;css属性,view输出文本的时候就会带着原有的空格 和换行。 如下所示:示例demo<view style="text-align: center; font-size: 16px; font-weight: bold; margin: 10px 0;">四季田间小程序升级公告</view><view class="tip-bo原创 2021-01-05 16:59:17 · 1695 阅读 · 0 评论 -
微信小程序动画解析以及transitionend重复 animationiteration animationend失效问题解析
github项目代码github项目代码https://github.com/MrITzhongzi/small_routine_components/tree/master/5.danmu_componenttransitionend重复问题首先你要知道,bindtransitionend监听的是小程序的过渡属性,就是正在变化的属性,每有一个属性过渡完成,就会触发一次。例如: 一下这个会触发两次, 因为有 translateY和opacity两个属性在渐渐变化。var animati原创 2020-09-16 14:12:00 · 3652 阅读 · 0 评论 -
java api规范工具类封装
示例{ code: 0, data: null, msg: "xxxxxxx"}package com.example.demo.utils;public class JsonBuild { private int code; private Object data; private String msg; public JsonBuild(){} public JsonBuild(int code){ this.code原创 2020-07-30 16:16:15 · 352 阅读 · 0 评论 -
js中Date在ios浏览器无效问题
参考文章:时间格式问题 new Date(str) IOS系统跟Android系统不兼容JS获取当前时间戳的方法该要ios 中创建Date的方式和android中的方式不一样。还有部分方法ios中不支持,但是android中支持,例如: Date.parse()。android中创建datevar abc = new Date("2020-10-01");// 获取时间戳Date.parse("2020-10-10")abc.valueOf()abc.getTime()原创 2020-07-29 14:24:26 · 729 阅读 · 0 评论 -
小程序直接上传七牛云并在本地生成token
写在前面本文主要记录小程序在本地生成七牛云的token,并上传到七牛云的探索历程。效果展示相关资料七牛云小程序插件官方文档: 七牛云小程序插件官方文档七牛云插件官方文档: 七牛云插件官方文档参考文章: 小程序生成七牛云token需要引入的工具包工具包链接: 工具包链接步骤小程序端从七牛云后台管理获取相应的密钥 AK, SK, Bucket用这三个参数生成交互的 token再将七牛云sdk引入小程序调用上传方法上传文件注意生成token 的 Bucket是七牛云的命原创 2020-06-30 16:46:24 · 1441 阅读 · 0 评论 -
小程序获取具体地址(经纬度转换成实际地址)
效果展示注意: 因为微信小程序的api只提供了获取经纬度的接口,实际上获取的地址无法分割,所以我们引入第三方的腾讯jdk来完成。以下是项目目录结构具体步骤到腾讯申请一个开发者 key: key地址下载qqmap jdk到本地:** 下载地址:js-jdk下载地址**将jdk放到本地,并进入调用api即可注意: 使用 微信开发者工具进行调试的时候注意把 校验域名地址 给关闭,不然可能会报错。核心代码wxml<view> <view>省:{原创 2020-06-10 15:10:52 · 4927 阅读 · 3 评论 -
小程序滑动穿透问题处理
滑动穿透描述当我们在弹出层或者模太框上滑动手指的时候,最底下的UI视图跟着滑动。解决方案在滑动的元素上加上一个空的滑动事件(万能方法)/*这是弹出层的盒子*/<view catchtouchmove="touchmove"></view> touchmove: function(){ },这样手指滑动就会触发这个滑动事件,而不会向上传导,导致滑动穿透。注意: 小程序提供bind 和 catch两种绑定事件方法,bind是会冒泡的,catch原创 2020-06-04 09:30:31 · 400 阅读 · 0 评论 -
微信小程序拖拽组件封装
效果展示git 仓库地址git仓库地址https://github.com/MrITzhongzi/small_routine_components/tree/master/drag_component思路利用小程序的事件系统,在touchmove,即手指在屏幕上移动的时候改变组件的 固定定位的 top和left css属性参考文章参考文章https://www.jianshu.com/p/4cf32621449b使用示例wxml<drag-component im原创 2020-05-26 16:35:07 · 1244 阅读 · 0 评论 -
微信小程序列表滑动影响解析
场景说明我们经常会遇到左边是一个分类,右边是内容列表,这时,一个页面中有左右两个列表。经过实践测试会出现,一下几个问题:两个滑动列表互相影响,即滑动一个时另一个也会跟着动微信小程序页面的生命周期函数 onreachBottom没法触发我们用下面这个案例解析onreachBottom没法触发问题onReachBottom只有在页面被充满时,并且滑动到页面底部时才会触发。大部分未触发的原因时某个盒子内容可以滚动,但是这个盒子有固定的尺寸,页面并没有被充满。所以没有触发 onreachBo原创 2020-05-25 14:51:37 · 1091 阅读 · 0 评论 -
微信小程序开屏动画组件封装以及使用示例
思路首先调用wx.hideTabbar() 隐藏微信小程序的tabbar封装一个开屏动画组件,在几秒后自动关闭在关闭的时候调用 wx.showTabber();来使tabbar显示出来效果展示git仓库地址git仓库地址https://github.com/MrITzhongzi/small_routine_components.git示例目录结构核心代码kaiping_component.wxml<view class="kaiping_box"> <原创 2020-05-14 16:48:43 · 3202 阅读 · 1 评论 -
css多行文本显示省略号
在多行文本显示的div中,超出部分显示省略号css实现方案css.description { overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/ text-overflow: ellipsis;/*可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。*/ display: -webkit-box;/*必须结合的属性...原创 2020-04-23 09:09:11 · 557 阅读 · 0 评论 -
localStorage设置过期时间
场景localStorage默认是没有过期时间的,但在某些场景下我们想自动清除某些缓存。思路: 重写localStorage的get和set方法,在set的时候存储加入时间戳的一个对象,get的时候取出这个对象,判断时间戳即可。参考文章localStorage设置过期时间es5实现Storage.prototype.setExpire = (key, value, expire) =&...原创 2020-04-22 11:25:06 · 1703 阅读 · 0 评论 -
npm gyp ERR问题
原因*缺少C++编译工具,或者编译类库出现问题gyp是一个编译工具,类似于makefile这种命令,它主要用来编译C++的,node里面集成了它,叫做node-gyp。npm分发的都是源码,npm install的时候都是拉取源码后在本地编译,这个时候因为不可避免的,源码里面用到其他语言,比如C或者C++,所以编译的时候,就需要其他语言的编译工具比如node-gyp,但这些编译工具其实在...原创 2020-04-16 10:50:30 · 3081 阅读 · 0 评论 -
Mac下 npm permission denied 权限问题
依次运行下面命令:其中 $(whoami)替换成自己系统的用户名,例如我的是:sudo chown -R huanghainongye ~/.npmsudo chown -R $(whoami) ~/.npmsudo chown -R $(whoami) /usr/local/libsudo chown -R $(whoami) /usr/local/bin...原创 2020-04-16 10:02:41 · 1753 阅读 · 0 评论 -
小程序canvas生成图片并保存在本地
小程序canvas生成图片并保存在本地,舍己图片的绘制,和权限申请和图片的保存。官网文档微信小程序官方文档用到的相关apiapi描述示例wx.getSystemInfo获取手机的屏幕信息(宽、高等)wx.getSystemInfo({})wx.createCanvasContext创建canvas上下文对象const ctx = wx.createC...原创 2020-01-15 15:13:38 · 2939 阅读 · 0 评论 -
微信小程序日历组件封装和日历算法
github地址github代码地址参考博文https://www.cnblogs.com/webwei2017/articles/7723703.html思路首先取得处理月的总天数接着定义一个包含十二个月在内的月份总天数的数组:m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);m_days这个数...原创 2019-12-31 09:54:21 · 824 阅读 · 0 评论 -
html中散列布局的实现,中间自适应大小,两边固定宽度
代码如下:::body{margin: 0;padding: 0;}.left{width: 200px;height: 500px; background: #ccc;position: absolute;left: 0;top: 0;}.middle{height: 500px; background: #999; margin: 0 310px 0原创 2016-07-11 14:31:18 · 964 阅读 · 0 评论 -
html 混合布局
直接上代码::body{margin: 0;padding: 0;}.top{height: 100px; background: blue;}.head{height: 100px; width: 800px; background: #f60; margin: 0 auto; }.main{width: 800px; height: 600px; bac原创 2016-07-11 14:50:41 · 563 阅读 · 0 评论 -
popupWindow使用详解+点击空白自动消失代码
定义popupWindow:View root = this.getLayoutInflater().inflate(R.layout.number,null);final PopupWindow popup = new PopupWindow(root, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutPar原创 2016-07-11 15:33:13 · 743 阅读 · 0 评论 -
html中类似qq评论和发状态的布局实现-初学者
这是效果图::::一下是实现代码::.demo01{width: 600px; position: relative;}.left{width: 100px;float:left}.left img{margin-left: 20px;}.right{width: 458px;padding: 20px; float:right;backgrou原创 2016-07-12 09:19:03 · 1169 阅读 · 0 评论 -
html中类似qq状态的布局,评论+初学者实现方式
效果图如下::代码实现如下::.demo01{width: 600px; position: relative;}.left{width: 100px;float:left}.left img{margin-left: 20px;}.right{width: 458px;padding: 20px; float:right;b原创 2016-07-12 09:21:59 · 849 阅读 · 0 评论 -
html+ js+ jq+css导航条菜单的制作(水平,竖直,伸缩,带有动画效果等等。。。)
第一种导航菜单,最普通的:(竖直的)*{margin: 0;padding: 0;font-size: 14px;}ul{list-style: none;width: 100px;}a{text-decoration: none;display: block;height: 30px;line-height: 30px;width: 100px;backg原创 2016-07-12 15:28:26 · 3444 阅读 · 0 评论 -
html用js实现导航栏的二级菜单,自动伸缩。。。
效果图::、代码如下::动画菜单* { margin: 0; padding: 0; font-size: 14px; }a { color: #333; text-decoration: none }ul{ list-style: none; }.nav {height: 30px; border-bottom: 5px solid #原创 2016-07-12 16:09:29 · 12586 阅读 · 0 评论 -
Html position(static | absolute | fixed | relative)定位
语法: position : static | absolute | fixed | relative参数: static : 无特殊定位,对象遵循HTML定位默认规则 absolute : 绝对定位。将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。相对于posit转载 2016-07-14 10:32:49 · 388 阅读 · 0 评论 -
html中节点类型锦集
原创 2016-07-14 16:57:29 · 428 阅读 · 0 评论