快速将网页版简书打造成具有个人特色的简书桌面应用_html/css_WEB-ITnose

近日对谷歌扩展以及应用很感兴趣，于是研究了下官方文档，特写此文记录一下，若有错误，敬请指教，如需转载，请说明出处。

1.技术需求

怎么用html css javascript这些前端技术来编写一个桌面应用，说到这，不得不说谷歌浏览器这款伟大的产品，其自行开发的V8引擎大大提升了javascript在chrome中的执行效率，甚至可以将谷歌浏览器想象成一个操作系统，而chrome app则是运行在其上的应用。chrome app开发十分迅速，是一个非常好玩的技术，下面就以网页版的简书为例子，快速将其打造成一个桌面应用，而且还是兼容的呢。

文档以及书籍参考：官方文档：chrome apps about_apps参考书籍：Chrome扩展及应用开发

利用谷歌直接将一个网页打造成桌面应用实现起来可谓十分轻松，开发者只需要掌握html css javascript前端技术，再结合官方文档，基本上都能快速掌握。所以，只要你有基本的html css javascript技术，就可以很快的开发出有自己特色的简述桌面应用。反之，请去百度之，很快就可以基本掌握。对于本篇文章的目的：快速将网页版简书打造成桌面应用，只需要掌握Webview Tag，便可完成简书的桌面应用。在进行代码层次的说明之前，先上一张完成后的效果图：

2016-02-20 19:22:14 .png

2.应用说明

在编写应用之前，请容我先解释一下chrome app应该包含哪些文件，其由以下部分组成。

manifest 文件将应用的一些信息提供给Chrome:这个应用是？它怎么运行？需要哪些额外的权限？ background script 用来创建一个事件页面然后可靠地管理软件生命周期所有代码必须包含在chrome app的包内，其中包含html css js以及Native Client模块。所有 icons 和其他有利资源最好也包括在包里面说明：若想深入了解，可以去看官方文档：chrome apps first_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.json manifest.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://HdhCmsTestjianshu测试数据/*",        "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文件，其作用下面再说。代码如下所示：

简书桌面版

简书--找回文字的力量

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114408

更新时间：2022-11-17 阅读：42次