Hybrid 混合App開發

今天咱們簡單介紹一下 Hybrid 混合App開發

原理

• 什麼是響應式佈局？

1. responsive layout => 開發
2. responsive designer => 設計

響應式佈局，就是讓頁面響應各類設備，例如PC端，Phone（手機端） H5新增的語義標籤，表單的新特性，和h5 ， canvas 以及相關的js和API包括localstorage等等 如今h5已經稱爲移動端開發和響應式佈局的標準代名詞。

• 移動端的發展和Hybrid 混合App開發

1. 在以前app和h5沒有態大關係
2. 安卓系統 java-native
3. ios系統 c (object-c/swift)
4. 咱們把上述語言開發的app稱爲native app (原生app)

native開發一般打包後上傳到應用商店,他的優勢在於能夠操做手機內部的軟件或者硬件，由於他直接運行在操做系統中因此性能相對不錯,全部代碼都在手機上，一些須要聯網的能夠提早緩存，可是手機操做系統不同，使用的技術也不同，因此須要兩個不一樣的開發團隊，開發不一樣版本的app,這樣會致使版本升級問題,同時也會增長開發成本

由h5開發的web-app有什麼特色？

h5頁面須要基於瀏覽器或者v8內核的工具(pc,移動端瀏覽器或者v8內核的工具),h5運行在瀏覽器，因此若是想讓h5操做系統，取決於瀏覽器是否支持這個功能，若是由，瀏覽器會把該功能放在window全局對象中，相比於native性能很差，全部的請求訪問都必須基於聯網的狀態，除了有些native-app把h5特殊處理了，基於manifest的穩定性，服務器支持，存儲容量等都有限制，咱們離線緩存做用並不突出，所以咱們h5頁面部署到本身服務器上，用戶想看頁面必須從新拉取，這樣也使得數據代碼能夠及時更新，優缺並存。

混合app開發 把h5的接入APP，native-app有自帶的web-view機制，它是一款基於v8引擎渲染html頁面的工具，在web-view中嵌入h5頁面，由他渲染h5頁面

混合app開發就是按照響應式佈局的思想去完成h5頁面的開發，而且部署到服務器上（有個http訪問地址），此時用戶能夠手動輸入地址訪問，也可一掃描生成的二維碼 整個產品的外層框架交給native-app開發，搭建盒子，提供調取手機內部軟件或者硬件的功能和實現緩存機制，提供好對應的調取方法

前端開發把生成的H5地址告訴native-app,他們會在本身的webview中經過提供地址渲染出對應頁面，通常一般常常容易更新的位置一般都用h5開發，H5中若是須要使用手機內部功能，只須要調取本身的宿主環境web-view中提供的方法便可，具體參考調用接口文檔

• 原理：

瀏覽器會給h5提供window全局對象，web-view也給h5提供了全局對象，並且把一些供h5調取的方法都集成到內置的全局對象上。Hybrid 混合App開發須要實現H5和web通訊，咱們須要這種js bridge技術 微信就是Hybrid最好的案例，他支持h5在native-app中運行，咱們能夠調取微信提供的一些方法實現相關操做，好比微信二次分享，具體請參考微信公衆平臺。（qq瀏覽器）

應用場景

1. PC端和移動端公用一個地址，這樣確定要考慮響應式，並且樣式改動較大，適用於交互較少的靜態頁面

2. PC端一個項目 => 不須要考慮響應式

   手機端一個項目 => 考慮響應式

   • 1.在手機瀏覽器中
   • 2.在第三方應用中，可能須要調第三方接口 （WX）
   • 3.在native app中

如今咱們適配320-750px的屏幕尺寸

手機經常使用尺寸

• 蘋果

1. 5s之前 320px 480/568
2. 6 375px
3. 6plus 414px

• 安卓

1. 320
2. 360 小米3
3. 480
4. 540
5. 640
6. 720
7. ··· 在開發頁面以前，咱們先拿到設計圖，像PSD,sketch，通常是以ipone5/4爲基礎的，，，640*960的 640*1136的

• 設備像素密度比 drp

viewport REM響應式佈局

最初咱們都用@midia 官方惟一規範響應式佈局，可是這種方式很麻煩，前後出現不少方案，好比scale等比縮放佈局，可是他對文字/圖片等是真處理不是特別好，因此目前最主要的方案是REM響應式佈局

在移動端咱們須要加viewport pc端是當前頁面設備多寬，html頁面就是多寬展現，可是在手機端，無論手機設備有多寬，html頁面寬度默認980,好比在手機端看視頻咱們須要將頁面縮小固定倍數，全部內容都變小了，爲了避免讓頁面縮放，咱們要讓html寬度等於設備寬度

• REM 和px像素同樣是一個css樣式單位
• px是固定單位
• rem相對單位，相對於頁面根元素，html字體大小設定單位
• em 相對於氟元素大小設定

<meta name="viewport" content="width=device,user-scalable=no,initial-scale=1.0,maximum-scale=1.0">
複製代碼

動態設置

//設備寬/750 * 100
複製代碼

響應式實現

咱們如今來作個例子，具體用到的技術棧，h5 ,less ,zepto ,es6 ,css3

<meta name="viewport" content="width=device,user-scalable=no,initial-scale=1.0,maximum-scale=1.0">
複製代碼

• loding區域結構和樣式
• phone 區域交互效果的實現
• 魔方旋轉
• swiper

媒體查詢響應式佈局