kjs---CSDN博客

使用 PropTypes 进行类型检查1.自 React v15.5 起,使用prop-types库进行类型检查。2.之前使用的React.PropTypes 已移入另一个包中,我们提供了一个 codemod 脚本来做自动转换。3.详情可观看官网https://react.docschina.org/docs/typechecking-with-proptypes.html一、前言应用程序不断增长，你可以通过类型检查捕获大量错误可以使用Flow 或TypeScript 等 JavaS

2021-11-30 14:13:03 409

原创 mobx简单、可扩展的状态管理

mobx关于mobx的一些文档：git地址https://github.com/mobxjs/mobx中文文档https://cn.mobx.js.org/一、安装npm install mobx --saveReact 绑定库: npm install mobx-react --save二、MobX 要点使用 MobX 将一个应用变成响应式只需三步：定义状态并使其可观察创建视图以响应状态的变化更改状态...

2021-11-29 14:58:22 313

原创 react hook父组件调用子组件方法

子组件中import React, { useState, useEffect, forwardRef, useImperativeHandle,} from 'react';// props子组件中需要接受reflet Subcomponents = (props,ref) => {const onCallback = () => { console.log('执行了')} // 此处注意useImperativeHandle方法的的第一个参数是目标

2021-11-29 11:08:54 3506 2

原创 React-intl 实现多语言

React-intl 实现多语言一、前言最近做的一个react项目有做国际化的需求。React 做国际化，我们项目使用的是React-intl ，这个库提供了 React 组件和Api两种方式来格式化日期，数字和字符串等。知道这个库了，那让我们开始使用它详情可看网址 https://formatjs.io/docs/react-intl二、使用1.安装npm install react-intl --save2.添加引用import {IntlProvider, addLocaleDa

2021-11-29 10:37:38 1482

原创 js 中的对象属性顺序问题

js 的对象属性可能是按照某种顺序排序的？1.对象属性先按数字型的排序，再是非数字型的属性。let a = { b: "1", 1: "nn",2:"mm",a:"2", 测试: "test" };// 输出 {1: "nn", 2:"mm", b: "1", a:"2",测试: "test"}let b = { 测试: "test", 1: "nn", b: "1" };// 输出 {1: "nn", 测试: "test", b: "1"}2.如果属性中既存在数字型的属性，又存在对应字符型

2021-11-29 09:57:35 2343

原创 react----antd(1)

表长度校验 128字节其他输入框后端规定多宽就设置多宽form 表单高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。参数说明validateFields触发表单验证(nameList?: NamePath[]) => PromiseresetFields重置一组字段到 initialValuesinitialValuesform上设置默认值getFieldsValue获取一组字段名对应的值，会按照对应结构返回。默认返回

2021-08-23 18:58:10 565

原创 react----hook(1)

react hookHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。为什么需要hook？在组件之间复用状态逻辑很难，providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。而Hook 使你在无需修改组件结构的情况下复用状态逻辑。每个生命周期常常包含一些不相关的逻辑，相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在

2021-08-23 18:55:31 101

原创面试经典问题(2)

面试经典问题(2)事件循环uinapp 跟原生微信小程序的优缺点class 和构造函数的区别requestAnimationFramevue.use()vue3和vue2常见的使用差异async和awaitPromise延迟加载组件防抖节流路由的钩子

2021-06-23 21:21:54 109

原创 uni-app-简介-背景-快速上手

uni-app一、简介uni-app 是一个使用Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。官网地址： https://uniapp.dcloud.io/README二、背景1.当前跨平台开发存在的三个问题多端泛滥体验不好生态不丰富2.Uni-app 产品特征跨平台更多真正做到“一套代码、多端发行”条件编译：优雅的在一个项目里调用不同平台的功能

2021-06-20 11:46:42 637

转载微信小程序开发(7)---协同工作篇

协同工作(成员管理)10.1 了解权限管理需求、组织结构、开发流程了解权限管理需求在中大型的公司中，人员的分工非常仔细：同一个小程序项目，一般会有不同的岗位、不同角色的员工同时参与设计与开发此时出于管理需要，我们迫切需要对不同的岗位、不同的角色的员工的权限进行边界的划分，使他们能够高效的进行协同开发了解项目成员的组织结构小程序的开发流程10.2 了解小程序成员管理的两个方面小程序成员管理体现在管理员对小程序项目成员及体验成员的管理：项目成员表示参与小程序开发、运营的成员可登

2021-06-15 19:19:35 2130

原创微信小程序开发(6)---事件篇

微信小程序开发(6)—事件篇事件是什么事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理小程序中常用事件bindtap (bind:tap)、bindinput (bind:input)、bindchange (bind:chage)catchtap …事件的语法格式在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为…通过 bind事件名，可以为组件绑定事件在页面的 .j

2021-06-09 18:49:26 697

原创 css设置文本多行省略

