目前移動(dòng)端新技術(shù)履植，PA銀行這邊使用到的有Weex象颖、Tangram、RN家淤、Flutter
接下來淺談一下Weex匙睹、Tangram愚屁、RN的東西
1.Weex
1.1：前端開發(fā)可以寫熟悉vue語法的單文件，然后打包成出來一份dist —— JS Bundle痕檬，然后部署到服務(wù)器上
---這一步其實(shí)坑也很多霎槐，有些語法只有ios可以運(yùn)行，有些只有Android可以運(yùn)行
1.2：客戶端打開某一個(gè)頁面梦谜，通過網(wǎng)絡(luò)下載JS Bundle丘跌，然后在客戶端本地執(zhí)行該JS Bundle
客戶端提供了JS的執(zhí)行引擎(JSCore)用于執(zhí)行遠(yuǎn)程加載到JS Bundle
1.3：JS執(zhí)行引擎執(zhí)行JS Bundle，和瀏覽器的過程類似改淑，JS Bundle 的代碼被執(zhí)行，生成VNode 樹進(jìn)行patch浴讯，找出最小操作DOM節(jié)點(diǎn)的操作朵夏，把對(duì)DOM節(jié)點(diǎn)的操作轉(zhuǎn)變?yōu)镹ative DOM API, 調(diào)用WXBridge 進(jìn)行通信
1.4：WXBridge將渲染指令分發(fā)到native（Andorid、iOS）渲染引擎榆纽，由native渲染引擎完成最終的頁面渲染
簡單來說仰猖，靠什么渲染捏肢？
你可以把 weex-vue-framework 框架當(dāng)成被改造的Vue.js。語法和內(nèi)部機(jī)制都是一樣的饥侵，只不過Vue.js最終創(chuàng)建的是 DOM 元素鸵赫，而weex-vue-framework則是向原生端發(fā)送渲染指令，最終渲染生成的是原生組件躏升。
了解完基本原理外辩棒，框架一搭建，差不多就可以進(jìn)入Weex踩坑之路
但是Weex的通信膨疏，這一塊還是得了解一下一睁。
現(xiàn)在的hybrid開發(fā)當(dāng)中，就協(xié)議和注入用得比較多佃却，PA銀行2.0的時(shí)候還是使用的cordova者吁，大單頁模式，讓你卡的無解饲帅，后續(xù)引入了新框架复凳，借鑒了EasyJsWebView的想法，自研發(fā)了一套自己的Hybrid灶泵，這里就不詳細(xì)描述育八。同時(shí)作為一名ios開發(fā)，也需要知道丘逸，wk瀏覽器還新增了一個(gè)messagehandlers单鹿，可以在js中通過window.webkit.messagehandlers實(shí)現(xiàn)hybrid。
接下來我們隨便聊聊協(xié)議深纲，注入這兩種
協(xié)議：這里需要引入iframe標(biāo)簽仲锄，可以自行百度一下，使用iframe設(shè)置src例如
thor://phone.call?[{"num":"10086"},"174d3df76c0_function_1_phone_call_callback"]
那么native收到這個(gè)后進(jìn)行解析湃鹊，NSInvocation的分發(fā)儒喊，最終完成一次調(diào)用。當(dāng)然銀行當(dāng)時(shí)為了支持iOS7币呵，還使用了UIWebView怀愧，UIWebView通過objc_messageSend支持多參數(shù)的同步組件，wk瀏覽器還沒有穩(wěn)定可用的方案
注入：可以熟悉一下JavaScriptCore余赢，這個(gè)無非是JSContext+JSVale芯义，通過evaluateScript調(diào)用，從h5到native的調(diào)用妻柒，這里也涉及到兩個(gè)點(diǎn)扛拨，block和JSExport，block是暴露單個(gè)方法举塔，JSExport是暴露一個(gè)oc對(duì)象
這一塊绑警，附帶一個(gè)鏈接給大家做詳細(xì)了解求泰，有興趣的可以看看
http://www.reibang.com/p/3f5dc8042dfc
好了，言歸正傳
先說頁面->Native
從源碼上剖析计盒，是用了注入JavaScriptCore渴频，注入一個(gè)callNativeModule的方法，頁面調(diào)用傳入instanceIdString(組件id)北启、moduleNameString(組件對(duì)象)卜朗、methodNameStrin(組件方法)、argsArray(參數(shù))暖庄、optionsDic
再根據(jù)上述數(shù)據(jù)聊替，使用NSInvocation給到Native發(fā)送消息
那么Native->頁面又是如何呢
先說異步的：
weex是通過一個(gè)block進(jìn)行回調(diào)的，這個(gè)block在頁面->Native的時(shí)候培廓，是有一個(gè)實(shí)現(xiàn)的惹悄，在具體的組件中，如果有相應(yīng)的block回調(diào)肩钠，那么就會(huì)回到這里泣港，把參數(shù)通過WXBridgeProtocol類中有一個(gè)callJSMethod的方法，回傳到H5价匠，這里還有一個(gè)keepAlive的概念当纱，就不多述了
同步：還沒研究透徹，后面補(bǔ)充
2.Tangram
這里重點(diǎn)關(guān)注
1.Core（負(fù)責(zé)復(fù)用和回收）
2.Layout（負(fù)責(zé)布局）
3.EventBus（負(fù)責(zé)通信）
4.Helper（簡化代碼踩窖，快速布局）
這個(gè)大致就是動(dòng)態(tài)模板坡氯，大致可以理解為，一份json解析并到最后渲染的過程
模板內(nèi)容根據(jù)json里面對(duì)應(yīng)的參數(shù)賦值洋腮，那模板后續(xù)可復(fù)用性就會(huì)很高箫柳，哪怕業(yè)務(wù)方不一樣，只要做好字段的映射和埋點(diǎn)字段的補(bǔ)充（這里需要中臺(tái)和字段映射轉(zhuǎn)換）啥供，大概幾年的積累悯恍，就可以混合搭配很多樣式的頁面，越做越強(qiáng)伙狐。
3.RN
RN這塊技術(shù)棧涮毫，在銀行這邊用得不多，但是作為全干攻城獅贷屎，了解其原理罢防，搞搞幾個(gè)頁面，還是一門必修課
RN唉侄，先談界面
他拋開了webview咒吐，能夠運(yùn)行起來，全靠 Objective-C 和 JavaScript 的交互，JavaScriptCore我這邊就不多說了渤滞，網(wǎng)上一抓一大把例子
這里做一個(gè)對(duì)比，
RN使用JavaScriptCore作為其引擎榴嗅，Weex則使用V8引擎
RN需要編寫ios和Android兩份代碼妄呕，Weex則一份，
RN起步比較早和成熟嗽测，Weex則是個(gè)新生兒
RN的框架：React.js組件化绪励，數(shù)據(jù)綁定 Virtual DOM JSX模板學(xué)習(xí)使用有一定的成本
Weex的框架：Vue.JS 組件化，數(shù)據(jù)綁定 Virtual DOM 模板就是普通的html唠粥，數(shù)據(jù)綁定使用mustache風(fēng)格疏魏，樣式直接使用css
4.Flutter
有空再聊
