展示觸控螢幕網頁打包成案頭應用（nw.js）

標籤：事件   滑動   標籤   git   替換   viewport   web   github   ges   

一、編寫觸控螢幕網頁注意點

　　1、控制縮允許存取為。內容寬度為螢幕寬度，初始縮放比例為1:1，並禁止縮放（如若可放大縮小，影響操作體驗）

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

　　2、<a>標籤點擊存在暗色透明背景問題，使用css屬性 -webkit-tap-highlight-color，設定rgba值透明度為0即可。

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

　　3、阻止觸控螢幕上瀏覽器預設行為

　　　　3.1 禁止瀏覽器右鍵行為（在觸控螢幕瀏覽器內容地區，短時間點擊不同地方可彈出右鍵菜單，影響操作體驗）

　　　　　　oncontextmenu 事件 在元素中使用者右擊滑鼠時觸發。

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

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

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

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

 

二、使用NW.js將網頁打包成案頭應用

1、在該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":""  //軟體表徵圖　　}}

2、將json檔案打包成zip壓縮包

3、更改壓縮包尾碼名為nw

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

　　https://nwjs.io/downloads/

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

6、在node-webkit解壓目錄下，開啟命令視窗（shift+右鍵）

　

 

7、輸入命令

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

8、產生SLYJ.exe檔案 點擊即可運行

 

9、如若頁面內容包含視頻，打包後可能出現播放不了的情況。可能是ffmpeg.dll檔案的問題。

　　下載這個最新的dll檔案替換即可。

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

 

展示觸控螢幕網頁打包成案頭應用（nw.js）