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,既可以參考,也可以直接安裝該鏈接上的插件。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容