插件全名叫：
cordova-plugin-themeablebrowser
这个插件会弹出一个浏览器窗口，打开外部网页，功能比较强大，能自定义导航工具栏、标题等等。不止打开网页，还可以用来打开在线文档，如pdf、word等等文件的在线预览也是很不错的选择。
在安装使用这个插件时，有一个略微繁琐的事情是：
它不会把配套的图片资源复制到项目中，需要手动复制，往往新人使用时忽略这个，使得工具栏明明有关闭、后退等事件响应，却没看到按钮。
手动复制图片有个弊端是，当项目有问题或修改了config.xml里的id时，一般使用platform移除再添加android/ios，这样需重新拷贝上述图片资源，而往往也会忽略。
于是，我们扩展一下这个插件，添加自动复制图片的功能。
首先，clone或者下载该插件到本地目录，打开src文件夹，看到里面有各个平台：
各个平台.png
因为我们常用的是android和ios，那这里只处理这两个平台，分别打开目录，发现资源文件放置在：android/res/drawable-xhdpi和ios/Resources，
于是，我们打开最外面目录下的plugin.xml，给android添加配置项：
<source-file src="src/android/res/drawable-xhdpi" target-dir="res" />
给ios添加配置项：
<resource-file src="src/ios/Resources/back_pressed@2x.png" />
<resource-file src="src/ios/Resources/back@2x.png" />
<resource-file src="src/ios/Resources/close_pressed@2x.png"/>
<resource-file src="src/ios/Resources/close@2x.png" />
<resource-file src="src/ios/Resources/forward_pressed@2x.png" />
<resource-file src="src/ios/Resources/forward@2x.png" />
<resource-file src="src/ios/Resources/menu_pressed@2x.png" />
<resource-file src="src/ios/Resources/menu@2x.png" />
<resource-file src="src/ios/Resources/share_pressed@2x.png" />
<resource-file src="src/ios/Resources/share@2x.png" />
保存即可，配置的意思是把这些文件复制到项目的目标目录，没有填写目标目录，则复制到项目当前路径。
最后代码上传到Github上：https://github.com/woodstream/cordova-plugin-themeablebrowser
网友评论