h5结合原生开发app

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边框问题

尽量还原设计意图