Xcode自定义app内部导航栏

最新推荐文章于 2021-08-04 16:54:44 发布

qq_27312785

最新推荐文章于 2021-08-04 16:54:44 发布

阅读量554

点赞数 1

CC 4.0 BY-SA版权

分类专栏： cordova&xcode

本文链接：https://blog.youkuaiyun.com/qq_27312785/article/details/60958578

cordova&xcode 专栏收录该内容

5 篇文章

订阅专栏

本文档介绍了如何在Xcode项目中使用ThemeableBrowser插件自定义app内部的导航栏，包括安装插件、设置图片素材、修改代码以实现自定义导航栏样式，并提供了相关事件监听和错误处理的代码示例。

Xcode自定义app内部导航栏
一.说明
inappbrowser和安装插件themeablebrowser都是内置浏览器。
后者兼容前者所有功能，且后者可以自定义导航栏的样式。

一.安装插件
1.通过cordova 安装插件themeablebrowser
控制台命令：cordova plugin add cordova-plugin-themeablebrowser
二.图片素材位置
1.设计图片位置：项目名称（xuewo）/platforms/ios/www/img/**.png
2.设计图片位置：项目名称（xuewo）/www/img/**.png
说明：1和2文件要保持一致
back.png返回按钮
back_pressed.png返回按钮按下去后
forward.png前进按钮
forward_pressed.png前进按下去后

三.在项目中代码引入插件
1.修改代码位置：项目名称（xuewo）/platforms/ios/www/js/index.js
2.修改代码位置：项目名称（xuewo）/www/js/index.js
说明：1和2文件要保持一致
receivedEvent: function(id) {
var options={

toolbar: {
height: 44,
color: '#f6f6f6'
},
title: {
color: '#000000',
showPageTitle: true
},
backButton: {
wwwImage: 'img/back.png',
wwwImagePressed: 'img/back_pressed.png',
wwwImageDensity: 2,
align: 'left',
event: 'backPressed'
},

forwardButton: {
wwwImage: 'img/forward.png',
wwwImagePressed: 'img/forward_pressed.png',
wwwImageDensity: 2,
align: 'right',
event: 'forwardPressed'
},

backButtonCanClose: false
};
cordova.ThemeableBrowser.open('http://chongzhi.inkanke.com/app/index.php?i=4&c=entry&do=shop&m=ssy_fxshop', '_blank', options).addEventListener('sharePressed', function(e) {
alert(e.url);
}).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
console.error(e.message);
}).addEventListener(cordova.ThemeableBrowser.EVT_WRN, function(e) {
console.log(e.message);
});
}
};

四.代码解析
receivedEvent: function(id) {
var options={
//导航条
toolbar: {
height: 44,／／高度
color: '#f6f6f6'／／背景颜色
},
／／导航中间显示访问网站标题
title: {
color: '#000000',／／颜色
showPageTitle: true／／是否显示
},
／／后退按钮
backButton: {
wwwImage: 'img/back.png',
wwwImagePressed: 'img/back_pressed.png',／／按下后
wwwImageDensity: 2,／／数字越大图标越小
align: 'left',／／后退按钮显示导航栏的位置
event: 'backPressed'
},
／／前进按钮
forwardButton: {
wwwImage: 'img/forward.png',
wwwImagePressed: 'img/forward_pressed.png',
wwwImageDensity: 2,
align: 'right',
event: 'forwardPressed'
},
／／当没有后退时，点击后退按钮无反应，当true时，点击后退为退出浏览器
backButtonCanClose: false
};
cordova.ThemeableBrowser.open('项目url', '_blank', options).addEventListener('sharePressed', function(e) {
alert(e.url);
}).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
console.error(e.message);
}).addEventListener(cordova.ThemeableBrowser.EVT_WRN, function(e) {
console.log(e.message);
});
}
};

说明：导航条背景色建议和按钮图片素材背景色保持一致.
素材建议美工制作完美

附：文档地址：https://github.com/initialxy/cordova-plugin-themeablebrowser