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邊框問題

儘量還原設計意圖