skysys的研究小屋

原本组件传递需要一层一层props传递，传递太过繁琐多个 context。

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，在 2015 年 6 月正式发布。目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

测浏览器宽高

transform-origin：设置中心点。

效果效果图：code:<view class="container"> <view class="topcover"/></view>.topcover { width: 100%; height: 300rpx; position: relative; z-index: -1; background-color: rgb(255,236,193);}.topcover::after { conten

Flutter APP 安装包中包含代码和资源文件(assets)。Flutter 使用 pubspec.yaml 来管理应用程序所需的资源。1 指定 Asseteg.flutter: assets: - assets/my_icon.png - assets/background.png# 注意：上面的路径是 pubspec.yaml 所在路径的相对路径。在构建期间，Flutter 将 asset 放置到 asset bundle 的特殊存档中，应用程序可以在运行时读取它们

项目场景：提示：这里简述项目相关背景：例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大)问题描述：提示：这里描述项目中遇到的问题：例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据APP 中接收数据代码：@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obta

项目场景：学习flutter项目，参考wechat_flutter项目，然而发现无法运行。问题描述：Your Flutter application is created using an older version of the Androidembedding. It is being deprecated in favor of Android embedding v2. Follow the steps athttps://flutter.dev/go/android-project-mi

ERROR in ./node_modules/@ant-design/pro-form/es/components/List/index.less问题描述：基于Antd Pro v5的项目 yarn start报错：ERROR in ./node_modules/@ant-design/pro-form/es/components/List/index.lessModule build failed (from ./node_modules/@umijs/bundler-webpack/lib/w

0 移动开发技术简介原生开发：某一个移动平台（比如iOS或安卓）所特有的应用，使用相应平台支持的开发工具和语言，并直接调用系统提供的SDK API。比如Android原生应用就是指使用Java或Kotlin语言直接调用Android SDK开发的应用程序；而iOS原生应用就是指通过Objective-C或Swift语言直接调用iOS SDK开发的应用程序。纯原生开发主要面临动态化和开发成本两个问题。跨平台技术、Hybrid技术（三类）：H5 + 原生（Cordova、Ionic、微信小程序）

写法一：利用request传async function <ProFormSelect width="md" name="department_id" label='部门' request={async () => { let { data: depts } = await fetchDeptLists()

需求描述antd-pro默认放行的只有loginPath，由于项目需求，我们还需要放行其他页面，比如registerPath，那么我们需要修改antd-pro的代码，实现白名单功能（白名单内的页面都做放行处理）。具体细节antd-pro v5实现路由拦截器的逻辑在/src/app.tsx文件里。包括代码：export async function getInitialState(): Promise<{ settings?: Partial<LayoutSettings>;

data入参可能为null,undefined，通常我们的写法是直接上if判断啥的，然后再取data中的属性，但是有了问号点(?.)写法就简单很多了，看下面例子：//1.data可能为null,undefined , row也可能为null,undefined//2.假设data完整结构 {row:{name:'aaa'}}function getData(data: any){ let name = data?.row?.name}普通写法//1.data可能为null,undefined

TypeScript 的核心在于静态类型，编写 TS 时会定义很多的类型，但是主流库都是 JavaScript写的，不支持类型系统。如何让这些第三方库也可以进行类型推导呢？将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。ReferenceJavaScript 和 TypeScript 交叉口 —— 类型定义文件(*.d.ts)TypeScript 声明文

与vue后台系统不同，ant design pro的port不是写在config里的（是umi默认的端口），所以全局查找8000没有查到配置项。修改方式如下： 在package.json文件中添加--port参数

Attention：本文读者需要有前端基础，非面向前端小白。适合有基础的读者快速入门React，略去了文档中的大量easy simple保留核心内容。导入React 是一个用于构建跨平台用户界面的JS库。起源于 Facebook。基于声明式和组件驱动来构建UI。采用单向响应的数据流。React 应用程序组成部分：元素和组件，React 元素是不可变对象，更新UI唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。。脚本推荐采用JSX（其他可选：JS\TS）。React .

useStateconst [state, setState] = useState(initialState);返回一个 state，以及更新 state 的函数。在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。setState(newState);在后续的重新渲染中，useState 返回的第一个值将始终是更新后最新的 state。

npm install vue-directive-image-previewer -Dimport VueDirectiveImagePreviewer from 'vue-directive-image-previewer'import 'vue-directive-image-previewer/dist/assets/style.css'Vue.use(VueDirectiveImagePreviewer) 使用 <img v-image-preview src="pictur

存储位置有：vuex,localStorage和sessionStorage对比：localStorage优点：localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口）。缺点：同一个属性名的数据会被替换，不同浏览器无法共享localStorage或sessionStorage中的信息。sessionStorage优点：s

cookie的存储cookie是浏览器支持的一种本地存储方式。以dict，键值对方式存储。{"sessionkey": "123"}浏览器会自动对于它进行解析。http请求是一种无状态的请求用户向服务器发起的两次请求之间是没有状态的。也就是服务器并不知道这是同一个用户发的。有状态请求(cookie)服务器a发回来的id会放到服务器a的域之下。不能跨域访问cookie。使用浏览器随便打开一个网页，然后f12打开。比如我使用的Chrome浏览器会找到存储在浏览器本地的cookie值点

This dependency was not found:umi/link in ./pages/index.js解析：版本问题，文档没有跟新。import { Link } from 'umi'; //（官方文档）

问题描述外层容器使用了fixed布局导致子元素布局错乱问题分析当position的值为 fixed时，需要指定宽度解决方法外层盒子设置为定宽且fixed即可

相比于传统的CSS Normalize.css是一种CSS reset的替代方案，在磨人的HTML元素样式上提供了跨浏览器的高度一致性。作用：安装npm install --save normalize.css main.js引入import 'normalize.css/normalize.css'如果引入报错，可能没有安装css-loader 和style-loadernpm install css-loader style-loader...

this.$el获取Vue实例关联的DOM元素；vue中也是允许进行dom操作的（但是不建议）注意this.$el关联的是真实Dom，所以需要在mounted渲染真实Dom之后才可以使用了this.$refs获取页面中所有含有ref属性的DOM元素（如vm.$refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个）this.$options获取Vue实例的自定义属性（如this.$options.methods,获取Vue实例的自定义属

<template> <img :src="imgUrl" /></template>在script中设置变量<script> //方法1.直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2.将imgUrl放在数据里 data(){ return { imgUrl:require("../assets/test

npm install jquery --save //安装jquery 一般安装成功后在package.json文件内的dependencies项中会有"jquery": “^1.12.4”，如果没有可以手动添加。打开.eslintrc.js 文件(如果有的话），找到env ，在里面 添加 jquery:true，默认应该是只有node:true，如果都没有，那就加上env呗main.js引入import $ from 'jquery'vue.config.jsconst webpack

npm install vue-router在App.vue中写router-view<template> <div id="app"> <router-view></router-view> </div></template><script>export default { name: 'App',}</script><style lang="less" sc

背景执行 yarn global add @vue/cli 后，重启bash……， vue命令依然不生效；而npm 全局安装（npm install -g [package]）后，命令生效。解决办法yarn global bin //查找yarn安装目录复制安装目录至电脑（我的电脑是win10）的环境变量中去，win7则在path后添加目录，并用分号分隔重新启动终端，发现全局命令行可以生效了...

常用名词：PV、UV、DAU、活跃率、次日留存、7日留存、14日留存；PV：页面访问量UV：访客访问数DAU：日活跃用户量其中，活跃率 = 该事件DAU / 该页面DAU；次日留存 = 第1日活跃的用户在第二日依旧出发该点 DAU / 第1日 DAU；7日留存 = 第1日活跃的用户在接下来连续6日触发过该点的DAU / 第1日 DAU；14日留存 = 第1日活跃的用户在接下来连续13日触发过该点的DAU / 第1日 DAU。埋点的目的：当用户在产品中做一些操作时，如：点击按钮、进入某页面

npm 安装包报错 rollbackFailedOptional设置的代理错误，删除即可npm config rm proxynpm config rm https-proxy

1.删除对象空属性值正常情况下，拿到的数据是{01:[“鹿晗”,“关晓彤”]}但当用户更改选项之后，我们可能拿到数据就是{01:[]}，01的属性值是空的,那表单提交的时候我需要删除这条空数据var obj={100:[]};for(var key in obj){ if(obj[key] ==''){ delete obj[key] } } console.log(obj)2. 删除数组对象的中的空值 var arr = [{}, { 100:

1. 创建blob对象import { saveAs } from "file-saver";const res = await getUserOperLogsForDownload();const blob = new Blob([res.data], { type: "text/csv;" });let contentDisposition = res.headers["content-disposition"];let patt = new RegExp("filename=([^;]

Selenium Webdriver需要深刻理解DOM结构，需要先定位元素才能做后一步的自动化1 如何在不同的浏览器上查看元素Firefox/Chrome开发者工具（推荐chrome）在一个浏览器中定位到元素后去写代码在其他浏览器中也是适用的。本节主要介绍查看元素，工具和插件介绍；创建xpath和css选择器定位（不包括简单地定位方式：id，name，tagname，classname，linktext，patiallinxtext）Note: XPath 是一门在 XML .

演讲者：<无忧>嘉宾介绍：非正经程序员；Vue3 Contributor；Web前端高级讲师，前寺库（SECOO）Web前端高级工程师，原国内知名IT教学机构高级前端讲师7年一线产品开发经验，包含5年研发教学经历Day 1 带你走进前端的世界解答：（1）前端是什么？（2）前端能做什么？（3）前端的优势？三大问题。Web起源：CERN工作的Tim Beners·Li；问题背景：大型跨国界组织机构协作，信息庞大，电脑上的资料不互通。时间线：1993年 CERN把WWW民用199

错误原因：sass-loader版本过高导致编译错误解决办法：将sass-loader版本调至7.3.1

vue脚手架3出来有一段时间了，相比之前2,cli3文件更为简洁了许多，关于webpack的配置文件config,build已经被删除，若是需要进行配置需要自己手动建立一个vue.config.js，在里面可以进行配置，具体参数详见官网：https://cli.vuejs.org/zh/config/#vue-config-js这里着重讲一下vue-cli3如何使用less进行开发，cli3使用less更为简单些，只需安装less依赖包即可：npm安装：npm i less@2.7.3 less-lo

1、相关概念CSR：客户端渲染(Client Side Render)。渲染过程全部交给浏览器进行处理，服务器不参与任何渲染。页面初始加载的HTML文档中无内容，需要下载执行JS文件，由浏览器动态生成页面，并通过JS进行页面交互事件与状态管理。SSR：服务端渲染(Server Side Render)。DOM树在服务端生成，而后返回给前端。即当前页面的内容是服务器生成好一次性给到浏览器的进行渲染的。同构：客户端渲染和服务器端渲染的结合，在服务器端执行一次，用于实现服务器端渲染（首屏直出），

nodejs热更新修改了js文件，或是调试功能，或是增加功能。这时需要重新发布该服务，每次修改都需要执行以下两步：1 control+c2 node server.js很不爽！因此有人开发了一个自动发布（热发布）的工具，你只需要在修改文件后保存，它就能自动替你发布，这就是所谓的热部署。就像tomcat或websphere等一些主流的web应用服务器那样保存即热部署。下面将介绍NodeJS中的开源热部署工具。supervisor 可以帮助你实现这个功能，它会监视你对代码的改动，并自动重启 Node.

微信小程序开发工具win10下编译非常慢的解决方法点击微信小程序开发工具右侧详情，在本地设置中将【启用多核心编译】选项去掉，开发工具重启即可

小程序帐号被系统冻结问题汇总1、管理员/项目成员微信号、小程序帐号登录邮箱收到小程序长时间不使用将被冻结的通知该情况是由于你的帐号已经长时间不使用导致。如果该帐号需要继续使用，请在规定时间前登录使用；若未在指定时间内登陆，将根据《微信小程序平台运营规范》规定冻结此帐号。2、小程序帐号收到已冻结的通知该情况是由于你小程序长时间未使用，且在下发即将冻结提醒后仍未在指定时间内登录，故小程序为冻结状态；如需重新使用该小程序，请登录小程序帐号后台进行找回，或在帐号找回流程中，通过原始ID搜索找回；找回后帐号恢