- 博客(107)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 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
147
原创 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
617
原创 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
6396
原创 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
148
原创 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
100
原创 Vue - 跨域代理
参考文档：devServer.proxy前端开发接入接口时，难免遇到跨域请求（协议/域名/端口与后台接口不一致），最简单的解决方法是让后台同事将接口设置为可支持跨域请求，待项目上线再关闭。但这也容易造成，开发的这段时间内，其他人也能访问到后台的接口另一种解决方法是在vue-cli中设置代理，我的项目中使用 vue-cli3、axios出现跨域的写法// axios配置文件axi...
2020-03-03 14:27:41
251
原创 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
807
原创 React - Redux
参考博客 & 文档Redux 中文文档Redux 入门教程（一）：基本用法Redux 入门教程（二）：中间件与异步操作Redux 入门教程（三）：React-Redux 的用法1.storestore用于存放数据的中心// store/index.jsimport { createStore } from 'redux';import rootReduce...
2020-02-14 16:15:03
142
原创 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
94
原创 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
2004
原创 React - Context & 高阶组件
1.Context（上下文）允许跨组件传值，解决多层嵌套时，逐层向下传值的问题创建 Context，设置默认值。在没匹配到 Provider 的情况下才会接收默认值// myContext.jsimport React from 'react'const user = { name: 'Jerry', age: 25， editName: () => {} /...
2020-02-12 22:35:16
267
原创 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
103
原创 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
168
原创 前端 - 小程序框架
小程序开发可以选择原生开发，也可以选择第三方框架开发，框架开发使用类似Vue、React语法进行编写，再转编译成小程序的代码（.wxml、.wxss、.js）类似Vue语法wepy（腾讯）：类似vue语法编写小程序，无法跨 H5 和小程序，持续更新mpvue（美团）：类似vue语法编写小程序，无法跨 H5 和小程序，几乎停止维护megalo（网易）：类似vue语法编写小程序，跨 H...
2020-01-31 21:09:49
649
原创 小程序 - 使用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
1509
原创 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
2848
原创 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
419
原创 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
843
原创 Vue - vue-cli3
关闭eslint '...is defined but no used' 的提示// package.json"eslintConfig": { "rules": { "no-unused-vars": "off" }},
2020-01-08 21:55:43
210
原创 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
301
原创 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
323
原创 Vue - 转场动画
参考博客：手摸手，带你用 vue 动画实现原生 app 切换效果，丝滑般的体验使用vue官方提供的transition组件实现类似微信的转场动画效果，动画分前进动画与退出动画两种当跳转至新页面（前进）时，当前页面向左侧滑出，新页面从右侧滑入 当触发返回（退出）时，当前页面向右侧滑出，上一层页面从左侧滑入所以需要在store中存放一个变量，transtion组件根据变量名判断使用前进动画...
2019-12-24 15:17:42
1095
原创 前端 - 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
474
原创 前端 - 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
133
原创 Vue - 组件
组件是可复用的 Vue 实例，都有data、computed、watch、methods 以及生命周期钩子等组件命名可在Vue官方提供的代码风格指南中查阅相关命名规则// PascalCase（驼峰命名）MyComponent.vue// 连接符命名my-component.vue都可以通过以下两种方式引用组件<MyComponent></<M...
2019-12-22 10:56:45
81
原创 Vue - mixins
官方文档：https://cn.vuejs.org/v2/guide/mixins.html混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项（data/方法/生命周期钩子函数）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时，发生冲突时以组件数据优先。 同名钩子函...
2019-12-20 17:18:58
135
原创 前端 - 移动端适配
参考博客：移动前端自适应适配布局解决方案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
158
原创 CSS - Grid网格布局
参考博客：《CSS Grid 网格布局教程》使用场景网格布局使用场景：九宫格图片展示、日历布局、自定义键盘布局主要概念容器（最外成元素）容器可以是块级的，也可以是行级的display: grid // 块级display: inline-grid; // 行内元素容器主要定义网格布局有几行几列以产生多少个单元格（这些单元格成为项目），例如3行3列则产生9个单元格...
2019-12-19 14:38:04
272
原创 CSS - Sass
学习博客：Sass入门SassCSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间，且易于维护。引入合理的样式复用机制：变量、混入、选择器、继承、内置函数。安装// vue-cli2 中需要手动安装，vue-cli3 在初始化项目时可以选配安装npm install node-sass --save-devnpm install [email protected]...
2019-12-18 15:28:14
134
原创 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
494
原创 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
111
原创 JS - 公众号开发
JS-SDK说明文档、公众号网页授权公众号开发常用功能引入JS文件(https) 授权登录 分享 /定位 /支付1.授权详情可查看公众号网页授权，前端需要操作(跳转到微信给的地址获取code，将code发送给后台换取token与用户信息)1 第一步：引导用户进入授权页面用户同意授权，获取code（通过window.location.replace跳转到以下的url）...
2019-12-16 22:52:05
602
原创 JS - 逻辑与、非
&&逻辑与对于布尔值的情况：必须都为ture才返回true，否则返回falsetrue && true // truetrue && false // false对于不是布尔值的情况：第一个操作数等于0、null、undefined、false、空字符串时，返回它自身（不执行后续的操作数），否则返回第二个操作数0 &&...
2019-12-13 22:34:20
125
原创 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
111
原创 Vue - vuex
Vuex状态管理模式当两个或两个以上的组件需要共用同一个数据源时，使用Vuex对数据的管理会变得更见简单轻松（相比localStorage、路由传参）响应式Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件（视图）也会相应地得到高效更新。核心概念state getters mutations actions...
2019-12-13 07:55:34
206
原创 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
71
原创 小程序 - 状态管理
手动构造小程序官当暂时没有提供状态管理模式，可以使用globalData实现一个简单的状态管理// app.jsApp({ globalData: { count: 1 // 定义全局变量 }, // 初始化函数。进入页面 onShow() 阶段调用，在页面 data 中使用全局变量 initData(_this, params) { let obj ...
2019-12-11 16:46:53
1440
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
714
原创 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
70
小程序 日历组件 ______
2019-01-02
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人