- 博客(57)
- 收藏
- 关注
RSS订阅原创 git版本管理常用操作
代码版本管理，常用的git操作记录，记录，当作笔记查询。本人常用的Git管理⼯具Sourcetree; tortoisegit; VS Code 的 Git Grapt， GitLens 插件1. 配置 SSH 密钥对ssh-keygen -t rsa -C xxxxx (邮箱) 3次回⻋cat ~/.ssh/id_rsa.pub查看⽣成的公钥，复制⼀下到 Github或者 gitlab 中添加 ssh key个⼈------> settings-----> SS.
2021-12-15 15:29:45
1104
原创 js常用数组的方法整理
js数组的方法整理 为方便查找，记录常用js数组方法笔记。好记性不如烂笔头！js数组的方法整理js数组的方法整理1. join()2. push() 、 pop()3. unshift() 、 shift()4. sort()5. reverse()6. concat()7. slice()7. slice()7. indexOf() 、lastIndexOf()8. forEach()9. map()10. filter()11. every()12. some()1. join()joi
2021-12-14 17:00:39
105
原创 搭建vue项目步骤
如何搭建一个vue项目参考博文地址；https://www.cnblogs.com/hellman/p/10985377.html一、安装node环境node -vnpm -v检查是否安装成功：如果输出版本号，说明我们安装node环境成功二、搭建vue项目环境1、全局安装vue-clinpm install --global vue-cli2、进入你的项目目录，创建一个基于webpack模板的新项目vue init webpack 项目名说明：Vue build ==>
2021-03-12 14:22:12
127
原创 前端常见题型整理
元素div 上下左右居中方法总结情景一：一个浏览器页面中，只有一个div模块，让其上下左右居中 解决方案： { position:fixed; left:0; right:0; top:0; bottom:0; margin:auto; }情景二：一个父元素div，一个已知宽度、高度的子元素div(200*300) 解决方案： 1、position布局 {
2021-02-26 15:36:12
136
原创 微信小程序修改自定义组件的数据
微信小程序修改自定义组件的数据文章目录修改自定义组件的数据 以及使用组件的方法，笔记记录以防忘记一、组件的生命周期总结修改自定义组件的数据 以及使用组件的方法，笔记记录以防忘记组件间的基本通信方式有以下几种。WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体在 组件模板和样式 章节中介绍。事件：用于子组件向父组件传递数据，可以传递任意数据。如果以上两种方式不足以满足需要，父组件还可以通过
2021-02-22 10:27:26
2877
原创 微信小程序文本查看更多和收起
微信小程序文本查看更多和收起微信小程序中，有时候文本需要实现这样的功能：1、文本超过n行显示省略号2、省略时，显示 展开/收起 按钮3、文本不超过n行时，不显示省略号和展开/收起按钮实现功能，记录此次开发经验，以便当做笔记查询。实现思路：文本过长显示省略号、展开和收起功能，通过css样式即可实现判断是否显示展开/收起按钮：通过嵌套元素，可以实现text既显示省略号，其高度又是全显示时的高度通过SelectorQuery选择器，获取view及其父元素的高度，判断view高度
2020-08-01 18:19:20
2921
1
原创 微信小程序输入限制：金额限制，名字限制，电话号码限制
微信小程序输入限制：金额限制，名字限制，电话号码限制限制金额输入，只能输入数字和一个小数点限制名字输入，只能输入数字字母中文限制电话号码输入，只能输入数字博主正则不好，实现功能记录下来当做资料查询。//金额输入限制<view> <input value="{{money}}" placeholder="请输入金额" type="digit" bind:change="moneyChange" bindinput="moneyChange" bind:confirm="mo
2020-08-01 18:16:17
3188
2
原创 实现移动端调取摄像头拍照并截取图片上传
实现移动端调取摄像头拍照并截取图片上传使用vant配合vue-cropper 实现调取摄像头拍照上传并截取图片做项目需求用到H5调用摄像头上传图片并且需要截取图片上传，使用vant 框架的文件上传组件Uploader 配合vue-cropper实现拍照截图上传功能。npm install vue-cropper组件内使用import { VueCropper } from 'vue-cropper' components: { VueCropper,},main.js里面使用im
2020-07-07 15:34:32
1974
原创 vant UI框架适配移动端字体
vant UI框架适配移动端显示 做移动端项目时使用了vant框架，但电脑显示字体正常，真机上显示字体特别小，记录实现移动端适配的方法，以便做资料查询。1、先安装amfe-flexible 用于设置 rem 基准值 npm i -S amfe-flexible2、在main.js文件中引入lib-flexible import 'amfe-flexible/index.js'3、安装postcss-pxtorem postcss 插件，用于将单位转化为 rem npm instal
2020-07-07 14:54:54
1723
原创 微信授权
微信公众号网页调起授权（前端） 微信网页公众号开发调起授权页面方法，前端操作用户同意授权，获取code为了区分用户是否授权，可以把openId 存储在本地缓存，通过判断openId 区分用户是否授权。 mounted() { if (!localStorage.getItem("openId")) { // 如果缓存localStorage中没有微信openId，则需用code去后台获取 this.getCode(); } else { // 如果缓
2020-07-07 14:43:23
190
原创 根据首字母列表选择城市
vue实现根据首字母列表点击选择城市实现点击字母跳转相对应城市，先看下效果先获取城市列表 async getCityList() { //封装的请求调用 const res = await intercept({ method: "general.uppercitylist"//接口参数 }); let arr = []; ...
2020-03-03 17:48:08
1768
1
原创 跨域报错
笔记记录之跨域报错：http://localhost/访问服务器接口跨域报错：Access to XMLHttpRequest at ‘https://www.zykjedu.cn:9443/api.html?method=store.getstorelist’ from origin ‘http://127.0.0.1’ has been blocked by CORS policy: Res...
2020-01-14 12:00:29
869
原创 css实现开关样式
HTML代码 <label class="switch"> <input type="checkbox" checked /> <div class="slider round"></div> </label>用样式实现点击开关开启关闭效果// 开关.switch { position: relative...
2019-11-28 09:58:11
549
原创 微信小程序 之提示框
结构可自行修改<view class="showModule" wx:if="{{isShow}}" > <!-- 这部分内容可以灵活修改，例如改成一个模态框 --> <view class="text ">{{text}}</view></view>.showModule { /* 用样式控制隐藏 visibility: ...
2019-07-17 14:24:23
1114
原创 微信小程序上传多张图片
微信小程序官方文档上传图片贼简单wx.chooseImage({ success (res) { const tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址 filePath: t...
2019-07-16 18:32:06
431
原创 微信小程序踩坑之渲染层网络层错误
在我们加载图片的时候往往会出现一些小问题，例如：明明图片加载成功了，但是控制台还是会报 渲染层网络层错误，找了很多地方，也发现不出来问题。原因其实很简单，因为异步请求需要一定的时间，而小程序一进页面就开始加载，请求速度没跟上，这时页面显示加载的时候image里面的值是空的，就会出现渲染层、网络层错误，只需要加上wx:if="{{arr.length>0}}“或者wx:if=”{{****...
2019-07-16 18:19:04
20676
5
原创 网格布局学习笔记
网格布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。一、概述Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布...
2019-07-09 21:33:19
686
原创 jquery实现tab切换
jquery实现手机端tab切换####废话不多说，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
2019-07-08 08:50:57
342
原创 处理URL参数
使用get请求带参数时，参数接在URL上，该如何拿到URL上的参数去进行下一步的操作呢首先先裁切URLvar url = 'https://www.baidu.com/s?name=aa&age=48&sex=male&';//?后面的内容为url的参数 var idx = url.indexOf("?"); var params = url.slice(idx+1...
2019-07-04 21:58:58
445
原创 jq对象节点的增删改
1.创建jq节点 $("< div/>")2.元素添加(1)往父元素内部追加* append(content|obj|ele|fn): 给父元素添加最后一个子元素* prepend: 给父元素添加第一个子元素( appendTo(父元素) prependTo() )(2)外部插入内容（添加为兄弟元素）after: 在元素后面插入内容before: 在元素...
2019-07-04 21:48:22
348
原创 无缝滚动轮播图（CSS实现）
纯CSS3实现无缝滚动轮播图CSS*{margin: 0;padding: 0;} li{ list-style: none; }.box{ width: 1050px; border:10px solid #ccc; overflow:hidden; margin:150px auto;}.box ul{ width:200%; overflow:hidden; ...
2019-07-04 21:33:08
1529
1
原创 原生js实现直接切换轮播图
cssul{ list-style: none; padding:0;margin:0;}.focus img{ display: block;}.focus{ position:relative; overflow:hidden; height: 320px;}.focus ul{ position:absolute; overflow:hidden;} .fo...
2019-07-04 21:26:13
218
原创 简易弹窗遮罩层
遮罩层弹窗经常用到，记录一下HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>弹窗</title> </head> <body> <div id="showBtn">点击出现</di...
2019-07-04 21:13:05
455
原创 js实现点击复制到粘贴板功能
HTML结构<p class="DzWx"> <span class="wx">微信：<span id="wxContent"> 22</span></span> <button class="copy" id="copyId">复制</button></p>js代码$(".cop...
2019-06-25 17:26:32
3710
4
原创 vue的组件通讯之父子通讯
可复用的搜索组件* 组件通讯* 父 -> 子 1. 在组件标签中写入属性 2. 在组件配置中声明propsprops数据验证限定类型指定默认值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...
2019-06-17 21:57:50
133
原创 v-for实现简单tab切换
tab标签切换* 标签与内容一一对应指令* v-for * v-for ...in * v-for ...ofv-on配置选项methods<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na...
2019-06-17 11:17:14
1413
1
原创 混合开发
#混合开发##app类型###Native App(原生App)特点：由专业的native开发工程师开发（IOS、Android）安卓：xml + java，ios：xml + （Objective-C/swift）优点：运行稳定安装之后使用较为方便、用户粘度高对网络的依赖性不强流畅度高、用户体验强可以调用设备原生功能缺点：不能跨平台开发开发...
2019-06-10 21:14:33
187
原创 CSS选择器
1.选择器基本选择器群组选择器（并集选择器）交集选择器：多个选择器之间没有空格，表示同时满足多个选择器要求的元素才会被获取到层次选择器 1.后代选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代 2.子代选择器:用>隔开基本选择器，表示后一个选择器是前面的子代 3.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的） 4.兄弟选择器：E~F:...
2019-05-03 14:43:50
138
原创 内外联以及权重
外部样式：<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />内联样式语法：<标签 style=“属性：属性值;属性:属性值;”></标签>1、样式表的作用域行内（内联）样式的作用域是当前标签，内部样式的作用域是当前文件，外部样式表的作用域是有关联的所有文件。2、样式表的优先...
2019-05-03 14:35:25
919
原创 宽高自适应以及常见浏览器兼容
（一）宽度自适应1.若块级元素宽度不设置，或者设置成100%，都是占据其父级元素的一整行应用场景:（1）页面最外层的盒子一般都要占据屏幕的大小，所以宽度100%。（2）子元素使用百分比表示盒模型任意部分大小的话，代表的是子元素盒模型任意部分尺寸=父元素宽度百分比（除了高度外，子元素高度=父元素高度百分比）==>忽略;(二)高度自适应 1.父元素高度由子元素撑开 (1)...
2019-05-03 14:28:19
1474
原创 position定位属性
一、定位：position1.static默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。2.absolute相对于父级元素的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定 “left”、“top”、“ri...
2019-05-03 14:20:00
862
原创 弹性盒布局、媒体查询
（一）弹性盒1.设置在容器（父元素上）上：(1)display:flex; 父元素设置成弹性盒。 规定子项目在父元素主轴方向一行显示，不会换行。侧轴方向会默认拉伸。 (2)设置主轴方向 flex-direction 属性值: row 默认为水平向右 column 垂直向下 row-reverse 水平向左 ...
2019-05-03 13:56:11
771
原创 表格
数据表格的作用及组成作用：显示数据组成：<table> <tr>行 <td>单元格</td> <td></td> </tr></table>*数据表格的相关属性width=“表格的宽度”height=“表格的高度”border=“表格的边框”bgcolor=“表格的背景色...
2019-05-03 13:47:47
256
原创 手机端rem布局踩过的坑
手机端布局一般有：rem布局、百分比布局、媒体查询、弹性盒布局等在公司接到的新需求：公司公众号需要接入提现接口，需要切一个提现页面。我脑子快速闪过用百分比布局。很快…效果就出来了，提现页面始终垂直居中，经过多方测试，本以为圆满完成任务了。很开心的就上线了，然后UI小姐姐很开心的说我要做第一个使用这个提现接口的用户，刚好我账号有钱。然而…尴尬的事情出现了，UI小姐姐的手机居然没有适配，提现框...
2019-05-03 13:35:52
1031
原创 表单
一、1.表单框：<form name="表单名称" method="post/get" action="#"></form>2.文本框<input type="text" value="默认值"/>3.placeholder=“输入框内容”<input type="text" placeholder=”框内显示内容 ”>4.密码框...
2019-05-02 17:57:29
129
原创 3D变换
3D变换1.transform之3d移动变换:transform:translate3d(x,y,z)z:代表在垂直于平面的轴上移动，电脑屏幕往人眼那个方向为正方向。transform:translateZ(z)2.transform-style规定变换的样式（父元素）属性值：flag平面（默认） preserve-3d保持3d变换transform-style: preser...
2019-05-02 13:31:44
238
原创 HTML常用标签
常用标签W3C( World Wide Web Consortium )万维网联盟：制定了结构html和表现css的标准ECMA：制定的行为的标准1. 文本标题<h1>一级标题</h1><h2>二级标题</h2>……<h6>六级标题</h6>2. 段落标签<p>段落文本内容</p>3...
2019-05-02 13:19:25
293
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人