快速将网页版简书打造成具有个人特色的简书桌面应用_html/css_WEB-ITnose
近日對谷歌擴展以及應用很感興趣，于是研究了下官方文檔，特寫此文記錄一下，若有錯誤，敬請指教，如需轉載，請說明出處。
1.技術需求
怎么用html css javascript這些前端技術來編寫一個桌面應用，說到這，不得不說谷歌瀏覽器這款偉大的產品，其自行開發的V8引擎大大提升了javascript在chrome中的執行效率，甚至可以將谷歌瀏覽器想象成一個操作系統，而chrome app則是運行在其上的應用。chrome app開發十分迅速，是一個非常好玩的技術，下面就以網頁版的簡書為例子，快速將其打造成一個桌面應用，而且還是兼容的呢。
利用谷歌直接將一個網頁打造成桌面應用實現起來可謂十分輕松，開發者只需要掌握html css javascript前端技術，再結合官方文檔，基本上都能快速掌握。所以，只要你有基本的html css javascript技術，就可以很快的開發出有自己特色的簡述桌面應用。反之，請去百度之，很快就可以基本掌握。對于本篇文章的目的：快速將網頁版簡書打造成桌面應用，只需要掌握Webview Tag，便可完成簡書的桌面應用。在進行代碼層次的說明之前，先上一張完成后的效果圖：
2016-02-20 19:22:14 .png
2.應用說明
在編寫應用之前，請容我先解釋一下chrome app應該包含哪些文件，其由以下部分組成。
知道了這些后，我們就可以看一下代碼的目錄結構，進行了解，具體再一一說明：
2016-03-05 23:05:43.png
2.代碼說明
可以看到圖中分別有css/ images/ js/文件夾以及main.html manifest.json文件，不過最主要的是manifest.json main.html background.js這三個文件，下面的敘述也是圍繞這三個文件來做講解。2.1.manifest.jsonmanifest.json文件的作用在上面的應用說明中已經解釋得很清楚，其實不僅僅是chrome app，谷歌擴展也需要一個json格式的manifest，所以manifest.json文件很重要。代碼如下所示：
{ "app":{ "background":{ "scripts":["js/background.js"] } }, "manifest_version":2, "name":"簡書", "version":"0.1.0", "description":"谷歌應用版的簡書，對網頁版本作出一些優化#__#,添加到桌面方便啟動.", "icons": { "16": "images/ico_16.png", "48": "images/ico_48.png", "128": "images/ico_128.png" }, //權限 "permissions":[//這里需要簡書網頁域名的權限以及webview調用簡書頁面顯示到新窗口 "http://www.jianshu.com/*", "webview" ]}
登錄后復制
上面字段意思表達地很清楚，我們來看看:
app //Event Page會監聽onLaunched事件，隨即創建窗口，應用介紹有說這個作用，這里意思是app下面的background域會通過js/background.js創建窗口。manifest_version //整數表示文件自身格式的版本號,按照這個寫就好了name //應用名稱version //版本號其他都是某字段對應的意思，這里不一一解釋
登錄后復制
如果你想更加詳細地了解，我不會說360全部都翻譯了谷歌的官方文檔，請移步manifest詳細說明。2.2.main.html定義好manifest.json文件之后，現在瀏覽器知道了我們的應用叫什么，怎么運行的，需要的權限。那么，應用啟動后，應用會通過Event Page監聽onLaunched事件，然后創建一個窗口，那么窗口顯示什么界面呢？這個界面就是main.html文件。這個界面主要看開發者的心情，想怎么寫就怎么寫，但是不要忘了引入background.js文件，其作用下面再說。代碼如下所示：
簡書桌面版 簡書--找回文字的力量
登錄后復制
main.html文件里面的代碼結構十分簡單，這個界面可以分為三個部分，標題、控制按鈕（關閉以及最小化）、webview顯示的主體內容部分，當該窗口顯示之后，若想對窗口進行樣式上的修改，可以加一個 css文件，我這里是這樣定義的：
//添加邊框body{ margin: 0; padding: 0; border: #EEE 1px solid;}//標題欄部分樣式#title_bar{ -webkit-app-region:drag; //作用是讓鼠標可以拖動窗口界面 height: 26px; line-height: 26px; font-size: 15px; background-color: #EEE; padding: 0 10px; box-sizing: border-box;}//控制圖標樣式#title_bar a{ position: relative; -webkit-app-region:no-drag; //讓控制圖標可以被點擊 display: inline-block; float: right; height: 14px; width: 14px; margin: 6px; border: gray 1px solid; box-sizing: border-box; border-radius: 7px;}#close:hover{ background-color: #cf4646;}#minimize:hover{ background-color: #46B6CF;}/** * show content * 這定義webview調用簡書網頁頁面后寬高的定義 */#web_content{ width: 100%; height: 614px;}
登錄后復制
好了，窗口的樣式大概寫出來了，下面要做的就是怎么將這個頁面作為窗口顯示出來，這就要看background.js文件了。2.3.background.js簡單來說，background.js會指定應用啟動是創建的窗口，上代碼：
//Event Page監聽onLaunched事件chrome.app.runtime.onLaunched.addListener(function(){ var screenWidth = screen.availWidth; var screenHeight = screen.availHeight; var width = 1200; var height = 640; var main_window = chrome.app.window.get('main'); if (main_window) { main_window.show(); }else{ //這里就創建了一個id是main的新窗口，窗口內容是main.html chrome.app.window.create("main.html",{ id:'main', bounds:{ width:width, height:height, left: Math.round((screenWidth-width)/2), top: Math.round((screenHeight-height)/2) }, minHeight: height, minWidth: width, maxHeight: height, maxWidth: width, frame: 'none'//不顯示標題欄目，因為我們自己有寫標題樣式，不用使用默認的。 }); }});
登錄后復制
通過注釋就會明白這段代碼的意思，現在，我們的應用就已經創建完成了，我們可以看看界面是什么樣子了。不過在這之前，我們先要將應用加載到谷歌瀏覽器中，請打開谷歌瀏覽器，地址欄輸入chrome://extensions/，打開開發者模式，點擊加載已解壓的擴展程序...，最后加載你創建的應用包，加載成功后如下所示：
jianshu.png
點擊啟動后，請看：
2016-03-06 12:07:14.png
main.html很好地顯示出來了，其中標題（簡書--找回文字的力量），兩個控制按鈕，中間一大快空白部分（空白部分是即將顯示的主題內容）都是我們剛才定義的。現在我們就差最后一步就可以完成這個簡書桌面應用了，就是利用Webview Tag調用簡書網頁頁面，將其顯示在main.html的中，我將具體代碼寫在了js/control.js中，如下：
//webwiew methodswindow.onload = function(){ var web_content = document.getElementById('web_content'); web_content.src="http://www.jianshu.com/";//定義獲取的網頁頁面//在應用顯示之前加載以下文件，但是應用加載出來后，在應用里面某些界面還需要腳本，所以下面又增加了一個方法。 web_content.addContentScripts([ { name: 'jianshu', matches: ['http://*.jianshu.com/*'], css: { files: ['css/jianshu.css'] }, js: { files: ['js/jquery.1.11.3.min.js','js/jianshu.js'] }, run_at: 'document_start' }]);//在每次頁面加載后加入以下文件 web_content.addEventListener('loadcommit', function(e) { web_content.executeScript({ file: "js/jquery.1.11.3.min.js" }); web_content.executeScript({ file: "js/jianshu.js" }); });//控制按鈕的方法，縮小以及關閉，還多寫了一個最大化的方法，不過沒有調用 var current_window = chrome.app.window.current(); document.getElementById('minimize').onclick = function(){ current_window.minimize(); } document.getElementById('close').onclick = function(){ current_window.close(); } document.getElementById('maximize').onclick = function(){ current_window.isMaximized()?current_window.restore():current_window.maximize(); }}
登錄后復制
完成后界面是這樣的：
2016-03-06 12:24:57.png
2.4.增加自己的特色到了這一步，恭喜你，你已經可以自己打造一個桌面應用了，到此，我們的簡書桌面應用已經可以運行，我們現在要做的就是收尾工作，既然都已經將網頁版本的簡書都放進了我們的webview標簽之中，那么我們為何不寫一些自己想要的樣式呢？在control.js文件中，我們分別引入了js/jquery.1.11.3.min.js js/jianshu.js css/jianshu.css文件，那么它們是干么的呢，這些文件可以在簡書頁面加載時候一同加載進去，讓我來演示一下就明白了。比如說，在上面的圖中左側有個手機按鈕來提示下載簡書app，但是我已經下載了不想再看到，所以我可以寫個js將其隱藏掉，將代碼寫在js/jianshu.js里，審查元素，知道其class是：ad-selector，所以可以這么寫：
$(document).ready(function(){ $(".ad-selector").hide(); //將那個圖標隱藏 $(".search-form").removeAttr('target');//不要target屬性 $('a').removeAttr('target');})
登錄后復制
我們可以來看看效果：
2016-03-06 12:25:48.png
怎么樣，還不錯吧，同樣的，如果你對簡書布局有什么想改動的地方，可以將css代碼寫在 css/jianshu.css中，好了，現在簡書桌面應用已經打造完成了，只要將這個應用移動到你的桌面，就可以和使用其他應用一樣使用了，而且兼容所有平臺，當然前提是你得有谷歌瀏覽器。
3.總結
終于，我們將網頁版簡書打造成了桌面版，是不是非常方便，總結來看就是我們先定義 manifest.json文件，告訴瀏覽器我們編寫的應用是什么，怎么啟動什么的，然后再定義啟動頁面main.html,最后background.js將其作為窗口調用，這樣一個桌面應用就完成了，如果要進行修改，可以利用webview進行引如css js文件，就如同js/control.js引入的js/jianshu.js css/jianshu.css文件，就是這樣。
總結
以上是生活随笔為你收集整理的快速将网页版简书打造成具有个人特色的简书桌面应用_html/css_WEB-ITnose的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue.js全家桶是什么
- 下一篇： 笔记本出现未识别的网络怎么办(电脑出现未