概述
一,hybrid是什么,为何用hybrid? 二,hybrid更新和上线流程 三,hybrid和h5区别 四,前端js和客户端如何通讯? 一,hybrid是什么,为何用hybrid? 1,文字解释 hybrid即“混合”,即前端和客户端的混合开发 需前端开发人员和客户端开发人员配合完成 某些环节也可能涉及到server端 2,存在价值,为何用hybrid 可以快速迭代更新【关键】,无须ap
@H_419_1@
四,前端Js和客户端如何通讯?
1,文字解释
2,存在价值,为何用hybrID
体验流畅(和NA的体验基本类似)-肉眼区别不出来
3,webvIEw
4,file://协议
5,hybrID实现流程
不是所有场景都适合hybrID:
具体实现:
具体流程图:
遗留问题:
回顾hybrID实现流程
思考(目的,实现途径)
更新流程
思考(目的,可行途径):
完整流程:
分版本,有版本号,如201803211015
客户端每次启动,都去服务端检查版本号
如果服务端版本号大于客户端版本号,就去下载最新的zip包
要点1:服务端的版本和zip包维护
要点2:更新zip包之前,先对比版本号
要点3,zip包下载解压和覆盖
三,hybrID 和 H5 的比较:
1,优点:
体验好,跟NA基本一致
2,缺点:
开发成本高,连调,测试,查BUG都比较麻烦
3,适用的场景
1,回顾之前的问题
2,Js和客户端通讯的基本形式
3,schema协议简介和使用(前端和客户端通信的协议规定)
4,schema使用的封装
5,内置上线
Js和客户端通讯的基本形式
schema协议简介和使用(前端和客户端)
scheme协议——前端和客户端通讯的约定 如 weixin:// (APP自己定的)
// schema协议简介和使用 // 以下是演示,无法正常运行,微信有严格的权限验证,外部页面不能随意使用schema var iframe = document.createElement(‘iframe‘); iframe.style.display = ‘none‘; iframe.src = ‘weixin://dl/scan‘; //iframe访问schema var body = document.body || document.getElementsByTagname(‘body‘)[0]; body.appendChild(iframe); setTimeout(function() { body.removeChild(iframe); //销毁iframe iframe = null; })
// 如果要加上参数和callback,那么就要这么写 window[‘_weixin_scan_callback‘] = function(result) { alert(result); } // ..省略 iframe.src = ‘weixin://dl/scan?k1=v1&k2=v2&callback=_weixin_scan_callback‘ // ..省略
schema协议的封装
新建invoke.Js
(function(window) { // 跳用schema的封装 function _invoke(action, data, callback) { // 拼装schema协议 var schema = ‘myapp://utils/‘ + action; // 拼接参数 schema += ‘?a=a‘; var key; for (key in data) { if (data.hasOwnProperty(key)) { schema += ‘&‘ + key + data[key]; } } // 处理callback var callbackname = ‘‘; if (typeof callback === ‘string‘) { callbackname = callback; } else { callbackname = action + Date.Now(); window[callbackname] = callback; } schema += ‘&callback=‘ + callbackname; // 触发 var iframe = document.createElement(‘iframe‘); iframe.style.display = ‘none‘; iframe.src = schema; //重要 var body = document.body || document.getElementsByTagname(‘body‘)[0]; body.appendChild(iframe); setTimeout(function() { body.removeChild(iframe); //销毁iframe iframe = null; }) } // 暴露到全局变量 window.invoke = { share: function(data, callback) { _invoke(‘share‘, callback) }, scan: