業務需求
由於之前一直在做純前端和很久以前涉及過webAPP，對於hybird App的瞭解完全不夠，這次入職以後以這個項目入手挑戰確實不小。不過過程中有小夥伴指導，加上是一個不太難的頁面修改工作而不是從頭搭建，還是減小了不少難度的。
大致流程
切頁面
由於UI已經有了，大部分邏輯也是可以套用已有的內容，所以切頁面就成了第一步，按照給定的頁面樣式把HTML大概結構確定下來，寫樣式，寫一些簡單交互。
配置 webview 測試環境
這個步驟還是挺撓頭的，之前沒有配置過之前的環境，在寫好頁面後拿到了測試機和測試包，測試包就是一個簡單的帶着可以調用jsBridge的webview，服務在本地運行的話，需要使用Charles對手機的網絡進行代理（其實就是在中間層抓一邊包），我也試着用過fildder但是始終沒有搞對，相對來說Charles容易一點。PC端安裝好Charles後手機去連接到同一個局域網下，然後配置這個WiFi的高級選項裏的代理，配置成服務所在的主機IP地址，選Charles監聽的接口就行了。
這樣，我們所有在手機端的網絡相關操作都會被Charles抓取到，也可以用手機測試包的webview順利的訪問到運行中的服務了。
模擬數據，抽離HTML
一般這個時候應該可以拿到接口文檔或者接口返回的數據結構了，那我們可以去把之前寫死的HTML中的數據部分全都按json的方式抽離出來，然後HTML中就很舒服了，不再有寫死的內容，頁面的加載速度當然會變得很快。
複雜功能
比如我的頁面上最複雜的功能是一個模擬的輸入框，他要相應各種不同情況下的喚起，要能插入不同值。這裏我們可以放心的全身心去寫這個部分，最後打包成類傳遞出來就好。
接入接口
完成其餘的上傳、獲取的接口調用和數據處理，因爲之前已經用json去寫過了插入部分，所以基本只需要把返回的數據拿過來就能直接用了。上傳的口才是需要重點調通的地方。
精修動畫
再將各個地方的有問題的動畫進行調整，性能進行優化。
交給測試找bug
到這裏第一個入手的項目就算完成了。
總結
因爲之前沒碰過這種混合開發，不瞭解js和native通訊的問題，現在大致知道了雙向通信的原理。web端從原生調用時候傳入的url中獲取需要的參數，觸發不同的效果。在web中用iframe新建一個隱藏的頁面，在頁面進行切換的時候是會被原生抓取到的，這個時候向APP傳值來告訴他要進行什麼操作就可以了。
關於jsBridge的部分可能還是沒看的太透徹，之後需要再回來看看，相信對於各種開發都還是有不少好處的。