APPCAN 如何快速的進行除錯?

jitui2018發表於2019-04-17

前言

首先寫這篇文章的初衷是因為以前曾經也用過appcan產品開發過app的,雖然用現在的技術眼光來看appcan已經落伍了,無法滿足要求高的技術團隊了。
但是最近看了下以前加的一些appcan開發者群裡面,發現還是有部分開發者還在使用著appcan進行著開發,部分開發的app開發除錯效率很低,除錯部分功能的時候,都是通過官網重新打包進行反覆的測試,appcan作為國內應該是第一家做的比較好的混合開發產品,在幾年前對國內的移動開發應該也算是做了貢獻了。
看到很多個人開發者或者小團隊開發者,在開發過程中除錯非常痛苦,我希望通過我的這邊教程提高大家的效率,也希望為appcan的生態圈做一份貢獻。

原理分析

  • appcan混合開發,主要還是使用的騰訊的X5核心進行開發的引擎,在頁面展示還是原理還是與普通瀏覽器開啟web一樣的,不一樣的是appcan生成的app是把開發的html頁面資源一起打包進了app安裝包中,訪問的頁面,都是開啟的手機本地的前端資原始檔。
  • 如果理解了上面的實現原理的話,可以很容易的想到一種除錯方式。如果用appcan技術生成一個瀏覽器app,可以訪問通過appcan框架開發的web頁面,是不是就可以在之前生成的瀏覽器上展示尼,可以呼叫系統功能如拍照,相簿尼

Appcan除錯中心

appcan在產品設計初期其實已經考慮到了這些方方面面的功能,只不過一開始的大神們做好了產品後,都陸陸續續離職了,後期的產品基本也沒太大更新,也有點跟不上技術潮流了。
話不多說,下面介紹下如何高效率的除錯

如何啟動除錯服務

APPCAN 如何快速的進行除錯?
appcanIDE上有一個啟動除錯服務的按鈕,很多人要是沒有仔細的看過官網的文件的話,就不知道什麼意思了。

點選啟動服務

成功啟動會有控制檯彈出,輸出以下的日誌(http port埠程式碼我自己修改過了,常見問題會說下)

APPCAN 如何快速的進行除錯?
服務原始碼目錄(AppCanStudioEnterpriseV3.3\AppCan-IDE\plugins\com.appcan.ide.eclipse.hdt.player_1.0.0.201503161536\AppCanServer) appcanIDE中很多服務都是node寫的。 本地瀏覽器訪問http://192.168.137.1:55555/appList進行測試有應用列表資料返回,說明成功。

生成除錯app

除錯app原始碼

目錄:(AppCanStudioEnterpriseV3.3\AppCan-IDE\plugins\com.appcan.ide.eclipse.hdt.player_1.0.0.201503161536\AppCanPlayer) 在appcan開發者平臺新建一個專門用來除錯的專案,講除錯app的原始碼拷貝出來,替換新建專案的程式碼,配置好app的外掛引擎進行打包。 打包好了之後安裝app,啟動app後出現以下頁面即算app打包成功。

APPCAN 如何快速的進行除錯?
APPCAN 如何快速的進行除錯?
APPCAN 如何快速的進行除錯?

如何使用除錯app

啟動app後會發現有一個IP輸入框,這個ip就填寫我們一開始啟動服務的時候控制檯輸出的ip192.168.137.1(電腦和手機要在同一個網段中)

APPCAN 如何快速的進行除錯?
輸入ip後,如果一切成功,會出現以下頁面

APPCAN 如何快速的進行除錯?
點選對應圖示,會啟動appcanIDE上的對應專案。接下來就可以正常使用了,體驗比較依賴網速,畢竟這個就類似一個瀏覽器訪問web網站。

常見問題

埠號限制

有時候一些公司內網有埠號限制,這邊說下服務端和app端如何修改埠號,修改成統一的埠號後,即可解決,下面貼下原始碼在哪裡。
服務埠號

APPCAN 如何快速的進行除錯?
app請求埠號
appCenter_content.html 檔案中全域性搜尋下需要修改的埠號兩個地方就好/

除錯app學習

請配合抓包工具一起食用。

相關文章