Android與JS的交互：JsBridge的簡單使用

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因爲"},{"type":"link","attrs":{"href":"https://github.com/lzyzsd/JsBridge","title":null},"content":[{"type":"text","text":"JsBridge"}]},{"type":"text","text":"裏的"},{"type":"codeinline","content":[{"type":"text","text":"example"}]},{"type":"text","text":"內容很多，自己第一次看這個東西，一下子還是一頭霧水的，關於"},{"type":"codeinline","content":[{"type":"text","text":"Android"}]},{"type":"text","text":"與"},{"type":"codeinline","content":[{"type":"text","text":"JavaScript"}]},{"type":"text","text":"的交互，之前都是直接使用"},{"type":"codeinline","content":[{"type":"text","text":"WebView"}]},{"type":"text","text":"來實現的，可是後來並沒有深入去研究這個東西，原先項目使用到的"},{"type":"codeinline","content":[{"type":"text","text":"WebView"}]},{"type":"text","text":"，也因爲緊緊只是展示"},{"type":"codeinline","content":[{"type":"text","text":"html"}]},{"type":"text","text":"頁面，爲了優化，也換成了"},{"type":"link","attrs":{"href":"https://x5.tencent.com","title":null},"content":[{"type":"text","text":"TBS騰訊瀏覽服務"}]},{"type":"text","text":"，之後再也沒接觸到Android與JS交互相關的知識，就趁這個機會，把這方面的一點心得記錄一下。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"準備工作"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1.首先，需要在根目錄下的"},{"type":"codeinline","content":[{"type":"text","text":"build.gradle"}]},{"type":"text","text":"文件中加上："}]},{"type":"codeblock","attrs":{"lang":"java"},"content":[{"type":"text","text":"repositories {\n // ...\n maven { url \"https://jitpack.io\" }\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2.然後，需要在"},{"type":"codeinline","content":[{"type":"text","text":"app"}]},{"type":"text","text":"目錄下的"},{"type":"codeinline","content":[{"type":"text","text":"build.gradle"}]},{"type":"text","text":"文件中加上依賴："}]},{"type":"codeblock","attrs":{"lang":"java"},"content":[{"type":"text","text":"implementation 'com.github.lzyzsd:jsbridge:1.0.4'"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"開始使用"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"一、實現通過JavaScript調用Android方法"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1.在"},{"type":"codeinline","content":[{"type":"text","text":"src/main"}]},{"type":"text","text":"文件夾下新建一個"},{"type":"codeinline","content":[{"type":"text","text":"assets"}]},{"type":"text","text":"文件夾，然後在裏面新建一個"},{"type":"codeinline","content":[{"type":"text","text":"demo.html"}]},{"type":"text","text":"文件，內容如下所示："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\n\n \n\n\n\n\nHTML\n

\n \n

\n

\n Show Contents:\n

