一,hybrid是什麼,為何用hybrid? 二,hybrid更新和上線流程 三,hybrid和h5區別 四,前端js和客戶端如何通訊? 一,hybrid是什麼,為何用hybrid? 1,文字解釋 hybrid即“混合”,即前端和客戶端的混合開發 需前端開發人員和客戶端開發人員配合完成 某些環節也可 ...
一,hybrid是什麼,為何用hybrid? 二,hybrid更新和上線流程 三,hybrid和h5區別 四,前端js和客戶端如何通訊? 一,hybrid是什麼,為何用hybrid? 1,文字解釋 hybrid即“混合”,即前端和客戶端的混合開發 需前端開發人員和客戶端開發人員配合完成 某些環節也可能涉及到server端 2,存在價值,為何用hybrid 可以快速迭代更新【關鍵】,無須app審核,(思考為何?,因為沒有許可權操作手機系統的API,不會有安全隱患) 體驗流暢(和NA的體驗基本類似)-肉眼區別不出來 減少開發和溝通成本,雙端公用一套代碼(ios和android) 3,webview 是app中的一個組件,app可以有webview,也可以沒有 用於載入H5頁面等,即一個小型的瀏覽器內核,是個統稱 例,瀏覽器中:
![](https://images2018.cnblogs.com/blog/994496/201804/994496-20180427151244043-605210249.png)
![](https://images2018.cnblogs.com/blog/994496/201804/994496-20180427151256612-969291430.png)
![](https://images2018.cnblogs.com/blog/994496/201804/994496-20180427151621959-222652204.png)
![](https://images2018.cnblogs.com/blog/994496/201804/994496-20180427151629467-750323452.png)
![](https://images2018.cnblogs.com/blog/994496/201804/994496-20180427152716170-2010552097.png)
![](https://images2018.cnblogs.com/blog/994496/201804/994496-20180427153007183-745113416.png)
![](https://images2018.cnblogs.com/blog/994496/201804/994496-20180427153422590-1511731124.png)
![](https://images2018.cnblogs.com/blog/994496/201804/994496-20180427155453873-1183960596.png)
![](https://images2018.cnblogs.com/blog/994496/201804/994496-20180427155713107-473553826.png)
// 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
// 如果要加上參數和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', data, callback) }, scan: function(data, callback) { _invoke('scan', data, callback) }, login: function(data, callback) { _invoke('login', data, callback) }, } })(window)
schema.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>schema</title> </head> <body> <button id="btn1">掃一掃</button> <button id="btn2">分享</button> <script src="./invoke.js"></script> <script> document.getElementById('btn1').addEventListener('click', function() { window.invoke.scan({}, function() {}) }) document.getElementById('btn2').addEventListener('click', function() { window.invoke.share({ title: 'xxx', content: 'yyy' }, function(result) { if (result.errno === 0) { alert('分享成功'); } else { // 分享失敗 alert(result.message); } }) }) </script> </body> </html>
內置上線
將以上封裝的代碼打包,invoke.js,內置到客戶端
客戶端每次啟動 webview,都預設執行 invoke.js
本地載入,免去網路載入的事件,更快
本地載入,沒有網路請求,黑客看不到 schema 協議,更安全
總結:前端如何和客戶端通訊
通訊的基本形式:調用能力,傳遞參數,監聽回調
對schema協議的理解和使用 (前端和客戶端通訊協議,可使用iframe)
調用 schema 代碼的封裝
內置上線的好處:更快,更安全