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