\n\n\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2.需要在"},{"type":"codeinline","content":[{"type":"text","text":"activity_main.xml"}]},{"type":"text","text":"文件中，加上佈局："}]},{"type":"codeblock","attrs":{"lang":"java"},"content":[{"type":"text","text":" \n "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3.在"},{"type":"codeinline","content":[{"type":"text","text":"MainActivity.java"}]},{"type":"text","text":"中註冊一個方法"},{"type":"codeinline","content":[{"type":"text","text":"jsCallAndroid"}]},{"type":"text","text":"，用於"},{"type":"codeinline","content":[{"type":"text","text":"JS"}]},{"type":"text","text":"調用，並且使用"},{"type":"codeinline","content":[{"type":"text","text":"loadUrl"}]},{"type":"text","text":"加載"},{"type":"codeinline","content":[{"type":"text","text":"demo.html"}]},{"type":"text","text":"文件，代碼如下所示："}]},{"type":"codeblock","attrs":{"lang":"java"},"content":[{"type":"text","text":" bridgeWebview.registerHandler(\"jsCallAndroid\", new BridgeHandler() {\n @Override\n public void handler(String data, CallBackFunction function) {\n tvContent.setText(\"params from JavaScript: \" + data);\n JSONObject jsonObject = new JSONObject();\n try {\n jsonObject.put(\"nickname\", \"braveheart\");\n jsonObject.put(\"age\", \"18\");\n jsonObject.put(\"address\", \"China\");\n } catch (JSONException e) {\n e.printStackTrace();\n }\n function.onCallBack(\"return data from Android: \"+jsonObject.toString());\n }\n });\n bridgeWebview.loadUrl(\"file:///android_asset/demo.html\");"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面主要是爲了使"},{"type":"codeinline","content":[{"type":"text","text":"Android"}]},{"type":"text","text":"與"},{"type":"codeinline","content":[{"type":"text","text":"JS"}]},{"type":"text","text":"的交互更爲形象，所以就模擬成一個網絡請求獲取用戶信息的方式來說明，其意思是，當從"},{"type":"codeinline","content":[{"type":"text","text":"JS"}]},{"type":"text","text":"調用這個"},{"type":"codeinline","content":[{"type":"text","text":"Android"}]},{"type":"text","text":"方法"},{"type":"codeinline","content":[{"type":"text","text":"jsCallAndroid"}]},{"type":"text","text":"時，需要傳入參數"},{"type":"codeinline","content":[{"type":"text","text":"data"}]},{"type":"text","text":"，也就是"},{"type":"codeinline","content":[{"type":"text","text":"{ \"name\" : \"weihao\" }"}]},{"type":"text","text":"，然後會從"},{"type":"codeinline","content":[{"type":"text","text":"Android"}]},{"type":"text","text":"返回用戶信息，也就是："}]},{"type":"codeblock","attrs":{"lang":"java"},"content":[{"type":"text","text":"{\"nickname\":\"braveheart\",\"age\":\"18\",\"address\":\"China\"}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"4.運行效果，如下圖所示："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/75/75c6d0f3147859040fde835d7885a0ea.png","alt":null,"title":"","style":[{"key":"width","value":"50%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上部分是"},{"type":"codeinline","content":[{"type":"text","text":"demo.html"}]},{"type":"text","text":"文件頁面，下部分是"},{"type":"codeinline","content":[{"type":"text","text":"Android"}]},{"type":"text","text":"原生頁面，其中可以看到，當點擊"},{"type":"codeinline","content":[{"type":"text","text":"Call Android Method"}]},{"type":"text","text":"按鈕時，"},{"type":"codeinline","content":[{"type":"text","text":"JS"}]},{"type":"text","text":"調用"},{"type":"codeinline","content":[{"type":"text","text":"Android"}]},{"type":"text","text":"方法"},{"type":"codeinline","content":[{"type":"text","text":"jsCallAndroid"}]},{"type":"text","text":"，"},{"type":"codeinline","content":[{"type":"text","text":"Android"}]},{"type":"text","text":"頁面的"},{"type":"codeinline","content":[{"type":"text","text":"TextView"}]},{"type":"text","text":"控件獲取到了傳過來的參數"},{"type":"codeinline","content":[{"type":"text","text":"{ \"name\" : \"weihao\" }"}]},{"type":"text","text":"，並且在"},{"type":"codeinline","content":[{"type":"text","text":"demo.html"}]},{"type":"text","text":"頁面確實從"},{"type":"codeinline","content":[{"type":"text","text":"Android"}]},{"type":"text","text":"返回了用戶信息："}]},{"type":"codeblock","attrs":{"lang":"java"},"content":[{"type":"text","text":"{\"nickname\":\"braveheart\",\"age\":\"18\",\"address\":\"China\"}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"二、實現在Android裏調用JavaScript方法"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1.在"},{"type":"codeinline","content":[{"type":"text","text":"activity_main.xml"}]},{"type":"text","text":"文件中，加上一個"},{"type":"codeinline","content":[{"type":"text","text":"Button"}]},{"type":"text","text":"控件，代碼如下所示："}]},{"type":"codeblock","attrs":{"lang":"java"},"content":[{"type":"text","text":"