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是你設置的值。
通過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屏幕下文本字號相同我們希望在大屏手機上看到更多文本
不希望出現13px和15px這樣的奇葩尺寸
文本還是使用px作為單位，只不過使用[data-dpr]屬性來區分不同dpr下的文本字號大小
// 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調試功能
不同手機開啓路徑不同，可以自行百度；
這裏介紹一個通用的方式：
- 打開手機出廠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端防火牆試試。
手機數據線連接電腦
- 手機數據線連接電腦
- 瀏覽器打開新標籤頁
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：
| 微信 | 支付寶 | 淘寶 | 微博 | 知乎 | 短信 | |
|---|---|---|---|---|---|---|
| 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>Universal Link
IOS9+
Hybrid混合開發調試
Hybrid混合開發，即H5頁面嵌入到原生客户端提供的Webview中渲染。
這裏的調試大體和H5頁面調試沒什麼不同，只要注意是否能調試和客户端是否屏蔽調試功能強關聯。
調試可能需要客户端區別於線上應用，單獨打可以調試的開發包（具體流程需要諮詢客户端）。
參考文檔
- H5喚起客户端
