一、H5
文章定位：一些使用细节记录
一、基本标签
- 快速建立一个h5：VSCode 快速创建H5并调试_vscode开发h5
1、div
1、 关于 div 的height父容器设置了高度，子元素可以越界出去
- 如果都是文字的话，置宽/高度有些时候意义不大，设置行高来推；两行的计算单行来上下推，宽高都用高来推，用安卓宽度那套，line-height很重要；
- 计算宽度（15）要是怕出问题的话，100/375*15，单位vw；
- 高度的话也用vw，把对应的15换的就行（以宽度计算后的为基础，不然高要是太长了 比例就不对了）
- 没有设置宽度，所以div的宽度就变成了100%
- css样式vh屏幕高度，踩坑指南
- 关于占满全屏 某种情况：
width: 100%;
height: 100vh;
- 自适应占用高度：撑开元素高度使其占满页面
- 设置背景和堆叠的时候height还是有用的；
- 关于padding，和android不一样，height和padding是独立的，不会减掉；
- 画点：如何使用html定义一个红色小圆点
- 画虚线：前端必会的 HTML+CSS 常用技巧 之 虚线的实现方式
- background法，挺好的，直线也行；
- 易改样式；
2、hr
1、其实是个方框，设置高度就能看见了
2、对div设置这个border-bottom: 0.5px solid #d8d8d8;直接加底边，蛮有意思的
2、img
- 常见四种设置图片填充类型
- object-fit: contain；看着像是那个大就按比例拉伸那个。
- object-fit: cover;按比例填充满宽高，多了的会裁剪。
- object-fit: fill;不按比例，全部拉伸填充。
- object-fit: none;
3、p
1、限制行数等：
- 有些时候设置行数限制没生效可以试下这个，奇葩问题；
- 看样式的思路挺好的
- 至于造成这种情况的原因有很多，比如 webpack打包时optimize-css-assets-webpack-plugin插件认为语法不规范给删掉了；
- 自测发现浏览器中如果限定网页宽度，有些时候英文不会换行的；
- 实用写法
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: on */
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
- 这个写法也差不多，主要有个html可以看到效果；
2、设置宽高度是有效的
3、设置文字断行规范
- 关键字：word-break
4、iFrame：链接窗口嵌套显示
2、可以和Link组合
5、input：输入框
6、alert：弹窗
-
样例：alert('测试')
-
关于js：单引号和双引号差别不大；
7、点击事件Click
- 有种写法会自动执行；
8、浏览器定位
HTML5 地理定位 | 菜鸟教程 (runoob.com)
二、Antd
1、表单 Form
- Button可以直接嵌在里面，不用实现onClick；
- 关于表单的数据源设置；
2、图片 Image
- 这个宽高只指定一个看起来另一个能自适应
3、ImageUploader 图片上传
- 图片选择器
4、间距
5、Steps 步骤条
6、TabBar 标签栏
二 Plus、Antd-mobile
Antd在Pc端很强大，但在移动端略显不足，所以有了antd-mobile；
ImageViewer 图片查看器
1.通过放大查看图片全貌。需要点开图片查看细节，配合缩略图使用。
三、 CSS/LESS
CSS 布局 - position 属性 (w3school.com.cn)
一、布局
1、5种常规布局方式
- static
- relative：指的是自己从原位置到目标位置的偏移量
- fixed
- absolute：基于父布局定位
- sticky
2、Flex
1、基本说明flex 布局的基本概念 - CSS：层叠样式表 | MDN (mozilla.org)
- 容器：Flexible Box 一维模型（横/纵）,作为对比的是另外一个二维布局 CSS Grid Layout
- 容器的
display属性值改为flex或者inline-flex。完成这一步之后，容器中的直系子元素就会变为 flex 元素
- flex-direction：方向轴，四参数，决定水平还是垂直排列
- flex-wrap：显示多行容器；
- Constraint
- flex-basis：定义一个元素空间大小
- flex-grow：设定正整数值以按比例分配空间
- flex: 30%;两个设置比例，设置width不对的；
- 类似安卓0dp的写法：微信小程序-flex布局：垂直、水平方向-自动填充满剩余空间
3、画虚线
1、## background 的 linear-gradient和边框虚线：前端必会的 HTML+CSS 常用技巧 之 虚线的实现方式_html 虚线_zhuangwei_8256的博客-CSDN博客
2、hr和边框法：CSS虚线实现方法及多种应用实例_w3cschool
4、透明度
1、opacity，值为1是完全不透明
2、块级元素相关知识：
1、CSS中 块级元素、行内元素、行内块元素区别 - 掘金 (juejin.cn)
- display: block 会占据一行，可以设置宽高
3、居中方式
- 个人试了下设置宽度，margin 设置auto最好用，background的center属性一般般感觉没啥用；
3、常用熟悉
1、可见
1、参考：visibility - CSS：层叠样式表 | MDN (mozilla.org)
- visibility主要是否可见
- display主要是否展示（占空间）
四、React
一、生命周期
1、 React 组件生命周期 | 菜鸟教程 (runoob.com) 2. 基本上render()是自动触发的（继承React.Component）
二、基本说明
1、列表与key
- 作用：当前Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识；
2、jsx种map循环中使用if判断_withwz
- 有点蛋疼，能用三目运算符，不能用if；
- 写外头的参考：jsx 语法中使用 if else_jsx写if
3、 定义公共方法/常量
1、定义常量
const t1= 3;
/**
* 接口档案病历样式类型
*/
const t2 = 'test';
const t3 = 'testkk';
export default t1;
export { t2, t3 };
2、定义函数：js export 对外输出常量、变量和函数_js export 变量
4、onClick事件
5、添加断点 debugger
6、Js里直接赋值json
1、let result ={"success":false,"resultCode":"1004","msg":"network error"}
7、react-router原理之Link跳转结合组件
1、补充JavaScript ---location.href的用法_idomyway的博客-CSDN博客 2、window.location三种跳转方法释义_window.href.location跳转页面
- 这种跳转方式是Js本身的能力
8、函数与带入参的写法
const judgeState = (list) => {
/* List 倒序查找*/
for (let i = list.length - 1; i >= 0; i--) {
if (list[i].Code === stateLeave) {
if (list[i].State === stateActieve) {
break;
}
}
}
};
const TopTips = () => {
return (
<div className="tips">
<i className="ui-icon"></i>
<div className="text">
你好
</div>
</div>
);
};
有意思的事件
2、查看npm相关库最新版本的网站 @antv/xflow
五、ES6
1、使用数组 ...运算符
- 样例：
const number是 =[5,10,2,3,7,8]
console.log(...numbers)
三、常见错误信息
六、Node.js
querystring
1、stringify:将对象转为字符串 拼成链接；
- 例：
./texthtml?${stringify(params)}
七、Js
浏览器本地存储
1、短期存储：sessionStorage
- 通过get和set传递属性
const dataLocalTemp = JSON.parse(sessionStorage.getItem('datas'));
if(!(dataLocal.length === undefined || dataLocal.length==0)){
console.log("yeTest 不为空进行赋值")
setDataLocal(dataLocalTemp)
}
//ps data是个数组 undefined判断是个标准量，所以不用加引号
sessionStorage.setItem('data', JSON.stringify(data));
- removeItem 清空的对应的Session
2、持久化存储：localStorage
2、 JSON
1、JavaScript Object Notation，JavaScript 对象表示法 2、json要用双引号！！！
- JavaScript里声明对象，有没有引号(单/双)都行，Json左侧规约要双引号； 3、常用方法
- JSON.stringify()：JavaScript 对象转换为字符串
- JSON.parse(): 将数据转换为 JavaScript 对象
3、Promise
1、定义：表示异步操作最终的完成（或失败）以及其结果值。 2、几种状态：
- 待定（pending） ：初始状态，既没有被兑现，也没有被拒绝。
- 已兑现（fulfilled） ：意味着操作成功完成。
- 已拒绝（rejected） ：意味着操作失败。
3、方便包装多个Promise的工具类：promise-to-async-events: promise-to-async-events
4、JavaScript判断某个参数是否为空常见方式&& ==
1、声明useState使用TS声明类型
- useState([]);声明数组
- useState({});声明对象
- react中的JS判断对象是否为空对象的几种方法
- JSON.stringify(dataLocal) === '{}' 是可行的，空对象就是这样的
- useState([[]]);声明不定长二维数组
- length == 1，说明只给第一组赋值，动态生成[1][0]；
- length == 2，第二组赋值，第一组不一定赋值了；
- if (fileList[0][0]){} 判断第一组第一个元素是否有值
2、判空
- JSON.parse(sessionStorage.getItem('datas'));读出来是个字符串 判断是否为null比较靠谱，对其使用数组的length永远都是undefined，console打出来是null可以用===null和!== null判断
- 判断数组长度length报错_vue判断数组长度
3、不相等运算符（!=）检查其两个操作数是否不相等，并返回布尔结果。与严格不相等 !==运算符不同，它会转换并比较不同类型的操作数。
5、Array 数组
1、一些api方法很好用
- slice()过滤位数；index，浅拷贝什么的
6、Data
1、JavaScript实现Date( ) ——日期格式化的三种常用方法
- 实现24小时制：new Date().toLocaleString修改为24小时_new date().tolocalestring()_
- 字符串日期转date类型进行排序：js日期排序(使用sort)_js 日期排序
7、循环
- for循环挺好用的
- map方法里不支持使用if
- arr.reverse()会将arr数组本身变为逆序;
七、辅助
1、查看当前返回的Json
-
网页中
-
浏览器查看
2、跨域请求
1、基本概念:什么是跨域请求以及实现跨域的方案
- 协议 + 域名 + 端口号均相同，那么就是同域
- 为了防止CSRF攻击，常用JSONP, CORS 方法约定绕过同源策略：
- JSONP：只支持get请求；
- CORS：get，post都支持；
八、前端与客户端通信
1、h5：JSBridge 2、客户端使用支持与bridge
3、类似Win Scp：XShell免费版的安装配置教程以及使用教程（超级详细、保姆级）
九、常见错误
- 主要是有些配置https会跳转到http网站，有点坑；
2、关于“TypeError: Assignment to constant variable”的问题解决方案
- 就字面意思，分配常量为可变的；
- const常量，let声明可变；
十、第三方插件
pdfh5在react的应用
1、功能：查看PDF格式链接；
十一、前端请求跨域问题
- 两种解决方案
- CORS 请求跨域
- JSONP方式【现在用的少了】
- 其他参考文章
- axios 实现cors跨域
- 跨域的请求和option请求说明：因跨域，post请求变options请求
