乐趣区

关于调试:手机hybrid应用H5开发

jiezi

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 调试性能

不同手机开启门路不同，能够自行百度；

这里介绍一个通用的形式：

  1. 关上手机出厂 APP“设置”
  2. 通过“搜寻”性能检索“USB 调试”
  3. 点击检索后果，进入指定页面，关上“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：

微信 支付宝 淘宝 微博 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>
Universal Link

IOS9+

Hybrid混合开发调试

Hybrid混合开发，即 H5 页面嵌入到原生客户端提供的 Webview 中渲染。

这里的调试大体和 H5 页面调试没什么不同，只有留神是否能调试和 客户端是否屏蔽调试性能 强关联。

调试可能须要客户端区别于线上利用，独自打能够调试的开发包（具体流程须要征询客户端）。

参考文档

  • H5 唤起客户端
退出移动版