A HTML5 framework for local web, Electron.js (desktop application) and PhoneGap (mobile application).
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.monaca
dev-bin
res
www
.gitignore
LICENSE
README.md
config.xml
icon128.ico
index.htm
package.json

README.md

HTML5-Hybird-APP-Framework

A HTML5 framework for local web, Electron.js (desktop application) and PhoneGap Build (mobile application).


Package Results

Pacakge

Web

  • Open ./www/index.html in your browser.

Electron

  • node ./dev-bin/package.js

Phonegap Build


Environment Setup

npm install electron-prebuilt --save-dev
npm install electron-prebuilt -g
npm install electron-packager --save-dev
npm install electron-packager -g
npm install asar

Configuration

Web (global)

./www/config.js

Electron

./www/electron-config.json

  • 請修改webapp-config.json設定檔,主要修改URL屬性

請務必確認JSON格式是否正確:使用JSONLint驗證 http://jsonlint.com/

openDevTools決定是否預設開啟偵錯工具

其他參數請參照BrowserWindow的參數設定: https://github.com/electron/electron/blob/master/docs/api/browser-window.md

  • width、height (Integer):設定高度與寬度
  • useContentSize (Boolean):根據內容的尺寸而調整視窗大小,很實用
  • center (Boolean):是否置中
  • alwaysOnTop (Boolean):是否永遠置頂
  • skipTaskbar (Boolean):是否不出現在工作列。如果做了這件事情,那就要搭配Tray來把App關閉才行。
  • frame (Boolean):是否無外框。無外框起來非常像現代的APP,很潮,但不一定好用。
  • kiosk (Boolean):全螢幕單視窗模式。想要限制使用者只能用這個視窗時可以使用,非常好用。
  • transparent (Boolean):背景是否透明,這樣可以跟其他視窗一起使用。

#快速鍵

  • Escape:停止讀取或是離開APP
  • F5:重新讀取
  • Ctrl+Left:向後一頁
  • Ctrl+Right:向前一頁
  • Ctrl+Shift+i:切換偵錯工具

PhoneGap Build

./config.xml


Development

OnsenUI ICON

OnsenUI Vue API

Monaca


感謝

此程式碼的起點主要來自:QQBoxy-酷酷方盒子 http://qqboxy.blogspot.com/2016/06/electron-javascript-windows.html