素燃-CSDN博客

原创 vite脚手架，配置动态生成路由,添加不同的layout以及meta配置

动态配置模块对应的layout和路由meta信息，只需按约定添加页面和json，其它甭操心

2023-12-10 14:24:59 725

原创 vite脚手架，手写实现配置动态生成路由

再不用添加个页面，就待去手写路由配置了

2023-12-03 15:11:05 600

原创 element-plus 一键动态换任何皮肤功能

plus 官方代码给的思路但是你发现这样做之后，只是表面上换了个皮肤，像其它的操作，比如按钮hover,disabled 等的状态还是默认的颜色，就让你很不爽!

2023-11-25 20:52:45 552

原创实现一个 vue3 的数字滚动效果！

几行js代码就实现一个 vue3 的数字滚动效果！

2023-09-17 10:43:43 507

原创使用 useMemo,useCallback，Reat.memo() 处理不必要的子组件渲染，以及它的实现原理

场景1- 演示一个子组件更新父组件中一个输入框，输入值，父组件更新，同时引入子组件，但子组件也会跟着更新import React, { useState } from "react";import ReactDOM from "react-dom";// 子组件function Bpp() { console.log("%c Bpp render", "color:green"); return ( <> <div&g

2021-06-24 18:25:08 980

原创 react-hooks 的 useState 原理以及出现不更新视图的场景和原因?

1. useState 使用demo// App 组件function App() { let [a, setA] = React.useState(0); // 改变a的值 const changeA = () => { setA(a + 1); console.log("render"); }; return ( <> <div>{a}</div&gt

2021-06-24 16:18:16 13243 1

原创使用get_connect对接多个接口，渲染页面

getConnect 使用仓库代码

2021-04-28 16:49:19 714

原创 Getx - 使用getConnect 对接后台数据

## 1. GetConnectGetConnect是可以使用HTTP或WebSocks使前台与后台的通信，同时能保证数据出现错误时，不会出现App闪退演示接口地址代码仓库1.1 如何使用第一步：创建模型modeljson转dart网址：class MakeupModel { // 略了}第二步：创建 provider 集成自 GetConnectconst String APIADDRESS = 'https://makeup-api.herokuapp.com/ap

2021-03-26 15:30:55 6495

原创 Getx - 如何使用依赖管理和Bindings

1.Getx 依赖管理这东西你可以理解为，把controller 和路由进行分离，然后由它负责沟通控制器和UI，同时使用依赖的方式管理的控制器只需在某个页面中实例化一次，其它页面就可以直接使用，而不需要再实例化一次仓库文档参考1.1 如何使用依赖管理代码在 binding/demo01 下第一步：创建控制器// 控制器class GoodsController extends GetxController { final _goods = ["橘子", "apple", "pear"

2021-03-25 16:59:18 6673

原创 Getx - 如何使用路由管理页面

路由使用英文文档参考,既然要get的使用，就需要首先再入口处使用 GetMaterialApp示例代码仓库1. GetMaterialAppGetMaterialApp常用配置参数说明配置同 MaterialApp 差不多可选参数名描述类型title是应用程序的描述StringdefaultTranstion路由的过渡效果Transition枚举initialRoute默认选中的路由页面字符串，或者页面类名unknownRoute路由找不到显

2021-03-25 12:04:41 10592 6

原创 Getx - 如何使用状态管理数据

pubspec.yaml 文件:dependencies: get:1. 状态管理状态管理其实就是管理应用的数据，在 get中也称为控制器，所有的数据都必须放在继承自 GetController 的类中，才可以在视图中使用第一步：创建一个Controllerimport 'package:get/get.dart';/// 定义数据控制器class HomeController extends GetxController {}第二步：在控制器中声明变量import 'pa

2021-03-24 17:22:18 5894

原创 vite-v3-vant3体验下h5，配置接口环境和打包指令

vite脚手架配合vue3，vant仓库地址

2021-02-20 11:09:30 998

原创简单实现react 列表自动向上滚动，进入暂停，离开继续

