H5开发
引入flexible.js
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
文本还是使用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
整体结构如下:
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
Hybrid
混合开发调试
Hybrid
混合开发,即H5
页面嵌入到原生客户端提供的Webview中渲染。
这里的调试大体和H5
页面调试没什么不同,只要注意是否能调试和客户端是否屏蔽调试功能强关联。
调试可能需要客户端区别于线上应用,单独打可以调试的开发包(具体流程需要咨询客户端)。