A. 如何使用PhoneGap打包Web App
最近做了一款小游戲,定位是移動端訪問,思來想去最後選擇了jQuery mobile最為框架,製作差不多以後,是否可以打包成App,恰好以前對PhoneGap有耳聞,便想用這個來做打包,可以其中艱辛曲折多次讓我想放棄的心情,官方提供的例子,對我這種沒用過的人而言,真是無語的很,所已將配置環境和打包過程寫下做個記錄。
因為我只弄了Andriod的環境,所以在此只以Andriod為例。
使用PhoneGap搭建Android開發的項目整體步驟如下:
安裝java環境。
安裝ant構建工具。
安裝android的開發環境並配置環境變數。
安裝Node.js環境並配置環境變數。
安裝git
使用npm安裝PhoneGap全局環境。
使用PhoneGap命令創建PhoneGap項目。
將PhoneGap編譯為android項目。
將上述項目導入ADT進行後續開發。
安裝.apk文件
其實官網給出的安裝過程忽略了很多步驟(因為這里是Andriod環境,所以才會比官網的例子多出不少步驟),像我這種前端開發人員,電腦里可是連java都沒裝的,下面就詳細講解這些步驟,並最終生成apk文件。
B. 如何把java web 生成app
1.可以在servlet的init方法里,獲取web項目的全路徑。
String path = getServletContext().getRealPath("/");
例如 :E:\eclipseM9\workspace\tree\
2.也可以隨時在任意的class里調用,獲取到classes目錄的全路徑。
this.getClass().getClassLoader().getResource("/").getPath();
例如 : E:\eclipseM9/workspace/tree/WEB-INF/classes/
3.request.getContextPath();
獲得web根的上下文環境
C. 如何web應用程序打包成app
下載安裝MyEclipse2014,Android SDK,eclipse(需配置Android開發環境)
Java和Android環境安裝與配置,將另寫經驗分享,讀者也可網路參考其他相關資料,自行安裝
打開MyEclipse2014,新建一個HTML5 Mobile Application Project,命名,例如:hello
html5程序在工程www目錄下編輯;
編輯好我們的html5程序,下面就要開始學習打包了
這里介紹兩種打包方式:1、PhoneGap Build Service 打包
PhoneGap官網有相關教程可參考,不具體介紹
2、android SDK +eclispe 打包
android SDK +eclispe 打包(前提已配置好,android開發環境):
Step1、啟動eclipse,新建Android Application Project,即Android工程,命名,例如:hello
Step2、將前面Myeclipse2014中編輯好的HTML5程序(www整個目錄)拷至剛剛在eclipse新建hello工程對應assets目錄下面
Step3、下面要做的就是如何將我們的HTML5程序在Android應用中啟動,這里我們要使用Android系統自帶的WebView控制項(具體信息參考Adroid開發文檔)---在工程下找到res->layout->activity_main.xml並打開,向裡面插入WebView控制項,編輯好自己想要的樣式
Step4、在主程序入口,用剛剛編輯好的WebView控制項將HTML5程序引入,此時,主體功能已實現,編譯工程即可得到apk
D. php語言 如何把手機web版 打包成一個手機應用
您好:
PHP不具備這樣的功能,如果是網站,可以嘗試使用網路的 Site App(http://siteapp..com/)。
網路的這個功能,可以把網頁內容自動轉換成適合手機瀏覽的頁面,並可以生成IOS/Android應用。
你可以嘗試下,非常方便。
E. html+js做的網站,想做成APP怎麼封裝呢
如果要做網站封裝APP的話,其實非常簡單的,網上很多開發者服務平台都有這個功能,操作非常簡單,基本上一分鍾不到就可以封裝好。
在亥著開發者中心找到【產品概覽】-【封裝APP】
F. 如何將web網站打包成app
首頁得准備好需要的東西,如eclipse,一個完整可以瀏覽的手機網站,而且確保電腦配置好jdk,環境變數,還要安裝好cordova,這些環境等配置這里不表,可以自行網路。在這里我就自己隨意寫了個網站做測試,從下圖可以看出來,這是一個可以在網頁中瀏覽的手機網站
有了網站之後,第一步新建一個項目,打開你要保存的項目地址,比如D盤的yun文件夾,按住鍵盤的shift鍵+滑鼠右鍵,選擇「在此處打開命令窗口」,就會彈出一個終端命令窗口,打開之後在終端裡面輸入cordova
create hello,hello為你的項目名稱,如cordova create
qianqian,qianqian就是我的項目名稱,注意,不要手動去創建文件夾,因為我們在終端裡面建的項目裡面有很多的配置文件,終端命令窗口不要關在終端命令窗口中輸入cd
qianqian,進入qianqian文件夾,然後再輸入cordova platform add
android,回車,等待下載完成,記住在下載之前一定要確保已經安裝git,要不然會下載失敗,本人親自試驗,下載可以要1分鍾左右,下載完成後終端命令窗口不要關,等下要用下載完成後將准備好的網站放到www文件夾裡面,原來的文件可以刪掉,再打開eclipse軟體,點擊菜單欄file--import,彈出一個窗口,選擇下面圖片中的選項,再點next,之後點擊Browse,選擇qianqian文件夾項目的路徑,選取,記住,復選框一定要全部選上,不懂的看下面的圖片,然後確定就可以了
確定之後就會看到下面圖片一樣左邊會出現兩個項目,為了確保項目一次性完成,我們可以在終端窗口裡面輸入cordova prepare,輸入前確保是在當前qianqian文件夾,這個命令是在修改過項目的情況下運行的,等待他運行完,下面第二張圖片是運行完成的圖片
ok,之後就可以打包webapp了,回到eclipse,我們發現項目文件有個紅叉,或者也會出現一個感嘆號之類的,出現這個情況的話可以點擊菜單欄project--clean,在彈出的窗口中選擇第二個單選項,下面的復選框全部選上,不懂看圖,確認之後就可以看到紅叉沒了
然後在項目欄里選擇第二個項目右鍵選擇run as--android application,之後等待半分鍾左右,主要是看電腦運行速度好不好了,好的話就快
最後如果你手機連接著電腦或者你電腦開著安卓虛擬機的話,在彈出的窗口就會出現你手機或者虛擬機的信息,選擇他再點ok,系統會自動跳到虛擬機里,如果是真機的話,就直接看你的手機就行,手機會自動安裝app應用的
如果兩者都沒有的話可以將彈出的窗口都關閉,然後在軟體項目欄的第二個項目裡面有個bin文件夾,打開,裡面有個apk,將他復制出來安裝到自己手機或其他機器里就行了,下圖就是webapp做出來的最終效果,一開始忘記上傳圖片,只上傳了代碼,所以app裡面沒有圖片,不過效果總算是出來了
G. 怎麼將網頁打包成桌面應用(web前端頁面
在 HTML5的崛起、JavaScript要一統天下之際,有一個名為【跨平台】的技術越來越火。為什麼會這么火?因為軟體開發者只需一次編寫程序,即可在 Windows、Linux、Mac、IOS、Android 等平台運行,大大降低了程序員的工作量,也使公司的產品可以快讀迭代。曾經跨平台技術的不被看好,如今隨著手機、電腦硬體的發展而快速發展。這一切,幾乎由HTML5技術推動,當然,JavaScript 這個語言,是最大的功臣。
基於 HTML5 的跨平台技術比較出名的有 PhoneGap、Cordova,常常用於開發 webapp;還有 Egret、Cocos-creator、Unity 等,常用於開發游戲;還有基於 Node.js 的 nw.js,用於開發桌面應用,以及 Electron,一款比 nw.js 還強大的用網頁技術來開發桌面應用的神器。
其實,以上都是廢話,現在進入主題:怎麼用 Electron 將網頁打包成 exe 可執行文件!
假設:
1、你已經安裝並配置好了 node.js (全局安裝)
2、你已經用 npm 安裝了 electron (全局安裝)
3、你已經寫好了前端網頁(html、css、javascript 這些,或者基於這些的前端框架寫好的網頁)
4、以上三點看不懂的,趕緊去網路。。。
你如果具備了以上的假設,請繼續往下看:
1、找到你的前端網頁項目文件夾,新建 package.json、main.js、index.html 三個文件(註:其中的 index.html 是你的網頁首頁)
你的項目目錄/
├── package.json
├── main.js
└── index.html
2、在 package.json 中添加如下內容
{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"}
3、在 main.js 中添加下面的內容,這個 main.js 文件就是上面 package.json 中的 "main"鍵 的值,所以可根據需要修改
const {app, BrowserWindow} = require('electron')const path = require('path')const url = require('url')// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the JavaScript object is garbage collected.let winfunction createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow)// Quit when all windows are closed.app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}})app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}})// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.
4、如果你的網頁首頁的文件名不是 「index.html」,那麼請在 main.js 中將其中的 'index.html' 修改為你的網頁首頁名
5、打開 DOS,cd 到你的項目目錄(或直接在你的項目目錄下空白的地方 shift+滑鼠右鍵,然後點擊在此處打開命令窗口,這里看不懂的,唉,網路吧少年)
6、在上一步的 DOS 下,輸入npm install electron-packager -g全局安裝我們的打包神器
npminstallelectron-packager-g
7、安裝好打包神器後,還是在上一步的 DOS 下,輸入electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_moles 即可開始打包
electron-packager . app --win --out presenterTool --arch=x64
--version 1.4.14 --overwrite --ignore=node_moles
這個命令什麼意思?藍色部分可自行修改:
electron-packager .可執行文件的文件名--win --out打包成的文件夾名--arch=x64位還是32位--version版本號--overwrite --ignore=node_moles
以上是最簡單的打包方式,至於怎麼修改窗口大小、菜單欄怎麼加、怎麼調用系統API這些,就給你慢慢去研究Electron了。
如果你打包總是不成功,覺得很煩,同時對擴展功能沒什麼要求的話,
裡面有我已將內容為 hello,world 的 index.html 網頁通過 Electron 框架打包為 windows 環境下的桌面應用。
現只需將你的網頁前端項目復制到 /resources/app/project 目錄下,雙擊 exe 文件即可以桌面應用的方式運行你的網頁。
H. webstorm怎麼打包app
對於使用的不用的操作系統對WebStorm更改一下設置,能夠在更大的程度上提升效率。
1、Windows 系統
<WebStorm installation folder>/bin/idea.exe.vmoptions
或是下面的方法進行設置:
<WebStorm installation folder>/bin/idea64.exe.vmoptions
2、*NIX 系統
<WebStorm installation folder>/bin/idea.vmoptions
或是下面的方法進行設置:
<WebStorm installation folder>/bin/idea64.vmoptions
3、Mac操作系統
將這個file /Applications/WebStorm.app/bin/下的idea.vmoptions復制到
~/Library/Preferences/WebIdeXX/idea.vmoptions
舉個例子,為了增加WebStorm堆的大小,你需要從/Applications/WebStorm.app/bin/idea.vmoptions 復制original .vmoptions文件到~/Library/Preferences/WebIdeXX/idea.vmoptions,然後修改-Xmx設置。
對於比較舊的版本的話,就需要如下進行設置存儲:
/Applications/WebStorm.app/Contents/Info.plist
Unicode文本的管理設置
在WebStorm允許定義非ascii字元是否應該使用文字像『\ u00AB』或『\ 00 ab」。
中操作主要是由系統屬性idea.native2ascii.lowercase控制,在默認的情況下,使用大寫字元。
也可以使用小寫字元,但是需要按照使用的平台進行設置,如下:
1、Windows 和 *NIX系統
idea.native2ascii.lowercase=true
放到bin/idea.properties文件,這個文件位於產品裝包中。
2、Mac操作系統
復制/Applications/WebStorm.app/bin/idea.properties文件到~/Library/Preferences/WebIdeXX/下,打開進行編輯,添加行。
對於老版本的WebStorm,打開用於編輯的/Applications/WebStorm.app/Contents/Info.plist文件,並添加以下代碼:
<key>idea.native2ascii.lowercase</key>
<string>true</string>
到這個部分
<key>Properties</key> <dict> ... <dict>
放到bin/idea.properties文件,這個文件位於產品裝包中。
I. 怎麼快速將網站打包為app
用一些框架可以直接使用網頁來開發native App,比如cordova,不過需要框架學習成本,你有時間可以試試。如果想簡單,直接使用webView載入你需要的網站