app:在手机上运行的第三方应用程序

app分类

native app-原生应用：

基于手机操作系统开发的第三方应用程序-绝大多数在应用商店下载的都是，
开发原生应用需要使用不同的操作系统厂商提供的开发工具编写对应的代码，上传到应用商店，用户下载后即可使用。
'优'：因为使用的是原生的技术，并需要下载使用，所以在界面，用户的交互体验，应用系统的流畅程度都是最好的，
'缺'：但是手机系统有安卓，苹果，不同操作系统开发方式不同，代码不能共享，投入成本较高，
'总结'：使用最高的开发成本提供最好的用户体验
复制代码

web app - 网页应用：

使用html,css,js等网站开发技术，运行在浏览器
'优'：无需安装，所有浏览器都可执行，跨平台，普通网站主要做页面的显示，web app侧重于功能，用web技术实现的app '缺'：不同浏览器使用效果不同，网络，浏览器本身的性能限制都会影响性能体验，而且web技术没办法实现所有的原生功能
复制代码

hybird app -混合应用：

通过运行在app内部的特殊浏览器webview实现原生与web的通讯，既可以使用web api又可以使用原生api
前端负责界面和业务逻辑
封装原生的功能让前端调用
通过运行在app内部的特殊浏览器webview开始实现通讯
App开发的全生命周期管理 app配置，项目管理，更新用户的数据统计
复制代码

hybird-app界面开发

页面适配方案

viewport 适配代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maxmum-scale=1.0">
复制代码

页面适配 -- rem + js

html{font-size:10px;}
<!-- 此时屏幕宽度 64rem -->
<script>
    var html = document.documentElement
    var rootSize = html.clientWidth / 640 * 10
    html.style.fontSize = rootSize + 'px'
</script>
复制代码

页面适配 -- rem + vw

屏幕宽度=100vw
100vw = 64rem
1rem = 1.5625vw

小结：
- html 字体大小设置
- 设计稿宽度约定640px
- 量取尺寸除以100
复制代码

目前设备宽度：320px～414px（iphonexms）

Font-size = 1rem

如果 64rem = 100vw 那么 1rem = 1.5625vw

假设屏幕宽度是640px，这时1vw=6.4px，1rem=10px，小于12px

解决方法：设置 1rem=15.625vw，即6.4rem=100vw

设计稿还原

2个层面：

  1. 用技术手段解决网页显示问题
  2. 尽可能还原设计意图

常见的网页显示问题

  1. 图片模糊
  • 原因：手机屏幕的可测量尺寸与物理像素尺寸不一致, 导致 web 前端会习惯性将图片切成可测量尺寸, 但图片显示最清晰的状态是图片尺寸与显示屏的物理像素尺寸一致的时候. 如iPhone8中，当我们添加了viewport适配代码以后，屏幕的可测量宽度为375px,但屏幕的物理像素宽度却是750px 说明这种屏幕的像素比是2, 即显示时我们会用2个物理像素去模拟1个像素来提高屏幕的显示精度
  • 假设有普通屏幕A和2倍屏B，在B屏幕显示一张375px 的图片理论上可以全屏，但由于屏幕的像素度过低，包含的信息量不够分配给每一个物理像素，显示时就会通过差值算法来生成更多的像素去分配给物理像素显示，这样就会导致图片显示精度下降。 如果图片本身的宽度就是750px，所包含的像素信息刚好可以分配给每一个物理像素，这时候就可以完美的显示图片了
  • 但图片并非越大越好，因为图片尺寸过大会直接影响到加载速度和内存的占用，所以还需要根据实际情况进行取舍: 如果是app的界面素材，通常会根据我们的混合应用一起打包到本地，这个时候就不用考虑加载速度了，适当把图片做大一点，但是如果是我们业务中的远程图片，就要考虑加载速度啦，单张图片不宜过大，建议控制在50K以内，如果后端能够压缩图片是最好的啦，否则就只能控制图片的尺寸，但是有特殊情况。比如咱们的产品详情页，通常来说只有几张产品大图，并发并不会太高，通常都会做成一个切换显示的效果，第一时间只会显示第一张图片儿，这些因素就为图片加载创造了一个很好的条件，这个时候为了保证显示效果，就可以把产品图稍微做大一点。

但如果是有缩略图的产品列表页就要考虑图片的尺寸了，原因有两点，产品列表，首评显示的产品呢，一般六到十个非常正常，这样就会造成6到10 个图片并发，图片下载慢的话，就让我们图片下载时间稍微延长，用户体验呢，就不好。另外，产品列表通常我们会做成一个滚动加载的情况，随着用户加载的时候呢，图片会员越多，手机内存占用就会急剧上升的，运行会更加好点，那总结一下本地图片呢，尽可能做到远征图片呢，根据需求还有场景做，适当的取消。不能只为了显示效果，反而浪费了我们的下载速度，好，这是我们那个图片的一个形式模糊问题。

2边框问题

尽可能还原设计意图