- 博客(36)
- 收藏
- 关注
RSS订阅转载 走近 Flex 布局
一、Flex 布局是什么？Flex 布局也就是弹性布局，可以使盒模型大大增加灵活性。任意容器都可以设置为 Flex 布局.box{ display: flex; display: --webkit-flex /*Webkit 内核的浏览器，必须加上-webkit前缀。*/}注意：容器设置为 Flex 布局之后，子元素的float、clear和vertical-align属性将失效。二、容器的属性以下6个属性设置在容器上。flex-direction
2021-09-28 16:43:23
159
原创 Create React APP 使用绝对路径引入
在 React 项目中，当页面层级变多时，使用相对路径会使引入文件变得相当麻烦。比如会遇到这种情况： ../../../../store/xxx.js所以我在项目中因为此原因要设置绝对路径。同时绝对路径还有其他好处代码清晰、简洁 由于是绝对路径，可以直接复制代码到其他层级使用，相对路径则要切换引用路径 移动文件到其他地方，省去更新路径的步骤。（移动路径 VS code 可以直接帮你修改引用，但其他 IDE 可能就不行了）我是用的编码工具是 VS Code，具体实现如下。在项目的根目
2021-09-26 11:28:23
658
原创 npm 依赖包操作命令
一、npm 安装dependencies安装：npm install <packageName>--save 简写：npm i <packageName> -S devDependencies 安装：npm install <packageName>--save-dev 简写：npm i <packageName> -D 全局安装：npm install <packageName> -g常用的安装就是上面两种，但是 --save...
2021-09-24 14:21:29
1522
原创 JS 实现一键复制功能
需求背景：最近产品举办拉新活动，老用户可通过自己的分享链接向新用户分享自己的邀请码，新用户进入APP完成填写邀请码，官方给新老用户奖励。为方便用户快速复制邀请码，故有此需求。技术实现：一、Document.execCommand() 方法HTML<div id="codeBox">xxxxxx</div><div id="btn" class="btn">点击复制邀请码</div>JS$(".btn").on('click'.
2021-09-23 18:10:23
1920
原创 JavaScript正则表达式
声明正则表达式字面量方法var reg = /\bis\b/g;构造函数方法var reg = new RegExp('\\bis\\b','g')修饰符g：global 全局搜索；不添加的话，搜索到第一个匹配的就停止i：ignore case 忽略大小写，默认大小写敏感m：multiple line 多行搜索...
2020-01-09 11:10:08
139
原创 利用PhotoSwipe进行完成图片预览功能
在类似于朋友圈动态中，时常会配有图片，但是图片常常不能展示完全，所以需要放大来浏览图片。今天利用PhotoSwipe进行图片预览的功能；首先放出PhotoSwipe的github地址：PhotoSwipe下面是我在项目中的使用：1.首先需要引用<link rel="stylesheet" type="text/css" href="../js/common/photoS...
2019-11-20 17:30:38
1164
2
原创 微信自定义分享
在微信打开web页面时，想分享给好友或者朋友圈，如何进行分享时的title、Icon的自定义？第一步：绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。第二步：引入js文件在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/j...
2019-10-25 16:29:39
231
转载 Foo.getName()的二三事
最近偶然间翻起来一道js题，比较经典，鉴于自己有些遗忘，特此记录一下。题目如下： function Foo() { getName = function () { console.log (1); }; console.log('this is'+this) return this;}Foo.getName = function () { console.l...
2019-06-12 15:21:27
583
转载 Windows 下nginx相关命令
1、启动：C:\server\nginx-1.0.2>start nginx或C:\server\nginx-1.0.2>nginx.exe最好使用第一种，第二种会使你的cmd窗口一直处于执行中，Ctrl + C也不能终止，就算关闭cmd窗口，查看进程管理器也能看到之前还在运行并未随着cmd窗口关闭而结束进程。如果使用了第二种方法，关闭nginx进程方法就是，重新打...
2019-05-29 10:31:10
1007
原创 ios 微信移动端web页面input弹出键盘导致页面错乱
最近发现，ios移动端Web页面在微信中，input输入框使键盘弹出和收起，导致页面上的位置错乱问题复现：我在页面中有一个position:fixed弹层，弹层上面有输入框，当点击输入框的时候，弹出来微信键盘，在输入完毕后，输入框失去焦点，发现页面并没有恢复到底部，这时点击页面上的按钮会错位，导致position为fixed内部的按钮无法点击了。解决办法：1.当出现上述问题时，发现...
2019-05-15 15:18:47
2619
3
转载 React 内存泄露问题
1.这是报错的消息：Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks i...
2019-04-15 17:56:07
891
原创 React路由的history对象的插件history的使用介绍
在react-router中组件里面的跳转可以用<Link>但是在组件外面改如何跳转，需要用到react路由的history1.首先是history的安装：npm install history --save2.我创建了一个JS文件，方便各个文件引用history.jsimport { createBrowserHistory } from 'history...
2019-04-15 17:06:33
9378
原创 React 内容发布线上遇到的问题
最近做了一个PC项目，正好视频学习完React一些相关内容，所以这个PC项目就选用React进行编写。这个项目用的相关技术1.react-router 的 BrowserRouter 进行路由编写2.react-redux 进行状态管理3.styled-components 进行样式书写其中在项目开发到上线的过程中遇到了一些问题，特此记录一下。1.项目打包上线的时候，把打包...
2019-03-18 11:23:27
405
转载 Windows控制台常用命令
创建文件夹：md 文件夹名创建空的文件：type nul>文件名创建有内容文件：echo "内容">文件名查看文件内容：type +文件名查看目录及子文件：dir删除空文件夹：rd 文件夹名删除文件及所有子文件：rd /s/q 文件夹名删除文件：del 文件名...
2019-02-20 17:06:11
2284
原创 iscroll区域滚动
最近需要做一个给用户投票的页面，投票结果可以查看点击，展示形式是以一种弹窗的形式，但是由于选手数量较多，所以选手结果需要区域滑动来展示。由于是活动页面，页面形式较简单，所以用jq + webpack + es6进行编写此项目区域滑动相关内容则用iscroll插件HTML<div id="wrapper"> <ul id="scroller" class="vo...
2018-11-19 14:18:33
483
原创 用sort方法根据数组中某个对象属性进行排序
我在做一个投票系统的时候，后端给我返回一个数组List，立面包含选手所得票数，但没有排序，我需要根据每个选手的票数进行排序，数据如下：count属性为我们需要排序的数据。var memberData = [ { name: '选手1', audio_source:'img/cbg.mp3', num: '01', count: 3 }, { name: '选手2',...
2018-10-23 19:28:58
5625
原创 for in 循环获取json数据中'key'与'value'
一、for in 方法 a.for in 循环对象var data = {name:'mcYang0929',age:'25',sex:'man'};for(var key in data) { console.log(key); //属性名（key） console.log(data[key]); //属性值（value）}b....
2018-10-23 19:02:07
6240
原创 VS Code：Easy less 路径配置修改
在web开发当中，我经常会用写less然后编译成css，当然在VS Code当中也有这样的插件（EasyLess）；但是当我们创建一个.less文件，写相关代码进行保存时，会发现它会在.less文件同目录生成对应名字的.css文件；当页面过多时，就会到这目录文件过多而且看起来不清晰，所以我一般会把.less和.css分别放在不同目录；类似于这样：这样就需要我们配置一下les...
2018-08-15 14:11:37
9168
1
原创 npm install:ChromeDriver installation failed Error with http(s) request: Error: read ETIMEDOUT
今天在练习vue项目中，使用npm安装axios和vuex时一直出现error，看报错信息是npm install:ChromeDriver installation failed Error with http(s) request: Error: read ETIMEDOUT上网一查，需要安装 ChromeDriver解决办法：npm install chromedriver --chro...
2018-07-12 18:05:35
1354
原创 vue:兄弟组件传参
vue父子组件可以通过 props 和 $emit进行传参兄弟组件呢？vue兄弟组件数据传递需要借助事件车，需要利用一个事件车bus进行传递数据首先创建一个vue实例，让兄弟组件共同用一个事件然后传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)然后数据接收方，通过created(){}进行触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来...
2018-07-06 17:21:22
4712
转载 webpack 错误信息总结
错误一：vue.js:515 [Vue warn]: Property or method “name” is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instan
2018-04-13 16:09:43
1456
转载 webpack之publicPath路径问题
output: { filename: "[name].js", path:path.resolve(__dirname,"build")}如果没有指定pubicPath,则引入路径如下<body> <script src="b.js"></script></body>如果有指定publicPathoutput: { filename: "[name].js",
2018-04-12 18:45:44
1200
转载 Android WebView 调试方法
调试Android WebView中的h5页面，本人通常就是通过alert来定位问题，效率低且无法直接调试样式或打断点，可谓是事倍功半。本文介绍一下我在项目中使用的新方法，能够通过chrome的开发工具在原生 Android 应用中调试 WebView。前提条件： Android4.4+基本原理： 1.在APP中启用 WebView 调试，开启调试后，Chrome DevTools才能对WebV
2018-04-09 18:18:17
12896
原创 页面的缓存与不缓存-html,css,js
HTML的HTTP协议头信息中控制着页面在几个地方的缓存信息，包括浏览器端，中间缓存服务器端(如：squid等)，Web服务器端。本文讨论头信息 中带缓存控制信息的HTML页面(JSP/Servlet生成好出来的也是HTML页面)在中间缓存服务器中的缓存情况。HTTP协议中关于缓存的信息头关键字包括Cache-Control(HTTP1.1)，Pragma(HTTP1.0)，last-Modifie
2018-04-02 11:09:47
13258
1
原创 qrCode.js——用js生成二维码
API下方是自己写的实例：js:var qrcode = new QRCode('alertQRcode', { text: "你要转换为二维码的内容", colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H});html:<div id="alertQR
2018-03-07 18:39:27
296
原创 小程序：微信小程序中遮罩层的滚动穿透问题
1.如果弹出层没有滚动事件，就直接在蒙板上加catchtouchmove=”move” move:function(){};wxml<view class='mask' catchtouchmove="move"></view>js//在page中添加一个函数//这个函数内容为空move:function(){}2.如果弹出层有滚动事件,那么在弹出层出现的时候给底部的content加上一个c
2018-01-25 15:05:22
14699
2
原创 Hbuilder：自动编译TypeScript文件
在现在目前前端应用中，会用到TypeScript进行编写Js，他能够对变量类型进行处理，从而在编译过程中就给你提示出你的错误，这点非常方便，另外当项目慢慢变得庞大，代码量变多，对项目的管理也是非常方便，具体可以进行百度详细了解下。在写代码过程中，用到hbuilder编译器，安装插件可以自动把TypeScript(.ts)文件编译为Js文件。方法如下：1.在最上方菜单栏，点击工具-插件安
2018-01-12 15:54:34
4777
原创 require.js:封装一个jQuery的toast插件
在移动端页面之中，有很多地方都会用到toast也就是吐司功能，它可以用来提示用户执行完某项操作的结果。由于会在不同页面进行多次引用，所以封装了一个jQuery插件，方便引用说明：我是用require.js进行引入插件，该插件基于jQuery，所以先要用require引入jQuery这是我封装的toast.js代码如下：/* * toast插件 * toastInit参数 * src 可以插入
2018-01-09 18:14:18
869
原创 CSS:取消select默认样式
IOS端background-color:transparent;border-color:transparent;andorid端：仅仅使用上面的代码还不够，可以发现select框在某些浏览器（包括微信）内置浏览器下 还会有箭头以及高亮的线框，要除去这个可以使用-webkit-appearance: none;取消webkit默认的样式。
2018-01-08 19:52:34
3152
原创 微信小程序：点击图片进行预览
在开发需求中，经常有类似与九宫格的图片展示，当点击图片时进行图片的预览，如果多图的情况还可以左右滑动。小程序中具体实现效果如下：WXML<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{item}}' data-index='{{ind
2017-12-23 15:59:06
39664
10
转载 CSS:移动端实现垂直居中的方法
方法1:table-cell html结构<div class="box box1"> <span>垂直居中</span></div>CSS.box1{ display: table-cell; vertical-align: middle; text-align: center; }方法2：display:flex
2017-12-20 14:29:04
8723
原创 js:正则判断手机号是否正确
手机号登录已经成为非常普遍的一种登录方式； 所以登录注册时，对手机号码是否符合规则的判断就十分重要； 在js中，我们可以用正则表达式来判断。这里是正则表达式var phoneReg=/^[1][3,4,5,7,8][0-9]{9}$/; 这个表达式的意思是： 第一个中括号的意思：手机号码以1为开头； 第二个中括号的意思：第二位可为3,4,5,7,8,中的任意一位； 第三个中括号及{9}的
2017-12-19 15:40:26
5988
转载 JS:根据出生日期 得到年龄
JavaScript//JS根据出生日期 得到年龄 //参数strBirthday已经是正确格式的2017-12-12这样的日期字符串 function jsGetAge(strBirthday) { var returnAge; var strBirthdayArr=strBirthday.split("-");
2017-12-12 19:18:43
5006
原创 微信小程序-五星评分功能
最近要做一个在微信小程序五星评分的功能代码如下：jsPage({ /** * 页面的初始数据 */ data: { starFlag:5 }, changeOne:function() { var that = this; that.setData({ starFlag: 1 }); }, changeTwo:func
2017-12-01 14:42:36
7229
原创 微信小程序-wx.request获取数据
这个是小程序官方API给的参数，详细请参考官方API看了API之后，就举个栗子吧，一般普通的请求接口是这样，如下：js代码Page({ data:{ // text:"这是一个页面" result: [] }, onLoad:function() { var that = this; wx.request({ url: '这里放
2017-11-30 10:53:16
14772
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人