- 博客(107)
- 资源 (1)
- 收藏
- 关注
原创 CSS - 笔记
CSS3 filter(滤镜) 属性filter: grayscale,添加在html上可将整个页面置灰filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter :grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);...
2020-04-05 12:42:52
155
原创 React - Sass 移动端使用 2 3倍图
安装 node-sassnpm i node-sass -D项目目录结构mixins.scss 文件// mixins.scss@mixin bg-image ($url) { background-image: url($url + '@2x.png'); background-size: 100%; background-repeat: no-repeat; ...
2020-04-03 12:17:01
640
原创 TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefine
最近启动一个之前完成的React项目出现以下的错误TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined at validateString (internal/validators.js:117:11) at Object.join (p...
2020-04-02 13:38:10
6631
原创 JS - ~~
~~:可用于转化为数值类型,并取整~~1.1 // 1~~1.9 // 1~~-1.1 // -1~~'1.1' // 1~~'-1.1' // -1~~true // 1~~null // 0~~undefined // 01 | 0:可用于转化为数值类型,并取整1.1 | 0 // 1...
2020-03-31 15:27:55
168
原创 React - 部署
1.package.json 添加homepage{ "homepage" : ".", "name": "myApp", "version": "0.1.0", "private": true, // ...}2.<BrowserRouter> 添加 basename项目不是放在域名的根目录,例如:www.abc.com/project/h5,...
2020-03-27 17:50:00
109
原创 Vue - 跨域代理
参考文档:devServer.proxy前端开发接入接口时,难免遇到跨域请求(协议/域名/端口与后台接口不一致),最简单的解决方法是让后台同事将接口设置为可支持跨域请求,待项目上线再关闭。但这也容易造成,开发的这段时间内,其他人也能访问到后台的接口另一种解决方法是在vue-cli中设置代理,我的项目中使用 vue-cli3、axios出现跨域的写法// axios配置文件axi...
2020-03-03 14:27:41
262
原创 React - keep-alive
React 没有提供类似 Vue <keep-alive> 缓存页面不销毁的功能。在 Github 上,有用户提了相关的 issues:can React support feature like keep-alive in Vue?但 React 的开发者认为新增“缓存页面”功能需要修改原有的代码,并且“缓存页面”容易造成内存溢出,他们并不推荐用户使用/依赖该功能,并给与了其他解...
2020-02-16 17:05:05
834
原创 React - Redux
参考博客 & 文档Redux 中文文档Redux 入门教程(一):基本用法Redux 入门教程(二):中间件与异步操作Redux 入门教程(三):React-Redux 的用法1.storestore用于存放数据的中心// store/index.jsimport { createStore } from 'redux';import rootReduce...
2020-02-14 16:15:03
159
原创 React - react-router
1.安装// npm 安装npm install --save react-router-dom// yarn 安装yarn add react-router-dom --save2.BrowserRouter &HashRHashRouter<HashRouter>在url上会出现#,<BrowserRouter>则不会import R...
2020-02-13 23:35:04
107
原创 React - react-app-rewired
react-app-rewired 与customize-cra 配合,用于 create-react-app 构建的项目中添加 Webpack 配置yarn add customize-cra react-app-rewired --dev更换 package.json 中的 script 命令"scripts": { "start": "react-app-rewired...
2020-02-13 10:34:31
2054
原创 React - Context & 高阶组件
1.Context(上下文)允许跨组件传值,解决多层嵌套时,逐层向下传值的问题创建 Context,设置默认值。在没匹配到 Provider 的情况下才会接收默认值// myContext.jsimport React from 'react'const user = { name: 'Jerry', age: 25, editName: () => {} /...
2020-02-12 22:35:16
279
原创 React - Hooks
函数式组件使用hook,就可以跟class组件一样拥有state、生命周期import React, { useState, useEffect } from 'react'function Home() { let [ count, setCount ] = useState(0) useEffect(() => { console.log('初次挂载 o...
2020-02-12 20:32:46
117
原创 React - Basic
参考博客&文档: React 入门实例教程 React文档 1.理解JSX语法JSX语法允许 HTML与JS 混写,遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析2.JSX 插入变量const desc = 'React'class App extends Comp...
2020-02-11 18:01:25
198
原创 前端 - 小程序框架
小程序开发可以选择原生开发,也可以选择第三方框架开发,框架开发使用类似Vue、React语法进行编写,再转编译成小程序的代码(.wxml、.wxss、.js)类似Vue语法wepy(腾讯):类似vue语法编写小程序,无法跨 H5 和小程序,持续更新mpvue(美团):类似vue语法编写小程序,无法跨 H5 和小程序,几乎停止维护megalo(网易):类似vue语法编写小程序,跨 H...
2020-01-31 21:09:49
684
原创 小程序 - 使用Sass预处理器
小程序使用CSS预处理器微信小程序原生不支持CSS预处理器的语法,但仅仅支持@import引入其他.wxss模块解决方法:在每个页面下新建.scss文件,使用Gulp构建工具将.scss文件转化成.wxss1.在小程序项目根目录执行npm init2.然后安装 gulp、gulp-sass、gulp-rename(使用Less则安装gulp-less)npm i gul...
2020-01-29 15:00:25
1556
原创 JS - 处理连续点击发送的多个请求
在处理以下列表中,如果过于频繁点击选项(红色框),可能会出现数据展示错误的情况(请求函数相同,只有查询参数不同)async loadGood (params) { let res = await app.request(api.loadGood, params) if (res.code === 1) { let { list } = this.data let ...
2020-01-28 10:30:35
2871
原创 JS - 模块
参考博客:module.exports、exports模块化导入导出方式,Module 的语法module.exports /require在node环境JS文件中,module.exports指向的对象最终被当作模块导出,在其他文件通过require导入module.exports是一个对象的引用,可直接赋值// util.jsmodule.export.a = 1mod...
2020-01-27 16:41:55
450
原创 Vue - 适配iPhoneX微信浏览器
vue-cli项目中iPhoneX底部黑色横条遮挡Footer组件的解决方法// index.html<head> // 新增 viewport-fit=cover <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=...
2020-01-09 18:06:14
858
原创 Vue - vue-cli3
关闭eslint '...is defined but no used' 的提示// package.json"eslintConfig": { "rules": { "no-unused-vars": "off" }},
2020-01-08 21:55:43
255
原创 Vue - better-scroll
better-scroll参考资料Github、1.x文档、2.x文档better-scroll介绍基于原生 JS 实现的,不依赖任何框架。完美运用于 Vue、React 等 MVVM 框架1.x版本与2.x版本比较1.x是引入整个better-scroll功能代码,体积大。2.x只提供了基础核心功能,体积更小。如果需要使用下拉加载,上拉刷新等功能,需要额外安装对应的插件使...
2020-01-03 23:04:36
312
原创 Vue - 引入字体文件
参看博客:vue scss @font-face 路径问题// base.scss文件,引入路径'~@/common/@font-face { font-family: 'WenYue-HouXianDaiTi'; src: url('~@/common/style/fonts/WenYue-HouXianDaiTi-NC-W4-75.otf');}// .vue文...
2019-12-30 14:44:10
343
原创 Vue - 转场动画
参考博客:手摸手,带你用 vue 动画实现原生 app 切换效果,丝滑般的体验使用vue官方提供的transition组件实现类似微信的转场动画效果,动画分前进动画与退出动画两种当跳转至新页面(前进)时,当前页面向左侧滑出,新页面从右侧滑入 当触发返回(退出)时,当前页面向右侧滑出,上一层页面从左侧滑入所以需要在store中存放一个变量,transtion组件根据变量名判断使用前进动画...
2019-12-24 15:17:42
1139
原创 前端 - App类型
参考博客:H5 手机 App 开发入门:概念篇、H5 手机 App 开发入门:技术篇手机App类型分为以下三种原生应用(native application,简称 native App) Web 应用(web application,简称 Web App) 混合应用(hybrid application,简称 hybrid App)原生应用需要在应用市场下载优点较好的性能...
2019-12-22 16:10:52
494
原创 前端 - npm
参考博客:npm 包管理器的常用命令常用命令// npm包安装路径npm root// 全局npm包安装路径npm root -g// 某个包对于各种包的依赖关系npm view 模块名 dependencies// 包的源文件地址npm view 模块名 repository.url// 当前模块依赖的node最低版本号npm view 模块名 engines...
2019-12-22 14:34:22
154
原创 Vue - 组件
组件是可复用的 Vue 实例,都有data、computed、watch、methods 以及生命周期钩子等组件命名可在Vue官方提供的代码风格指南中查阅相关命名规则// PascalCase(驼峰命名)MyComponent.vue// 连接符命名my-component.vue都可以通过以下两种方式引用组件<MyComponent></<M...
2019-12-22 10:56:45
90
原创 Vue - mixins
官方文档:https://cn.vuejs.org/v2/guide/mixins.html混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项(data/方法/生命周期钩子函数)。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时,发生冲突时以组件数据优先。 同名钩子函...
2019-12-20 17:18:58
145
原创 前端 - 移动端适配
参考博客:移动前端自适应适配布局解决方案1.flex使用flex弹性布局,元素宽度自适应,高度固定为某个px值。2.固定viewport + rem这种适配方式是以html的font-size值为基础,所有元素的像素大小都使用rem表示(除了font-size以外)。固定视口,缩放值为1.0<meta name="viewport" content="width=d...
2019-12-19 18:42:45
183
原创 CSS - Grid网格布局
参考博客:《CSS Grid 网格布局教程》使用场景网格布局使用场景:九宫格图片展示、日历布局、自定义键盘布局主要概念容器(最外成元素)容器可以是块级的,也可以是行级的display: grid // 块级display: inline-grid; // 行内元素容器主要定义网格布局有几行几列以产生多少个单元格(这些单元格成为项目),例如3行3列则产生9个单元格...
2019-12-19 14:38:04
291
原创 CSS - Sass
学习博客:Sass入门SassCSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间,且易于维护。引入合理的样式复用机制:变量、混入、选择器、继承、内置函数。安装// vue-cli2 中需要手动安装,vue-cli3 在初始化项目时可以选配安装npm install node-sass --save-devnpm install sass-loader@7.3...
2019-12-18 15:28:14
162
原创 CSS - display: table居中
.outer { display: table; width: 100px; height: 100px; font-size: 0; background: lightblue;}.inner { display: table-cell; vertical-align: middle;}.icon { display: inline-block; ...
2019-12-17 22:56:46
523
原创 Vue - axios
参考文档:axios参考博客:《vue中Axios的封装和API接口的管理》《Axios源码深度剖析》axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护配置axios// 设置请求跟路径axios.defaults.baseURL = 'https://www.abc.com/project/api/'// 设置请求超时时间,如果超...
2019-12-17 13:37:44
136
原创 JS - 公众号开发
JS-SDK说明文档、公众号网页授权公众号开发常用功能引入JS文件(https) 授权登录 分享 /定位 /支付1.授权详情可查看公众号网页授权,前端需要操作(跳转到微信给的地址获取code,将code发送给后台换取token与用户信息)1 第一步:引导用户进入授权页面用户同意授权,获取code(通过window.location.replace跳转到以下的url)...
2019-12-16 22:52:05
621
原创 JS - 逻辑与、非
&&逻辑与对于布尔值的情况:必须都为ture才返回true,否则返回falsetrue && true // truetrue && false // false对于不是布尔值的情况:第一个操作数等于0、null、undefined、false、空字符串时,返回它自身(不执行后续的操作数),否则返回第二个操作数0 &&...
2019-12-13 22:34:20
139
原创 Vue - keep-alive
在使用keep-alive缓存组件之前,需要了解组件的生命周期变化,下面列举主要的生命周期函数// Home.vuebeforeRouteEnter: (to, from, next) => { console.log('Home beforeEnter') next()},beforeRouteLeave (to, from, next) { console.log...
2019-12-13 16:27:36
135
原创 Vue - vuex
Vuex状态管理模式当两个或两个以上的组件需要共用同一个数据源时,使用Vuex对数据的管理会变得更见简单轻松(相比localStorage、路由传参)响应式Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件(视图)也会相应地得到高效更新。核心概念state getters mutations actions...
2019-12-13 07:55:34
231
原创 JS - 数组函数
forEach遍历操作数组的每个元素。如果是数值数组,则不改变原数组;如果是对象数组,可以为元素添加属性或修改属性值 没有返回值,不能返回新数组let arr = [1, 2, 3]arr.forEach((item) => { item + 1})console.log(arr) // [1, 2, 3]// 修改对象中的值let arr = [{count: ...
2019-12-12 16:21:07
81
原创 小程序 - 状态管理
手动构造小程序官当暂时没有提供状态管理模式,可以使用globalData实现一个简单的状态管理// app.jsApp({ globalData: { count: 1 // 定义全局变量 }, // 初始化函数。进入页面 onShow() 阶段调用,在页面 data 中使用全局变量 initData(_this, params) { let obj ...
2019-12-11 16:46:53
1483
1
原创 Vue - App.vue
vue-cli脚手架搭建的项目,在main.js引入App.vue,App.vue作为最顶层的组件,也具有自己的生命周期函数,其主要的功能是嵌套子组件页面加载时,从视图的最顶层组件到最底层组件依次创建(created),再从最底层组件到最顶层组件以此挂载(mounted)// App.vue,其中嵌套v-header与v-tab子组件<template> <di...
2019-12-07 21:16:15
780
原创 HTTP - Content-Type
参考博客:Content-Type 详解、Content-Type的理解HTTP请求头与响应头中含有的Content-Type字段,用于规定传输数据在发送与接受时,服务器与客户端对数据的如何解析常用的三种类型:application/x-www-form-urlencoded:form表单默认提交方式,以键值对的形式传递参数,如:a=1&b=2(序列化),支持GET/POST请...
2019-12-05 23:07:36
85
小程序 日历组件 ______
2019-01-02
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人