手机hybrid应用H5开发

Posted 米花儿团儿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手机hybrid应用H5开发相关的知识，希望对你有一定的参考价值。

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唤起客户端

以上是关于手机hybrid应用H5开发的主要内容，如果未能解决你的问题，请参考以下文章

混合 App 打开 H5 调试开关

混合 App 打开 H5 调试开关

转帖H5 手机 App 开发入门：概念篇

Hybrid混合开发知识点(一)

Hybrid小程序混合开发之路 - 数据交互

［iOS］关于 App 混合（Hybrid）开发的优化，包括H5Weex等（本篇博客主要针对 iOS 应用讲解，但该思想同样适用于Android）