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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端真相

如何发布自己的NPM包(模块)?

按照提示填写初始化信息,我的模块名称为:finitxu-npm-test,初始版本号:v1.0.0。

76580
来自专栏小尘哥的专栏

nodejs作为前后端分离中间件的跨域解决方案

前后端分离时候SEO问题很头疼,上次提供了nuxt+axios解决服务端渲染问题的解决方案,其实nodejs一样可以做服务端渲染,这时候会产生ajax跨域问题,...

9420
来自专栏Java后端生活

EasyUI(一)--加载本地json数据

22740
来自专栏C/C++基础

Linux命令(20)——cat命令

(4)把 textfile1 的文档内容加上行号后输入 textfile2 这个文档里。

8630
来自专栏salesforce零基础学习

salesforce零基础学习(七十二)项目中的零碎知识点小总结(一)

项目终于告一段落,虽然比较苦逼,不过也学到了好多知识,总结一下,以后当作参考。 一.visualforce标签中使用html相关的属性使用 曾经看文档没有看得仔...

231100
来自专栏公众号_薛勤的博客

基于Netty实现可自动渲染HTML页面的静态Web服务器

Github:https://github.com/yueshutong/JerryServer/ 码云:https://gitee.com/zyzpp/J...

45820
来自专栏王磊的博客

react native仿微信性别选择-自定义弹出框

简述 要实现微信性别选择需要使用两部分的技术:   第一、是自定义弹出框;   第二、单选框控件使用; 效果 ? 实现 一、配置弹出框   弹出框用的是:rea...

41980
来自专栏Angular&服务

Angular2 项目结构解释

9830
来自专栏淡定的博客

Nuxt基本安装与使用

1.3K30
来自专栏贺贺的前端工程师之路

如何使用chrome浏览器调试?

在chrome浏览器中打开http://localhost:3000,按F12,或者右击->单击【检查】.

9920

扫码关注云+社区

领取腾讯云代金券