uniapp打包桌面應用

uniapp項目打包為桌面應用

一、在項目根目錄下安裝electron,這里建議使用cnpm，否則會很慢

cnpm install electron --save-dev

二、在項目根目錄下安裝electron-packager（打包用）

cnpm install electron-packager -g

三、修改uniapp的manifest.json配置文件

1. 找到h5配置，將運行的基礎路徑改為./，否則打包出來后會白屏，讀取不到，因為打包出來的h5默認加載地址為/static/

1. 去掉啟用https協(xié)議前的√，否則會出現(xiàn)網(wǎng)絡無法加載，去掉https不影響你請求后端的https協(xié)議

四、H5打包

1. HbuilderX頂部的菜單欄 --> 發(fā)行 --> 網(wǎng)站-h5手機版 --> 發(fā)行

1. 發(fā)行后的默認目錄為：unpackage\dist\build\h5

五、新建配置文件

1. 發(fā)行后的目錄新建package.json并添加以下內(nèi)容

{
 "name"  : "app-name",
 "version" : "0.1.0",
 "main"  : "main.js"
}

1. 發(fā)行后的目錄新建main.js并添加以下內(nèi)容,本文件就是package.json文件中main鍵的值，可根據(jù)需求修改

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 win

function 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.

ps: 若是你的網(wǎng)頁首頁文件名不是index.html,那么請在main.js中將index.html修改為你的網(wǎng)頁首頁

六、打包

1. 使用cmd外置命令窗口進入H5打包后的目錄unpackage\dist\build\h5運行以下命令

electron-packager . 可執(zhí)行文件的文件名 --win --out 打包成的文件夾名 --arch=x64位還是32位 --electron-version版本號(不是你的h5版本號，是electron版本號) --overwrite --ignore=node_modules

1. 也可直接復制以下示例命令

electron-packager . MyApp --win --out MyApp --arch=x64 --electron-version 1.4.14 --overwrite --ignore=node_modules

1. 打包后本目錄會出現(xiàn)MyApp目錄，進入后找到.exe后綴文件打開后即可看到桌面應用

PS：當網(wǎng)頁更新內(nèi)容后再次使用h5發(fā)行前，記得備份package.json和main.js