最後決定使用 NW.JS 寫網頁應用程式

2017-11-28

寫程式都是一個人在學
成千上百萬人在開發
不要說一種程式語言還沒學完就出新的程式語言
光是同一種程式的一個版本還沒學完就出新的版本
尤其是目前最夯的 APPLE SWIFT
因為只能用工作之餘來學,從2.2版開始
還沒正式開始學 3.0 就出來了
後來 3.1 又緊接著出來
最近又推出 4.0 了
真是心有餘而力不足啊

因為在公司一直是使用網頁的方式寫程式
又因為電腦已舊不敷使用想採購新的電腦
成本考量想試看看低價的電腦加上免費的系統
但是現有的程式只能在 WINDOWS 上執行

所以找了又找試了又試
最後決定採用 NW.JS

用 HTML+CSS+JAVASCRIPT 的好處是
程式本身變化不大又跨平台
只要再學一下 NODE.JS 的功能即可

目前還不清楚 NODE.JS 到底有多好
所以後端資料庫方面還是延用 PHP 比較方便

NW.JS 簡單的開始

2017-11-28

為了向下相容所以採用舊版的 NW.JS
直接從 https://nwjs.io/downloads/ 下載 Legacy release
建議下載 sdk 版本 nwjs-sdk-v0.14.7-win-ia32.zip
下載後直接解開就可以使用了
在 NW.JS 的資料夾下新建一個 hello 資料夾
準備一個必須的檔案 package.json:
{
    "name": "nw-demo",
    "version": "0.0.1",
    "main": "index.html",
}

及一個自定名稱的 index.html 檔:
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node.js <script>document.write(process.version)</script>.
  </body>
</html>

把 hello 的資料夾拖到 nw.exe 就可以執行了
真的很簡單

不過也太簡單了吧

NW.JS 正式開始吧

2017-11-28

因為 sdk 的版本裡有 nwjc.exe 這支程式
它可以幫我們把 *.js 檔加密
就是因為它才決定採用 NW.JS 的
至於 html 及 css 明碼顯示就無所謂了
所以較完整的架構如下:
package.json
index.html
index.js
index.css

方便的話可以建一個 nwjc.bat 檔把 index.js 加密成 index.bin
..\nwjc index.js index.bin
start ..\nw .

這樣程式儲存後只要執行 nwjc.bat
就可以幫我們加密並執行我們的程式了

重點是要怎麼使用加密後的 js 程式呢
詳情請參考 Protect JavaScript Source Code
簡單的就是在 index.html 的 head 引用
<script>nw.Window.get().evalNWBin(null, 'index.bin');</script>
引用後就看個人需求去發揮了
個人習慣上會從 <body onload="init()"> 開始

function init(){
    nw.Window.get().on('close', function() {
        if(confirm('確定結束程式嗎?'))this.close(true);
    });

    var tray = new nw.Tray({ tooltip: '測試程式', icon: 'img/logo.png' });
    var menu = new nw.Menu();
    menu.append(
        new nw.MenuItem({
            label: '結束',
            click: function() { nw.Window.get().close(); }
        })
    );
    tray.menu = menu;
}

解除限制的 XMLHttpRequest()

2017-11-29

有寫過網頁程式的人應該都知道
XMLHttpRequest() 有跨網域存取的限制
但是在 NW.JS 裡使用就沒有這個限制了

var xhr=new XMLHttpRequest();
xhr.open('GET', 'https://tw.yahoo.com', false);
xhr.send();
if(xhr.readyState==4 && xhr.status==200){
    return xhr.responseText;
}

還是使用 textContent 好了

2017-11-29

以前程式只能使用 IE 元件
所以除了 innerHTML 之外就只能使用 innerText
也知道這是 IE 專有的屬性
要跨瀏覽器的話就要判斷該用 innerText 還是 textContent

經測試後原來 innerText 跟 textContent 都可以使用
之間的差異可以參考 這裡

因為是 Chrome V8 引擎
所以忠於原味還是使用 textContent 好了
反正都一樣

惱人的密碼欄位自動輸入

2018-01-05

如果想在程式裡加上帳密的話
chromium 會自動記錄 password 欄位
所以只要登入過 chromium 就會自動幫你輸入密碼
那何必加帳密要求登入啊
真的很奇怪誒

解決辦法就是在密碼標籤加一個屬性
<input type="password" autocomplete="new-password">
有人說要 autocomplete="off"
但我實測是 autocomplete="new-password" 才有效