记前端hybrid学习总结

2024年5月12日 142次阅读 来源: yeooo

什么是hybrid

  • hybrid即“混合”,即前端和客户端的混合开发
  • 需前端开发人员和客户端开发人员配合完成
  • 某些环节可能涉及到server端

hybrid存在价值

  • 可以快速迭代更新(无需app审核)
  • 体验流畅(和NA体验基本类似)
  • 减少开发和沟通成本,双端公用一套代码

webview

  • 是app中的一个组件(app中可以有webview,也可以没有)
  • 用于加载h5页面,即一个小型的浏览器内核

file协议

浏览器打开本地文件,就是通过使用file协议

  • file协议:本地文件,快
  • http(s)协议:网络加载,慢

使用场景

  • 使用NA:体验要求极致,变化不频繁(如头条首页)
  • 使用hybrid:体验要求高,变化频繁(如头条的新闻详情页)
  • 使用h5:体验无要求,不常用(如举报,反馈等页面)

具体实现

  • 前端做好静态页面(html,js,css),将文件交给客户端
  • 客户端拿到前端静态页面,以文件形式储存在app内
  • 客户端在一个webview中
  • 使用file协议加载静态页面

hybrid更新上线流程

  • 分版本,有版本号,如201803211015
  • 将静态文件压缩成zip包,上传到服务端
  • 客户端每次启动,都去服务端检查版本号
  • 如果服务端版本号大于客户端版本号,就去下载最新的zip包
  • 下载完之后解压,覆盖原有文件

hybrid和h5的区别

hybrid优点:

  • 体验更好,跟NA体验基本一致
  • 可快速迭代,无需app审核

hybrid缺点:

  • 开发成本高:联调,测试,查bug都比较麻烦
  • 运维成本高

适用场景

  • 产品都稳定功能,体验要求高,迭代频繁.产品型(hybrid)
  • 单次运营活动(如xx红包)或不常用功能.运营型(h5)

schema协议 — 前端和客户端通讯的约定

网上搜的微信部分的schema协议

weixin://dl/scan 扫一扫

<!--以下是演示,无法正常运行,微信有严格的权限验证,外部页面不能随意使用schema-->
    
function invokeScan() {
    var iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = 'weixin://dl/scan'; // iframe 访问 schema
    var body = document.body || document.getElementByName('body')[0];
    body.appendChild(iframe);
    setTimeout(function(){
        body.removeChild(iframe); // 销毁iframe
        iframe = null;
    });
}

document.getElementById('btn').addEventListener('click', function(){
    invokeScan(); // html调用schema协议
})

// 如果要加上参数和callback,那么就要这么写

window['_weixin_scan_callback'] = function(result) {
    alert(result);
}
// ...省略...
iframe.src = 'weixin://dl/scan?k1=v1&k2=v2&callback=_weixin_scan_callback';
// ...省略...

封装schema

voke.js

(function (window, undefined) {
  // 封装schema
  function _invoke(action, data, callback){
    // 拼装schema协议
    var schema = 'myapp://utils/' + action;
    
    // 拼装参数
    schema += '?a=a';
    for(key in data){
      if(data.hasOwnProperty(key)){
        schema += '&' + key + '=' + data[key];
      }
    }

    // 拼装callback
    callbackName = '';
    if(typeof callback === 'string'){
      callbackName = callback;
    } else {
      callbackName = action + Date.now();
      window[callbackName] = callback;
    }
    schema += 'callback=callbackName';

    // 触发schema
    var iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = schema;
    var body = document.body;
    body.appendChild(iframe);
    setTimeout(() => {
      body.removeChild(iframe);
      iframe = null;
    });
  }

  window.invoke = {
    share: function (data, callback) {
      _invoke('share', data, callback);
    }
  }
})(window);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button id="btn">分享</button>
</body>
<script src="voke.js"></script>
<script>
  document.getElementById('btn').addEventListener('click',function(){
    window.invoke.share({
      titile:'111',
      content:'2222'
    }, function(res){
      if (res.status){
        alert('分享成功!');
      } else {
        alert(res.message);
      }
    });
  });
</script>
</html>

内置上线

  • 将以上封装的代码打包,叫做invoke.js,内置到客户端
  • 客户端每次启动webview,都默认执行invoke.js
  • 本地加载,免去网络加载都时间,速度会更快
  • 本地加载,没有网络请求,黑客看不到schema协议,更安全
    原文作者：yeooo
    原文地址: https://segmentfault.com/a/1190000018409923
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