import React, { useEffect, useRef, useState } from 'react';import './1.css';function App() { const [list] = useState([1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13]); const [isScrolle, setIsScrolle] = useState(true); // 滚动速度，值越小，滚动越快 const sp

2020-12-30 17:32:32 2288 3

原创 GetX- 简化flutter状态管理器

2020-12-21 15:28:27 7279 6

原创 flutter - 全局事件广播event_bus

这个东西用的挺多的，比如换肤，这个页面的用户改变了头像，返回其它页面时，也要展示新换的头像，等等，使用EventBus，参考文档借助event_bus插件1. 点击换肤import 'dart:math';// 导包import 'package:event_bus/event_bus.dart';import 'package:flutter/material.dart';// 定义全局变量EventBus eventBus;Color themeColor;//.

2020-10-21 11:39:03 873

原创 flutter - GridView 网格布局，以及设置子元素的间距和大小

基础的 GridView 布局参数说明gridDelegate对子元素进行修饰，由于SliverGridDelegate 是一个抽象类，找它的实现类有【SliverGridDelegateWithFixedCrossAxisCount，SliverGridDelegateWithMaxCrossAxisExtent,】childAspectRatio子元素列表SliverGridDelegateWithFixedCrossAxisCount方法说明

2020-10-21 10:41:45 7360

原创 flutter - Form表单验证

表单验证class FormWidget extends StatefulWidget { @override _FormWidgetState createState() => _FormWidgetState();}class _FormWidgetState extends State<FormWidget> { GlobalKey<FormState> formGlobalKey = GlobalKey<FormState>();

2020-10-20 18:47:58 1830

原创 flutter - 自定义TextFiled 输入框的样式，以及参数说明

系统默认的输入框样式命名参数使用说明obscureText让输入的文字模糊化，也就是变成密码输入框，填入布尔值contentPadding设置输入框中的文字内边距，使用在装饰器中focusNode动态设置输入框的焦点 FocusNode 类型maxLength输入框的输入的长度maxLengthEnforced当输入的文字超过限制长度后，是否还能继续输入，如果是 false，则继续可以输入，但是边框线变红，为 true，则不能再输入d

2020-10-20 15:44:40 4240

原创 flutter - 给文字设置点击事件的几种方式

Text 部件不能直接设置点击事件1. 如果单独给一个文字设置点击事件，可以使用TextSpan 部件点击 word 文字添加事件class MyHomePage extends StatelessWidget { var i = 1; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Column( c

2020-10-20 13:48:12 9337 7

原创 flutter - 使用 SingleChildScrollView() 解决键盘遮挡输入框的问题

写好了，感觉可好点击输入框，输入内容时发现如下，键盘遮挡了输入框使用 SingleChildScrollView 解决遮挡问题，就是让它滚动起来直接使用 SingleChildScrollView 包裹子元素class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colo

2020-10-20 12:22:29 2043

原创 flutter - 使用 SingleChildScrollView 进行滚动布局，实现和 Warp 和LiestView 组合的效果

该部件不能嵌套其它的滚动部件 - ListView，GridView 等class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { // 获取设备的宽度 var width = MediaQuery.of(context).size.width; return Scaffold( appBar: AppBar( title:

2020-10-20 12:06:30 1159

原创 flutter - 使用 Wrap 实现自定义元素大小的网格布局，代替GridView 部件

使用 Wrap 代替 GridView 实现网格布局，并且可以实现自定义元素的大小class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { // 获取设备的宽度 var width = MediaQuery.of(context).size.width; return Scaffold( appBar: AppBar( t

2020-10-20 12:03:00 784

原创 flutter - 滚动组件 ListView 和 GridView 一块使用

1. ListView 和 GridView 组合一块滚动问题： GridView 里的元素不能设置大小，只能通过修改 crossAxisCount 的个数来自动控制class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("首页"), .

2020-10-20 12:01:49 479

原创 flutter - AppBar 参数设置布局效果

class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( // backgroundColor: Colors.red, // backgroundColor: Color(0xff45ff41), leading: Container( .

2020-10-20 11:28:30 3031 2

原创适用于小程序和web端的 canvas 文字换行及居中问题

// 获取真实字节长度 function getTrueLength(str) { let trueLength = 0; for (let x = 0; x < str.length; x++) { // 如果字节码大于 128，则每次 +两个长度，否则，每次加一个长度 trueLength += str.charCodeAt(x) > 128 ? 2 : 1; } ...

2020-07-31 19:26:29 751 1

原创在vscode 上搭建 React 源代码调试环境(16.8v)

克隆此仓库git clone https://gitee.com/frontend-qin/react-source-code.git配置 vscode安装插件 Debugger for Chrome 后url：必须是你的 react 项目启动的开发环境地址{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "La

2020-06-08 10:14:26 1942

原创 react-router5 - 实现 Switch 和 Redirect 组件

用法 <HashRouter> <Link to='/'>home</Link> <Link to='/about'>about</Link> <Link to='/mine'>mine</Link> <div> <Switch> <Route component={Home} path='/' exact></Route

2020-06-04 17:46:53 1260

原创 react-router4 - 实现Link组件进行点击跳转

原生Link组件用法 <Router> <Link to='/'>Home</Link> <Link to='/about'>About</Link> <Link to='/mine'>Mine</Link> <div> <Route component={Home} path='/' exact></Route> <Route comp

2020-06-03 17:49:11 2257

原创 react-router3 - 利用 path-to-regexp 实现路径及参数的匹配

上节代码也看到了，在判断的时候，是直接拿 props上传的 path 和监听到的 pathname作的全等比较那这样的话，如果手动传入 /about/1, /about/page/2 这样的路径就匹配不到了, 肯定会返回 null 的,path-to-regexp仓库path-to-regexp部分用法// pathToRegexp(str, [], {})传3个参数，要匹配的字符串目标，一个数组，最后是一个对象const { pathToRegexp } = require("path

2020-06-03 17:09:05 1398

原创 react-router2 - 实现 HashRouter 和 Route组件理解实现原理

原生库的使用官方路由使用效果演示实现思路1. 先导出俩组件react-router-dom / index.jsimport Route from './Route';import HashRouter from './HashRouter';export { HashRouter, Route };2. 创建上下文对象import React from 'react';export default React.createContext();3. HashRouter组件i

2020-06-03 15:57:02 476

原创 reactRouter1 - 路由实现原理(hash, history)

实现原理1. 利用hash和history这两种模式实现对路由的切换2. 根据匹配到的路径，渲染对应的组件hash模式原理通过监听 hashchange 事件，在回调里拿到 window.location.hash 的值hash 模式演示 <body> <a href="#/a">去a</a> <a href="#/b">去b</a> <div id="box"></div>

2020-06-03 13:47:50 2070

原创 redux8 - redux 中间件和 applyMiddleware 及其实现原理

参考redux仓库， redux-logger库新建个项目吧 - 引入 redux， react-redux中间件执行流程图演示代码仓库就这个演示了，点击 + 1 ，现在呢，我想打印个日志，就是每次点击按钮，都能打印出老的状态和新的状态理逻辑，既然是在每次点击事件之后打印，那么，如果想拿到老的状态，就需要在派发前，想拿到新的状态，就是在派发后先这样写：let store = createStore(reducers);let dispatch = store.dispatc

2020-06-02 18:11:46 235

原创 redux7 - 手写实现 react - redux 基本功能 Provider 和 connect

参考reac-redux 库源码以下实现的功能代码演示地址使用react-redux库官方 react-redux 库，使用index.jsimport React from 'react';import ReactDOM from 'react-dom';import { Provider } from 'react-redux';import store from './reducers/store';ReactDOM.render( <Provider store={st

2020-06-02 15:23:52 510

原创 redux6 - 实现 react-redux 前置技能react 高阶组件的使用

react-redux使用演示代码太多，就放codesandbox.io 了，可以看到，在组件中连接仓库和组件的一个重要方法， connect() ，该方法的返回值就是个高阶组件什么是高阶组件高阶组件：同高阶函数，参数可以是组件，或者返回一个组件，使用场景：一般用于公共部分的抽离，对一个组件进行包装，让它产生一些新的功能，或者返回一个新的UI组件演示效果：class App extends Component { render() { return ( &.

2020-06-02 09:27:39 196

原创 redux5 - 实现 react-redux 前置技能之 react库的context的使用

参考redux仓库的src目录，初步手写实现了以下3个方法createStore() ：创建数据仓库，导出了3个方法（dispacth，subscribe，getState）combineReducers()：合并多个小的reducer，传入一个对象bindActionCreators() : 简化代码 api，只需传入一次对象的语法，就不用再导出写 dispatch 了还剩下几个，先不说了，然而，就这么几行代码，已经基本让项目配合这些代码跑起来一个数据仓库了，然而，它还是有很多的冗余代

2020-06-01 17:29:08 278

原创 redux4 - 处理有多个 reducer时如何合并，以及实现 combineReducers

参考源码redux仓库redux原则之一就是单一性，即状态，仓库，reducer都是唯一的，但在组件式的技术开发中，为了好管理状态，通常一个组件，或嵌套组件对应一个 reducer，最后再合并成一个大的reducer代码太多，请参考演示代码代码演示两个组件的都有各自的组件状态，怎么进行合并可能有不明白，左边这个index.js 这个文件的 count1Reducer和count2Reducer的第一个参数为啥是那样写的解释一下：看右边的 count1Reducer() 函数，第一个参数

2020-06-01 16:04:50 1043

原创 redux3 - 通过提交函数派发action及手写实现 bindActionCreators 函数

dispatch 即可以是提交一个对象的语法，还可以提交一个函数的写法直接通过提交函数派发动作import React, { Component } from 'react';import ReactDOM from 'react-dom';import { createStore, bindActionCreators } from './redux';let initData = { num: 10,};// type 类型const ADD = 'ADD';cons.

2020-06-01 12:50:58 243

原创 redux2 - 原生html页面和react中使用自己手写的 - redux

原生html页面中redux.js// 创建仓库function createStore(reducer) { let currData; let listeners = []; const getState = () => currData; const dispatch = (action) => { currData = reducer(currData, action); listeners.forEach((fn) => fn()); }

2020-06-01 10:38:23 264

原创 redux1 - 20行代码实现redux

准备工作首先建一个React的脚手架项目，删除src下的所有东西，保留一个空的 index.js当前目录index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <t

2020-05-27 16:45:39 328

空空如也

空空如也