使用electron搭建案頭app的簡便方法

標籤：樣本   操作   瀏覽器   ffffff   AC   class   out   order   就會   

使用electron官方給出的`electron-quick-start`樣本項目，將其拷貝下來，

 

git clone https://github.com/electron/electron-quick-start.git

 

裡面三個主要的檔案：

 

---- index.html       起始頁

---- main.js            顯示項目啟動後的視窗，裡面可以做一些配置，比如瀏覽器視窗大小，起始頁設定

---- renderer.js      裡面的注釋翻譯一下就瞭解了，主要是放業務相關js的，既可以訪問dom，也可以使用node API

 

 

然後 npm install  安裝模組

 

        npm start 啟動，可看到一個hello world！的框框

 

 

如何將項目發布為app呢

 

1.在起始頁上使用iframe標籤引入項目，即

 

index.html:    <div>        <iframe src="https://www.baidu.com” frameborder="0">         </iframe>       </div>  //src 裡放置你的線上項目的url  即可

 

 

 

2.安裝

npm install electron-packager -g

 

3.執行打包

electron-packager就會自動判別當前的作業系統打包對應的檔案，win下.exe, Mac 下.app 

 

electron-packager . aloe --out ../electron -all

 

解釋：

將目前的目錄下的檔案輸出到 electron ，並命名為aloe ，-all表示一次性把所有的作業系統都打包一遍

使用electron搭建案頭app的簡便方法