ホームページ >ウェブフロントエンド >htmlチュートリアル >Web バージョンの Jianshu を個人用の Jianshu デスクトップ アプリケーションにすばやく変換_html/css_WEB-ITnose
Web バージョンの Jianshu を個人用の Jianshu デスクトップ アプリケーションにすばやく変換_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:55:191492ブラウズ
最近Googleの拡張機能やアプリケーションにとても興味があったので、公式ドキュメントを勉強して記録としてこの記事を書きました。もし間違いがあれば、転載する必要がある場合はご指摘ください。ソース。
1. 技術要件
デスクトップ アプリケーションを作成するための HTML CSS JavaScript などのフロントエンド テクノロジの使用方法 そういえば、Google Chrome は素晴らしい製品だと言わざるを得ません。 V8 エンジンは Chrome での JavaScript の実行効率を大幅に向上させました。Google Chrome はオペレーティング システムと考えることもできます。Chrome アプリはその上で実行されるアプリケーションです。 Chrome アプリの開発は非常に高速で、非常に興味深いテクノロジーです。例として、短い本の Web バージョンをデスクトップ アプリケーションにすばやく組み込んでみましょう。また、互換性もあります。
ドキュメントと書籍のリファレンス: 公式ドキュメント: chrome apps about_apps 参考書籍: Chrome 拡張機能とアプリケーション開発
Google を使用して Web ページをデスクトップ アプリケーションに直接構築すると、これは非常に簡単で、開発者は HTML CSS JavaScript フロントエンド テクノロジを習得するだけでよく、公式ドキュメントと組み合わせることで、基本的にすぐに習得できます。したがって、基本的な HTML CSS JavaScript テクノロジがあれば、独自の特性を備えた簡単なデスクトップ アプリケーションをすぐに開発できます。逆に、Baidu にアクセスしてください。すぐに使いこなすことができます。この記事の目的: 短い本の Web バージョンをデスクトップ アプリケーションにすばやく変換します。Webview タグをマスターするだけで、短い本のデスクトップ アプリケーションが完成します。コードレベルを説明する前に、完成したレンダリングを次に示します。
2016-02-20 19:22:14 .png
2. アプリケーションの説明
アプリケーションを作成する前に、Chrome アプリにどのようなファイルを含めるべきかを説明させてください。これは次の部分で構成されます。
- manifest ファイルは、アプリに関する情報を Chrome に提供します。このアプリは何ですか?どのように機能するのでしょうか?追加でどのような権限が必要ですか?
- バックグラウンド スクリプトイベント ページを作成し、ソフトウェア ライフ サイクルを確実に管理するために使用されます
- すべてのコードは、HTML CSS JS を含む Chrome アプリ パッケージに含める必要がありますおよびネイティブ クライアント モジュール。
- すべての アイコン およびその他の有益なリソースは、パッケージに含めるのが最適です
- 注: さらに詳しく知りたい場合は、公式ドキュメント: chrome apps first_app
これを理解した後、コードのディレクトリ構造を見て理解することができ、1 つずつ説明します。
2016- 03-05 23:05:43.png
2. コードの説明
css/images/js/ フォルダーと main.html があることがわかります。 json ファイルを図に示しますが、最も重要なのは、manifest.json main.html background.js の 3 つのファイルです。以下の説明では、これらの 3 つのファイルにも焦点を当てます。 2.1.manifest.jsonmanifest.json ファイルの役割は、上記のアプリケーションの説明で明確に説明されています。実際、Chrome アプリだけでなく、Google 拡張機能にも json 形式のマニフェストが必要です。したがって、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 //版本号其他都是某字段对应的意思，这里不一一解释
さらに詳しく知りたい場合は、私が勝ちましたGoogle の公式ドキュメントがすべて翻訳されたとは言えません。詳細な手順についてはマニフェストを参照してください。 2.2.main.htmlmanifest.json ファイルを定義すると、ブラウザーはアプリケーションの名前、実行方法、必要な権限を認識できるようになります。したがって、アプリケーションが開始されると、アプリケーションはイベント ページを通じて onLaunched イベントをリッスンし、ウィンドウを作成します。それでは、ウィンドウにはどのようなインターフェイスが表示されるのでしょうか。このインターフェイスは main.html ファイルです。このインターフェイスは主に開発者の気分に依存しますが、必要に応じて何でも記述できますが、その機能については後述します。コードは次のとおりです。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简书桌面版</title> <link rel="stylesheet" type="text/css" href="css/main.css"> <script type="text/javascript" src="js/control.js"></script></head><body> <div id="title_bar">简书--找回文字的力量 <a id="close"></a> <a id="minimize"></a> </div> <webview id="web_content"></webview></body></html>
main.html ファイルのコード構造は非常に単純です。このインターフェイスは、タイトル、コントロール ボタン (閉じると最小化)、および 3 つの部分に分けることができます。 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'//不显示标题栏目，因为我们自己有写标题样式，不用使用默认的。 }); }}); これを見ると意味がわかります。コメントを介してコードを確認します。アプリケーションが作成されたので、インターフェースがどのようなものかを見てみましょう。ただし、その前に、まずアプリケーションを Google Chrome にロードする必要があります。Google Chrome を開き、アドレス バーに chrome://extensions/ と入力し、開発者モードを開いて、解凍した拡張機能をクリックしてロードします。最後に [ロード] をクリックします。作成したアプリケーション パッケージが正常にロードされると、次のようになります:
jianshu.png
クリックして開始したら、次を参照してください:
2016-03-06 12:07:14.png
main.html很好地显示出来了，其中标题（简书--找回文字的力量），两个控制按钮，中间一大快空白部分（空白部分是即将显示的主题内容）都是我们刚才定义的。现在我们就差最后一步就可以完成这个简书桌面应用了，就是利用Webview Tag调用简书网页页面，将其显示在main.html的cdeeff457c4cbf317506c744a1aa74e180d86bbc5915921202c61337d1c17204中，我将具体代码写在了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文件，就是这样。