web頁面如何打包封閉成手機APP


所謂的webApp就是html頁面跟原生app結合而成的一種應用,這種應用的開發可以節省不少的成本,做出來的app跟原生一樣,webApp利用框架技術可以讓你有使用app的感覺,具體可以看平安銀行的app

工具/原料

 
  • 電腦
  • eclipse,git,nodejs,jdk,cordova
  • 一個完整的手機網站

方法/步驟

 
  1.  

    首頁得准備好需要的東西,如eclipse,一個完整可以瀏覽的手機網站,而且確保電腦配置好jdk,環境變量,還要安裝好cordova,這些環境等配置這里不表,可以自行百度。在這里我就自己隨意寫了個網站做測試,從下圖可以看出來,這是一個可以在網頁中瀏覽的手機網站

    web頁面如何打包封閉成手機APP
  2.  

    有了網站之后,第一步新建一個項目,打開你要保存的項目地址,比如D盤的yun文件夾,按住鍵盤的shift鍵+鼠標右鍵,選擇“在此處打開命令窗口”,就會彈出一個終端命令窗口,打開之后在終端里面輸入cordova create hello,hello為你的項目名稱,如cordova create qianqian,qianqian就是我的項目名稱,注意,不要手動去創建文件夾,因為我們在終端里面建的項目里面有很多的配置文件,終端命令窗口不要關

    web頁面如何打包封閉成手機APP
    web頁面如何打包封閉成手機APP
  3.  

    在終端命令窗口中輸入cd qianqian,進入qianqian文件夾,然后再輸入cordova platform add android,回車,等待下載完成,記住在下載之前一定要確保已經安裝git,要不然會下載失敗,本人親自試驗,下載可以要1分鍾左右,下載完成后終端命令窗口不要關,等下要用

    web頁面如何打包封閉成手機APP
  4.  

    下載完成后將准備好的網站放到www文件夾里面,原來的文件可以刪掉,再打開eclipse軟件,點擊菜單欄file--import,彈出一個窗口,選擇下面圖片中的選項,再點next,之后點擊Browse,選擇qianqian文件夾項目的路徑,選取,記住,復選框一定要全部選上,不懂的看下面的圖片,然后確定就可以了

    web頁面如何打包封閉成手機APP
    web頁面如何打包封閉成手機APP
  5.  

    確定之后就會看到下面圖片一樣左邊會出現兩個項目,為了確保項目一次性完成,我們可以在終端窗口里面輸入cordova prepare,輸入前確保是在當前qianqian文件夾,這個命令是在修改過項目的情況下運行的,等待他運行完,下面第二張圖片是運行完成的圖片

    web頁面如何打包封閉成手機APP
    web頁面如何打包封閉成手機APP
  6.  

    ok,之后就可以打包webapp了,回到eclipse,我們發現項目文件有個紅叉,或者也會出現一個感嘆號之類的,出現這個情況的話可以點擊菜單欄project--clean,在彈出的窗口中選擇第二個單選項,下面的復選框全部選上,不懂看圖,確認之后就可以看到紅叉沒了

    web頁面如何打包封閉成手機APP
  7.  

    然后在項目欄里選擇第二個項目右鍵選擇run as--android application,之后等待半分鍾左右,主要是看電腦運行速度好不好了,好的話就快

    web頁面如何打包封閉成手機APP
  8.  

    最后如果你手機連接着電腦或者你電腦開着安卓虛擬機的話,在彈出的窗口就會出現你手機或者虛擬機的信息,選擇他再點ok,系統會自動跳到虛擬機里,如果是真機的話,就直接看你的手機就行,手機會自動安裝app應用的

    web頁面如何打包封閉成手機APP
  9.  

    如果兩者都沒有的話可以將彈出的窗口都關閉,然后在軟件項目欄的第二個項目里面有個bin文件夾,打開,里面有個apk,將他復制出來安裝到自己手機或其他機器里就行了,下圖就是webapp做出來的最終效果,一開始忘記上傳圖片,只上傳了代碼,所以app里面沒有圖片,不過效果總算是出來了

    web頁面如何打包封閉成手機APP
    web頁面如何打包封閉成手機APP
  10.  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM