记前端hybrid进修总结

2024年5月5日 217次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