iOS前端交互篇-H5全嵌套

Posted 2023-05-08

参考技术A 有时候项目小,为了省事,是会App内全嵌套H5的,但为了使用户体验更好,App内也会做一些修改

1.在webView初始化时则循环去掉水平及竖直滑动条
2.每次页面加载完成,均会调用webViewDidFinishLoad代理方法,在此判断链接是否是首页,如果是首页则不显示左上角按钮,否则显示
这里非常卡顿,尤其是界面第一次加载时特别缓慢,造成的用户使用效果就是:界面显示出好一会了,左上角的按钮才会出现或者消失
3.在点击左上角返回按钮时,判断当前WebView是否可以返回,如果可以直接返回,如果不可以直接跳回首页面

区别
1.需要导入头文件
2.没有获取title,是自己写死的

1.因为后续涉及了分享,分享出去的标题不能是写死的,需要获取H5的title
2.需要有进度条
3.当用户初次安装打开首页的时候(此时H5已经请求了),会弹出是否使用数据,当你未选择的时候,H5是停止请求的空白的页面,当选择了允许,但H5已经停止了请求,所以必须加一个下拉刷新

4.H5中有跳转AppStore的链接,WKWebView不会自动识别并去跳转

1.为对象属性注册观察者
observer: 观察者对象
keyPath: 被观察的属性，其不能为nil
options: 设定通知观察者时传递的属性值，是传改变前的呢，还是改变后的
context: 一些其他的需要传递给观察者的上下文信息，通常设置为nil

2.观察者接收通知,并做出处理:观察者通过实现下面的方法，完成对属性改变的响应
keyPath: 被观察的属性，其不能为nil.
object: 被观察者的对象.
change: 属性值，根据上面提到的Options设置，给出对应的属性值
context: 上面传递的context对象。

3.移除观察者

前端的UI设计与交互之图标篇

图标是具有指代意义的图形，也是一种标识。通过使用图标表达命令，强调状态，表示产品或类别。为了系统及跨平台之间图形认知保持一致， 图标在设计和使用时有以下两个原则点需要注意：
简单的图形语言以及高辨识度。清晰、直观的图标更能明确指代含义便于识别记忆；
保持图标之间一致的风格和表现方式。界面中的所有图标都应该在细节设计、透视和笔画权重上保持一致。
一、系统图标
系统图标通常用来表示常用的操作，比如：删除、保存、编辑。也可以用来表示一个文件或者状态。
2、关键轮廓线
根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。
请将所有图标在 1024×1024（16×16 的 64 倍）的画板中制作。
3、细节
a）笔画
一致的笔画权重是保持整个图标系统视觉统一的关键，如系统图标的线条统一为 72px 宽度。
b）边角
一致的角度半径也是保持整个图标系统视觉统一的重要元素
外轮廓线统一半径为 72px 的圆角，icon 内部空间的边角保持直角，笔画的终端为圆角。
c）视觉修正
在一些特殊情况下（比如，icon 的形状比较复杂紧凑），可以通过调整线条的粗细或圆角的大小等微妙的变化来增加图标的易读性。
d)透视角度
始终保持简洁、平面的风格,不要让图标具有多维度空间感，或者充满了细节。保持平面、简洁的风格
e)命名规则
统一的命名方式有助于管理图标，也能更快速的找到需要的图标。例如，环绕型的图标统一以「-o」后缀。
f)图标尺寸
应用于页面时请使用规范尺寸，与字体搭配时和字体的尺寸保持一致。
例如：和 12pt 字体搭配时，图标使用 12px，图标与文字的间距为 8px。
g)颜色
图标的颜色需要与搭配文案的色值保持一致（表示状态的除外）。
二、业务图标
业务图标不同于系统图标，本身不带有功能性的操作，而是辅助配合文案的一个抽象化图形。相较于系统图标，业务图标在设计的细节上更为丰富，使用的尺寸也比较大。
注：业务图标的设计原则与系统图标基本一致，在细节处理上（如笔画权重、圆角大小等）可视具体场景而定。
a)图标尺寸
在常规使用中，有 32px（最小尺寸）、48px 和 64px（最大尺寸）三种选择。
b)颜色
业务图标有单色（中性色）和双色（中性色+主色）两种，主色的面积不超过整个 icon 的 40%。