多行省略/*多行省略*/.Pellipsis2{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}.Pellipsis3{ overflow : hidden; text-overflow: ellipsis; display: -webkit-bo

2021-06-06 14:33:44 123 1

原创微信小程序开发(5)---自定义组件篇

微信小程序开发(5)—自定义组件篇一.定义自定义组件以新建一个demo组件为例，首先在根目录下创建一个components文件夹然后创建一个demo文件夹，分别创建demo.json,demo.wxml,demo.wxss,demo.js四个文件。在 demo.json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）{ "component": true, "usingComponents": {}}在 demo.wxm

2021-06-03 23:30:06 491 1

原创微信小程序开发(4)---小程序组件篇

微信小程序开发(3)—区别篇

2021-06-01 21:39:59 1132

原创微信小程序开发(3)---小程序语法篇

微信小程序开发(3)—小程序语法篇一.新建页面新建小程序页面有两种方式官方推荐文件夹名称和页面的名称一致，方便后期的维护新建页面组件的时候，不需要输入后缀名注意:对 pages 目录下页面的删除或者新增都需要在 app.json 文件的 pages 数组中进行新增或删除方式1:在pages文件夹中右击选择新建文件夹,命名为xxx右击新建的xxx文件夹 ,选择新建page,命名为跟文件夹名相同方式2:在项目中点击app.json文件进入到编辑界面,对pages配置添加字段 "p

2021-05-29 18:01:57 894

原创微信小程序开发(2)---项目的组成篇

微信小程序开发(2)—项目的组成部分一.小程序目录的构成pages 用来存放所有小程序的页面utils用来存放工具性质的模块（例如：格式化时间的自定义模块）app.js 小程序项目的入口文件 — main.jsapp.json 小程序项目的全局配置文件app.wxss小程序项目的全局样式文件project.config.json 项目的配置文件sitemap.json 用来配置小程序及其页面是够允许被微信索引 – SEO – 搜索引擎优化二.小程序页面构成:小程序页面由4个基本文

2021-05-28 20:24:33 570 1

原创微信小程序开发

微信小程序开发一.概念微信小程序，小程序的一种,英文名 Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。二.特点1.无需安装与卸载小程序的第一个特点就是无需安装和卸载的过程，用户可以直接使用用户可以在“附近的小程序”中搜索也可以直接在搜索栏搜索相应的小程序，使用完直接关闭，不会占用桌面空间2.制作成本低对于店铺来说，开发制作一款小程序费用低。拥有一款自己专属的小程序，省去入驻第三方程序

2021-05-27 20:59:27 1592

原创 element-ui 使用(5)

element-ui 使用(5)15.DatePicker 日期选择器用于选择或输入日期以「日」为基本单位，基础的日期选择控件使用 <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker>Attributes 属性value / v-model绑定值类型date(DatePicker) / array(D

2021-05-19 21:02:22 634 1

原创 element-ui 使用(4)

velement-ui 使用(4)10.Form 表单 ✨由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据W3C 标准中有如下规定：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在<el-form>标签上添加 @submit.native.preventnative原生prevent默认行为使用form表单Form Attributes form表单标签的属性model表单数据对象✨

2021-05-19 20:30:32 353 1

原创 element-ui 使用(3)

element-ui 使用(3)记录近期所使用element-ui组件的过程使用过程中用到的element文档https://element.eleme.cn/#/zh-CN/component/installation7.Tab ,Tabs 标签页分隔内容上有关联但属于不同类别的数据集合。Tabs 组件提供了选项卡功能，默认选中第一个标签页使用:<template> <el-tabs v-model="activeName" @tab-click="handleC

2021-05-17 20:58:02 944 2

原创 element-ui 使用(2)

element-ui 使用(2)记录近期所使用element-ui组件的过程使用过程中用到的element文档https://element.eleme.cn/#/zh-CN/component/installationLayout 布局element-ui通过基础的 24 分栏，迅速简便地创建布局。(bootstrap是栅格系统是12个分栏)简述组件名称组件功能概述Message消息提示–常用主动操作后的反馈提示Icon字体图标–提供了一套常用的图标集合U

2021-05-16 21:41:12 672 6

原创 element-ui 使用

element-ui 使用(1)记录近期所使用element-ui组件的过程使用过程中用到的element文档https://element.eleme.cn/#/zh-CN/component/installation一.element-ui的团队Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。二.安装npm 安装官方都推荐使用 npm 的方式安装，它能更好地和 webpack 打

2021-05-16 20:05:53 529

原创个人博客搭建过程(2)

个人博客搭建过程(2)概述本文主要简单记录一下本人使用vuepress搭建个人博客的过程一个 VuePress 网站是一个由Vue、Vue Router和webpack驱动的单页应用。Markdown 拓展

2021-05-05 21:10:25 177 1

原创 Chrome浏览器，处理input自动填充时带黄色背景色

Chrome浏览器,通过延长过渡时间,实现input输入框自动填充背景色不变/*Chrome浏览器打开网页，input自动赋值时，会带上屎黄色的背景色，下面是通过延长增加自动填充背景色的方式, 让用户感受不到样式的变化*/input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { transition-delay: 99999

2021-05-03 20:49:41 209

原创 env.development 和 .env.production环境文件 process.env属性

模式模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：开发,测试,生产development 模式用于 vue-cli-service servetest模式用于 vue-cli-service test:unitproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2evue官方文档环境文件文件名作用.env在所有的环境中被载入.env.loc

2021-05-03 20:40:52 1045 3

前端团队开发规范====================

Listary一款实用的搜索工具

空空如也