Hybrid 混合App開發

渣渣的生存之道發表於2018-05-23
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

媒體查詢響應式佈局

相關文章