『壹』 如何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
『貳』 公司網站怎麼打包成APP，放到手機桌面上APP要上架到應用商店嗎
你說的應該是網站封裝APP吧，就是加個殼子，包裝成APP，實際上打開還是網頁，我在微導流做過，挺便宜的，有個鏈接就行了，小白就能操作，這種不用上到應用商店裡，估計也上不去，因為APP就是個殼子，沒什麼實際的東西，內里還是網站，一般在微導流上封裝好後會有個安裝包，直接安裝那個安裝包就行了，還可以分發，分發就是生成一個二維碼，不管是誰，掃碼就能下載這個安裝包，跟普通的掃碼安裝是一樣的。
『叄』 請問APICloud可以把一個web網站快速打包成APP么
可以的，在APICloud控制台可以填寫相關網站，創建一個APP，之後雲編譯就是一個單獨的APP了。很簡單的，你可以去試試。
『肆』 怎麼將網頁打包成桌面應用（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 文件即可以桌面應用的方式運行你的網頁。
『伍』 怎麼快速將網站打包為app
使用wap2app工具，打出的包可以上傳app store
『陸』 詳解Vue webapp項目通過HBulider打包原生APP（vue+webpack+HBulider）
1、webapp項目已經通過vue-cli搭建的腳手架寫好了，然後通過webpack打包成一個部署文件list，如下：
2、打開HBulider,打開目錄，選擇這個list，項目名稱自己更改。（或者直接新建一個app項目，然後把里邊的unpackage和manifest這兩個保留下來，其他的替換成自己dist文件里邊的內容）
這個時候是web項目，需要改為APP項目（如果直接新建的app，請忽略此步）
更改前：
更改後：
3、在HB中打開這個dist，可以看到有一個manifest.json的文件。這個文件是用來配置應用信息的。入口文件一定要對應好，我用VUE寫的單頁應用，所以就一個index.html。
然後配置圖標
按著自己項目的要求配置就行了，HB下面列舉的很詳細。
4、接下來可以通過手機用USB線與電腦連接進行真機調試。（必須通過USB線連接才可以，人家HB不支持什麼通過無線連接的方式）windows電腦不用說了，可以用一些360助手什麼的就可以解決了。如果你的手機是安卓的，在蘋果電腦下面就沒那麼好搞了。後來通過網路加自己的摸索也搞出來。方法就是在蘋果電腦上下載一個使用
Android
File
Transfer這個軟體。要收費時，點擊試用就可以了。手機上需要打開usb調試，然後選擇
內置光碟
就可以與蘋果電腦連接了。手機自己也有提示（真的很暖心）
連接成功之後，就可以進行真機調試了。
註：網上很多說自己的VUE項目項目打開一片空白，記得改一下config下面的index.js中bulid模塊導出的路徑。因為index.html里邊的內容都是通過script標簽引入的，而你的路徑不對，打開肯定是空白的。先看一下默認的路徑。
mole.exports
=
{
build:
{
env:
require('./prod.env'),
index:
path.resolve(__dirname,
'../dist/index.html'),
assetsRoot:
path.resolve(__dirname,
'../dist'),
assetsSubDirectory:
'static',
assetsPublicPath:
'/',
proctionSourceMap:
true,
assetsPublicPath默認的是
『/'
也就是根目錄。而我們的index.html和static在同一級目錄下面。
所以要改為
『./
'
另外還需要注意一點。src里邊router/index.js路由配置里邊默認模式是hash，如果你改成了history模式的話，打開也會是一片空白。所以改為hash或者直接把模式配置刪除，讓它默認的就行
。
//
mode:
'history'
//
默認hash
5、如果真機測試沒有問題。那麼就可以真正的進行打包成APP了。
打包成功後，可以通過手動下載，或者直接打開下載目錄里邊下載好的。把這個xxxx.apk文件通過qq或者其他的發送到你的手機上，點擊安裝。就可以了。
6、最後，展示一下手機上的效果。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:詳解Vue
webapp項目通過HBulider打包原生APP
『柒』 怎麼快速將網站打包為app
用一些框架可以直接使用網頁來開發native App，比如cordova，不過需要框架學習成本，你有時間可以試試。如果想簡單，直接使用webView載入你需要的網站
『捌』 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文件，這個文件位於產品裝包中。
『玖』 如何把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根的上下文環境