Cordova插件扩展——Themeablebrowser自拷贝图片

插件全名叫:
cordova-plugin-themeablebrowser
这个插件会弹出一个浏览器窗口,打开外部网页,功能比较强大,能自定义导航工具栏、标题等等。不止打开网页,还可以用来打开在线文档,如pdf、word等等文件的在线预览也是很不错的选择。
在安装使用这个插件时,有一个略微繁琐的事情是:

它不会把配套的图片资源复制到项目中,需要手动复制,往往新人使用时忽略这个,使得工具栏明明有关闭、后退等事件响应,却没看到按钮。

手动复制图片有个弊端是,当项目有问题或修改了config.xml里的id时,一般使用platform移除再添加android/ios后,这样需重新拷贝上述图片资源,而往往会忽略。

于是,我们扩展一下这个插件,添加自动复制图片的功能。
首先,clone或者下载该插件到本地目录,打开src文件夹,看到里面有各个平台:

各个平台.png

因为我们常用的是android和ios,那这里只处理这两个平台,分别打开目录,发现资源文件放置在:android/res/drawable-xhdpiios/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,既可以参考,也可以直接安装该链接上的插件。

推荐阅读更多精彩内容