關於安卓app的webview設定本地代理以及webview開發環境的搭建

飯糰團團發表於2018-06-22
安卓APPWebView開發環境

場景

公司安卓app的技術棧是原生安卓（java）+ webview（vue-cli），後臺服務是用py寫的。 由於我之前沒接觸過app的開發，作為一個前端要怎麼除錯webview呢? 如果你是一個前端或者剛入門前端的安卓工程師，正苦於除錯安卓h5混合開發的app應用，不妨可以看看這篇文章 瞭解了一下安卓的開發，發現安卓的包裡只配置了兩個url，一個是webview的url，另外一個是後臺介面服務的url
如果我能將webview對映到我本地，那開發起來也方便多了。
也就是說關於頁面的webview從我本地拿，後臺服務還是從伺服器拿。
有了這個想法，就可以開始動手了。

思路

  1. 本地起一個提供webview的伺服器（這個通過webpack的dev-server就可以了）
  2. 在手機裡面設定代理，將webview的url代理到我電腦的webview服務埠

步驟

經過本人的嘗試，步驟如下......

Step1 . 配置fiddler

目的是讓手機能訪問到電腦的埠

  1. 開啟fiddler , Tools--options,如下
    關於安卓app的webview設定本地代理以及webview開發環境的搭建
    關於安卓app的webview設定本地代理以及webview開發環境的搭建
    設定完最好重啟一下fiddler
    勾選上allow remote computers to connect(允許遠端連線)，預設埠為8888，也可以更改成其他，確定儲存
  2. 手機連上和電腦相同的wifi,保證在同一個區域網下，開啟手機的wifi設定，代理--手動--伺服器為區域網的ip，可以在電腦上命令列輸入ipconfig找到，埠設定為8888（fiddler監聽遠端連線的埠）。這個時候，開啟你手機的app，訪問網路，就會發現fiddler開始刷資料了
  3. 將app的域名代理到本地，在通過nginx轉發到我們本地的webview埠
    修改hosts，如 127.0.0.1 xxx.xxx.com
    配置nginx，監聽app請求webview的域名和埠，代理到本地webpack起的服務的埠；
    監聽app請求後臺服務的域名和埠，代理到相應伺服器

關於安卓app的webview設定本地代理以及webview開發環境的搭建

  1. 使用chrome除錯：首先把裝置連線到電腦，開啟chrome瀏覽器，位址列輸入chrome://inspect，然後開啟手機裡面的app，devices下面就會出現一些連結，如圖
    關於安卓app的webview設定本地代理以及webview開發環境的搭建
    點選inspect就可以實時除錯啦。
    注意：點選inspect可能出現404或者頁面空白，原因有以下兩點
    1）需要翻牆，有各種翻牆的谷歌外掛，可以找找
    2）需要手機設定成開發者除錯模式
    3）需要在程式碼裡面設定webview為可除錯模式：
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}
複製程式碼

遇到的問題

webpack的dev-server裡面預設會對域名進行限制，加上 disableHostCheck: true 去掉域名的限制

最終的效果

你只需要在你本地修改程式碼，ctrl+s之後，重新開啟app相應的webview頁面就能看到修改效果了，也可以到chrome://inspect裡面檢視

注意

該方法只針對安卓手機，蘋果手機不生效

最後，設定完成之後，你就會發現手機裡面的app訪問的頁面跟你本地的頁面是一毛一樣的，修改頁面後你只要重新進入app就會發生變化了

相關文章