一般UI给到的数据化大屏设计稿是电脑屏幕的全屏分辨率(即宽高16:7的占比)，所以为了适应浏览器可视化窗口的比例，用transform:scale()实现。注意：固定了宽高比，所以窗口比例不足时，上下或左右会出现空白区(可外层套个容器，给与大屏主色调相近的背景色)。 JS写法： //设计稿宽高 constdesignDraftWidth=1920;//设计稿的宽度 constdesignDraftHeight=1080;//设计稿的高度 //数据大屏自适应函数 constscreenAdapt=()=>{ //获取可视化窗口宽高与屏幕大小宽高比 constwScale=window.i...

JSX书写规范 JSX的最外层只能有一个根元素，可以使用div、span等标签 正常情况下，我可以在最外层包裹一个小括号（），方便我们更好的格式化代码 JSX中的标签可以是单标签，也可以是双标签；注意：如果是单标签，必须以/>结尾 在使用变量时，我们可以将其放在一个大括号中，大括号内可以放置任何有效的JavaScript表达式 代码示例如下： constroot=( <divclassName="list"> <div>第一个组件内容！</div> <imgsrc="xxx.jpg"/> {1=1&&<div&g...

简单说下为什么React选择函数式组件，主要是class组件比较冗余、生命周期函数写法不友好，骚写法多，functional组件更符合React编程思想等等等。更具体的可以拜读dan大神的blog。其中Functioncomponentscapturetherenderedvalues这句十分精辟的道出函数式组件的优势。 但是在16.8之前react的函数式组件十分羸弱，基本只能作用于纯展示组件，主要因为缺少state和生命周期。本人曾经在hooks出来前负责过纯函数式的react项目，所有状态处理都必须在reducer中进行，所有副作用都在saga中执行，可以说是十分艰辛的经历了。在hook...

React的HooksAPI为我们提供了一种新的处理副作用的方式——useEffect。useEffect函数接受两个参数：一个是_副作用函数_和一个_依赖数组_。副作用函数是在组件render之后运行，而依赖数组告诉React何时应该执行或跳过该副作用。如果没有提供依赖数组，`useEffect`将在每次渲染后运行。如果提供了空的依赖数组，副作用将只在第一次渲染后及在卸载时运行。 jsx useEffect(()=>{ console.log('componentdidmount'); return()=>{ console.log('componentwillunmount'...

如果说JSX是学习React框架必须要了解的一个概念，那么“生命周期”则是紧随其后的第二个需要学习的内容。虽然现在最新的React版本都推荐使用函数组件结合hooks的方式来组织应用，而且在函数组件中淡化了对生命周期的介绍，但是对于类组件生命周期的学习理解能够帮助我们以追根溯源的方式，更全面的建立对React框架的观感，同时从底层认识React中两个重要的阶段：render与commit，帮助我们编写正确且高效的代码。 本次分享会从下面的几个问题出发： 生命周期到底是什么？ 类组件生命周期函数有哪些，都在什么场景下使用？ 生命周期函数演化的原因是什么？ Hooks与生命周期函数的对应关系是什...

为了降低首屏代码大小，对于一些大的第三方库或者团队的基础工具库，需要按需导入模块。如： importButtonfrom'antd/lib/button'; 但这在需要导入非常多的组件场景时，开发繁琐，体验不友好。在这些组件库的官方文档或者社区会推荐一些babel插件，帮助达到良好的开发体验和性能优化。 本文将详细探究这些工具的原理。 antd等UI组件库按需加载 在使用antd的老版本时，会推荐使用babel-plugin-import工具按需导入组件。工具可以做到如下的转换： import{Button}from'antd'; ReactDOM.render(<Button&g...

题目：鸡兔同笼，共35只头，94只脚，问鸡兔各多少？ 从数学上来看题目很简单，但是从代码角度相对困难一些。 这里我参考了小学的解题思路，假设法 假设鸡有x只，那么兔有35-x只。鸡的脚有2x只，兔的脚有4（35-x）只。 用c语言实现如下： defineCRT_SECURE_NO_WARNINGS include<stdio.h> include<stdlib.h> intmain(void) { intchicken; intrabbit; inthead;//鸡的头有35个 intfoot; scanf("%d%d",&chicken,&ra...

1.环境准备 初始化项目：npxcreate-react-appsimple-react删除一些代码，最关键的内容就是：src/index.jspublic/index.htmlpackage.json中的dependencies和scripts： 2.JSX介绍 JSX是JavaScript的一种语法扩展。JSX到普通Javascript的代码的转化是通过babel完成的。 3.React.createElement编写 DISABLE_NEW_JSX_TRANSFORM=true禁用掉新的jsxdev转换，使用React.createElement 这个迷你的包(cross-env)能够提...

实现方式 1.安装react-native-dotenv npminstallreact-native-dotenv--save //或者 yarnaddreact-native-dotenv 2.在你的.babelrc（如果没有新建一个）文件中配置一下设置 简单配置，都使用默认参数 { "plugins":[ ["module:react-native-dotenv"] ] } 定制配置，自定义 { "plugins":[ ["module:react-native-dotenv",{ "envName":"APP_ENV", "moduleName":"@env", "path":"...

ReactNative rn可以通过Linking这个组件来唤起其他app应用(前提要知道对应app应用的urlscheme)，他主要提供了三个主要的api调用： 1.canOpenURL(url)：判断当前urlscheme是否在安卓机器上有安装过； Linking.canOpenURL('weixin://') .then(isSupport=>{...}) .catch(e=>{...}) 2.openURL(url)：在安卓上打开指定的urlscheme的app应用； Linking.canOpenURL('weixin://') .then(isSupport=&g...

简单使用介绍: installation $npminstall--saveredux-actions 或 $yarnaddredux-actions 多余的使用 import{createAction,handleActions}from'redux-actions'; constspeak=createAction('SPEAK') exportconstreducer6=handleActions( //reducerMap { [speak]:(state,action)=>({...state,speak:action.payload.speak}) }, {speak...

框架作用的平台不同 RN是由React衍生出来的，两种框架都是用JSX开发语法，但是RN是用来开发真正原生渲染的iOS和Andriod移动应用的JS框架，而React是将浏览器作为渲染平台。 渲染周期 react组件挂载过程　－＞　重新渲染过程。 React的渲染周期开始于react组件挂载到DOM之后，接着React进入渲染周期并根据需要渲染组件。在渲染阶段，React将开发者在return中返回的HTML标记直接按需渲染到页面上。 ReactNative生命周期与React基本相同，在渲染上因为ReactNative依赖于桥接，并不在UI主线程运行，它可以在不影响用户体验的前提下执行这...

Expo搭建RN项目 Expo 搭建项目有两种方式：一种是通过Expo的脚手架 expo-cli；一种是通过 create-react-native-app。本文采用第一种。 1、安装expo-cli npminstallexpo-cli--global 2、创建项目 expoinitmy-new-project 会有两类模板让你选择：托管工作流，裸露工作流（感觉叫原生工作流更好理解点。详情见Workflows） expoinitsimple-project ?Chooseatemplate: ----Managedworkflow----- ❯blan...

为什么要有前端路由 传统的多页面形式刚开始，我们要实现路由的跳转都是依靠后端路由实现的。每一个页面都是一个单独的html文件，用户进行页面切换的时候，浏览器发送不同的url请求，服务器接收到以后把该url对应的html文件返回给我们。浏览器拿到之后就开始解析，显示。缺点： 每一次跳转都需要去向后端请求完整的html页面，重新加载。 加大服务器的压力 SPA随着ajax（浏览器实现异步加载的一种技术方案）的出现，单页面模式逐渐代替了传统模式。通俗一点解释，就是我们现在只有一个html文件。多个页面的切换实际上是视图的切换。SPA是通过JS来修改html内容。其自身的url是没有改变的。...

1.安装依赖包 yarn--savekoakoa-route 2.node项目里面在app.js写入下面内容 //app.js constKoa=require('koa'); constrouter=require('koa-router')(); constapp=newKoa(); constindex=(ctx,next)=>{ ctx.body='HiPotato!'; }; app.use(router.get('/',index)); app.use(router.routes()); app.listen(3000); console.log('listen...

基础概念 Git是一个代码版本管控的工具，是一个内容寻址文件系统，即简单的键值对数据库。 Git的一些基础基础知识 版本库：git在本地开辟的一个存储空间，一般在.git文件里。 工作区(workspace)：就是编辑器里面的代码，平常开发直接操作的就是工作区。 索引区/暂存区（index/stage）：暂时存放文件的地方，gitadd 后也就将工作区代码放到了暂存区（缓冲区）。 本地仓库(Repository)：gitcommit 后就是将暂存区的代码放到本地仓库。 远程仓库(Remote)：线上代码存放的地方，如github/gitee。 他们之间的关系是这样子的：...

使用ReactNative从零开始开发一款移动应用是一件很惬意的事情，但对于一些已经上线的产品，完全摒弃原有应用的历史沉淀，全面转向ReactNative是不现实的。因此，使用ReactNative去统一原生Android、iOS应用的技术栈，把它作为已有原生应用的扩展模块，是目前混合开发的最有效方式。首先，在原生Android项目目录下执行以下命令创建一个package.json文件。 yarninit 然后，根据提示输入对应的配置信息。等待命令执行完成之后，我们会发现Android项目的根目录多了一个package.json文件。接下来，使用如下命令添加React和ReactNativ...

最近要开发一个APP，技术选型用了ReactNative，所以抽时间先搭建了个Android的开发环境，准备先来个HelloWorld看看，然后...就被虐了，所以记录下被虐的过程中遇到的问题。 1.首先就是按照reactnative中文网的顺序，该安装的安装，到react-nativerun-android的时候，出现第一个问题：Exceptioninthread“main”java.util.zip.ZipException，后面还有说gradle文件的一堆问题。。。解决方案：然后我就去gradle官网下了一个同样版本的（我的版本是gradle-5.4.1-all.zip）,把我的C:\U...

1、vuecreatevue-electron-demo创建项目 2、安装vue-cli-plugin-electron-builder 进入vue-electron-demo目录中 执行命令vueaddelectron-builder添加vue-cli-plugin-electron-builder插件 npmrunelectron:serve进行开发模式 npmrunelectron:build发布项目

nginx反向代理POST请求 在使用nginx反向代理POST请求的时候，错误配置情况 location/sms/sendSmsLocal/{ proxy_passhttp://localhost:10086/sms/sendSmsLocal/; } 这样配置会出现的问题 原本发出的请求是POST请求，经过nginx转发以后就会变成GET请求 原本POST请求携带的请求体经过转发以后会丢失，正确配置代理POST请求 location/sms/sendSmsLocal{ proxy_passhttp://localhost:10086/sms/sendSmsLocal; prox...