手機hybrid應用H5開發

時間 2021-03-11

標籤 css html android web chrome npm 瀏覽器服務器微信 less 欄目 Hybrid 简体版

原文原文鏈接

H5開發

引入flexible.js

在 *.html的 <head>標籤中引入 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

Note：HTML中無需設置<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">，不然，無論設備是多少的dpr，都會強制認爲其dpr是你設置的值。css

經過`scss`定義px2rem的轉換

@function px2em($px, $base-font-size: 16px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2em($px + 0px); // That may fail.
    } @else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1em;
}

文本字號不建議使用`rem`

咱們但願文本在不一樣 dpr屏幕下文本字號相同
咱們但願在大屏手機上看到更多文本html

不但願出現13px和15px這樣的奇葩尺寸android

文本仍是使用px做爲單位，只不過使用[data-dpr]屬性來區分不一樣dpr下的文本字號大小web

// dpr === 1， 設計圖尺寸375 * 667爲例
@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}
// dpr === 2， 設計圖尺寸750 * 1135爲例
@mixin font-dpr($font-size){
    font-size: $font-size / 2;

    [data-dpr="2"] & {
        font-size: $font-size;
    }

    [data-dpr="3"] & {
        font-size: $font-size;
    }
}

@include font-dpr(16px);

H5調試

手機開啓USB調試功能

不一樣手機開啓路徑不一樣，能夠自行百度；chrome

這裏介紹一個通用的方式：npm

打開手機出廠APP「設置」
經過「搜索」功能檢索「USB調試」
點擊檢索結果，進入指定頁面，打開「USB調試」功能

手機、電腦處於同一局域網

電腦端啓動Web服務器，將H5資源部署到服務器中，手機局域網內經過電腦IP + path訪問H5頁面。瀏覽器

示例：服務器

npm i -g browser-sync 
cd <project dir path>
// 以項目路徑建立web服務端
browser-sync start --server --files ./

手機默認瀏覽器（非微信）經過PC端IP + path訪問H5頁面。微信

若沒法訪問，確認處於同一局域網後，關閉PC端防火牆試試。less

手機數據線鏈接電腦

手機數據線鏈接電腦
瀏覽器打開新標籤頁chrome://inspect
靜待一些時間，Remote Target中顯示數據線鏈接的設備及其可訪問頁面
點擊要調試的頁面鏈接，便可調試

Note：調試過程當中要保持手機不熄屏

H5與客戶端交互

H5喚起客戶端

`URL Scheme`

舊的通用喚端解決方案：使用前須要確認是否已棄用

URL Scheme是H5和客戶端、客戶端和設備溝通的橋樑。

使用URL Scheme在保證我的信息在設備全部者知情並容許的狀況下實現通訊。

URL Scheme的構成：[scheme:][//authority][path][?query][#fragment]，即：客戶端APP在移動設備中的統一資源定位符。

而這裏的Scheme是移動設備爲每一個客戶端APP分配的標識符。

常見的Scheme：

微信	支付寶	淘寶	微博	QQ	知乎	短信
weixin://	alipay://	taobao://	sinaweibo://	mqq://	zhihu://	sms://

`Intent`

安卓原生Google瀏覽器喚端協議

總體結構以下：

intent:
   HOST/URI-path // Optional host 
   #Intent; 
      package=[string]; 
      action=[string]; 
      category=[string]; 
      component=[string]; 
      scheme=[string]; 
   end;

使用示例：

<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=http%3A%2F%2Fzxing.org;end"> Take a QR code </a>