2021年06月_cvory

原创 React Hooks 父页面调用子组件方法

需求在父页面中调用子组件中的方法运用的ApiuseRef,useCallback,useImperativeHandle父页面：对组件进行ref赋值组件使用useImperativeHandle把需要对父组件暴露的方法包起来在组件内，对这个方法的使用和其他方法没有区别父组件的调用...

2021-06-30 17:51:01 510

组件引用页面目录结构：引用组件可写在全局，也可写在单独页面。我这里写在全局，放在app.json如果是单独页面引用，放在对应的页面json中app.json:数据通信父页面：组件：自定义组件的properties属性中罗列出父组件传递的值在组件中可直接使用组件调用父页面方法父页面：组件：官网介绍：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.htm

2021-06-30 16:36:03 201

原创 React+Umi 的H5 小程序公用跳转 H5小程序路由带参

场景分析使用H5编写小程序的原因：公众号和小程序的页面重复，避免同一页面写两次。可从网页进入，也可从小程序进入跳转方法分析工具使用端的分为小程序内页面跳转和普通网页页面跳转小程序内的页面跳转会分为：a>关闭本页打开b>不关闭本页打开（普通跳转）c>跳转tab页d>跳转外链e>回跳网页跳转：外链跳转，普通项目内跳转Code// 公用跳转处理 modelName：页面路由，query:参数， type:跳转方式export const na

2021-06-30 15:57:21 1323

原创 iPhone安全区域底部小黑条在H5的适配

在H5上的解决方案使用苹果官方推出的适配方案Css函数env()和constant(）设置viewport设置为cover，这样这两个函数才能生效<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">用@support隔离兼容样式，当浏览器支持bottom: constant(safe-area-inset-bottom)或者bottom: env(safe

2021-06-30 13:36:09 573

原创 umi项目动态设置页面title （H5编写小程序动态设置头部）

解决方案UMI中有Helmet这个插件API ，专门用来自定义页面头部写在HEAD中的都可以写在这里面：meta , link 等

2021-06-29 18:13:14 3920

原创 web移动端自适应解决方案按比缩放还原设计图（less函数）

需求移动端的设备尺寸较多，需要页面的显示是可自适应良好的设计图一般是按照某固定尺寸进行设计要对设计图进行比例缩放还原解决方案思路：不论字体大小或者各元素的宽高都按照统一比例缩放code：less的函数使用.pxToVW (@px, @attr: width) { @vw: (@px / 750) * 100; @{attr}:~"@{vw}vw";}.title{ .pxToVW(300,width) .pxToVW(32,font-size)}这里是指，设计图

2021-06-29 17:54:02 416

原创 umi 添加新的文件类型识别添加loader（以gltf文件为例）

需求项目中需要用到gltf格式文件需要添加loader解决方案项目是 React + Umi + Antd在config文件中对chainWebpack进行赋值url-loader 插件需要额外安装

2021-06-29 17:33:10 2022

原创 ios禁止页面橡皮筋效果（附上原生和react的解决方案）

效果在安卓上，页面是铺满且不可下拉的，但是在iPhone上整个页面可下拉，会露出空白解决原生：$(document).ready(function(){ function stopScrolling( touchEvent ) { touchEvent.preventDefault(); } document.addEventListener( 'touchstart' , stopScrolling , false ); document.addEventListener( 'tou

2021-06-29 16:37:40 1507 3

原创 React+Antd 无插件实现多个输入框验证码功能 + 倒计时(附完整代码)

需求如下图，实现多个框的验证码，并且在输入后自动调用接口思路在一个div中放置对应个数的span使用一个input，然后让它透明，定位在div之上span截取对应的值进行显示Code主要代码：完整代码import React, { useState, useEffect } from 'react';import { InputNumber } from 'antd';import { navigate } from '@/utils/common';//公用跳转impo

2021-06-29 14:23:25 2094 7

Cvory