展現觸摸屏網頁打包成桌面應用（nw.js）

1、編寫觸摸屏網頁注意點

　　一、控制縮放行爲。內容寬度爲屏幕寬度，初始縮放比例爲1:1，並禁止縮放（如若可放大縮小，影響操做體驗）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

　　二、small tips

　　2.1 <a>標籤點擊存在暗色透明背景問題，使用css屬性 -webkit-tap-highlight-color，設置rgba值透明度爲0便可。

-webkit-tap-highlight-color:rgba(0,0,0,0);

　　2.2解決滾動overflow滾動生硬的問題

-webkit-overflow-scrolling:touch

　　三、阻止觸摸屏上瀏覽器默認行爲

　　　　3.1 禁止瀏覽器右鍵行爲（在觸摸屏瀏覽器內容區域，短期點擊不一樣地方可彈出右鍵菜單，影響操做體驗）

　　　　　　oncontextmenu 事件 在元素中用戶右擊鼠標時觸發。

function stop(){ 
    return false; 
} 
document.oncontextmenu=stop;

　　　　3.2 禁止左右滑動 瀏覽器頁面返回上一頁或跳轉後一頁

　　　　　　監聽touchmove事件，使用e.preventDefault()方法阻止，其餘有touchmove方法的地方，阻止事件冒泡。

document.addEventListener('touchmove', function(event) {
	 event.preventDefault();
}, true);

 　　四、判斷移動端左滑、右滑

       function touching() {
            var startx;
            var endx;
            var el = document.getElementById('targetElement');
            el.addEventListener('touchstart', function (e) {
                var touch = e.changedTouches;
                startx = touch[0].clientX;
                starty = touch[0].clientY;
            });
            el.addEventListener('touchend', function (e) {
                var touch = e.changedTouches;
                endx = touch[0].clientX;
                endy = touch[0].clientY;
                cons();
            });
            function cons() {
                //左滑
                if (startx > endx) {
                    $("body").removeClass("open");
                }
            }
        }
        touching();

　　

2、使用NW.js將網頁打包成桌面應用

一、在該web文件夾根目錄下新建一個配置json文件

{
　　"name":"SLYJ",//文件名 不能夠存在空格
　　"main":"http://192.168.10.148:8001/index.html",//node-webkit啓動的時候默認打開的頁面,地址最好使用絕對路徑。
　　"window":{//控制主窗口的顯示風格
　　　　"fullscreen":true, ////bool 值。是否全屏顯示。
　　　　"frame": false,
　　　　"show_in_taskbar":true, //是否在任務欄顯示圖標。
　　　　"icon":""  //軟件圖標
　　}
}

二、將json文件打包成zip壓縮包

三、更改壓縮包後綴名爲nw

四、下載一個windows版本的node-webkit

　　https://nwjs.io/downloads/

五、 將SLYJ.nw 放在node-webkit解壓目錄下

六、在node-webkit解壓目錄下，打開命令窗口（shift+右鍵）

　

 

七、輸入命令

　　copy /b nw.exe+SLYJ.nw SLYJ.exe

八、生成SLYJ.exe文件 點擊便可運行

 

九、如若頁面內容包含視頻，打包後可能出現播放不了的狀況。多是ffmpeg.dll文件的問題。

　　下載這個最新的dll文件替換便可。

　　地址：https://github.com/iteufel/nwjs-ffmpeg-prebuilt/releases