记前端hybrid学习总结

9次阅读

共计 2669 个字符，预计需要花费 7 分钟才能阅读完成。

什么是 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;
});
}