共计 3010 个字符,预计需要花费 8 分钟才能阅读完成。
简介: 操作领导:通过 jsAPI 实现导航栏的动静批改。
很多开发同学在接入 H5 容器后都会对容器的导航栏进行深度定制,除了 Native 的定制化之外,还有很多场景是应用到 jsAPI 的形式,通过 jsAPI 实现导航栏的动静批改。
本文旨在通过理论场景的形容,通过 jsAPI 的形式,介绍 jsAPI 下怎么动静批改导航栏,供各位 mPaaS Coder 参考应用。
延长浏览:技术干货 | Native 页面下如何实现导航栏的定制化开发?
内置 jsAPI 批改导航栏
1. 批改导航栏题目
批改导航栏题目 API:setTitle
AlipayJSBridge.call('setTitle', {title: 'H5 设置题目',});
AlipayJSBridge.call('setTitle', {subtitle: '副标题',});
AlipayJSBridge.call('setTitle', {
title: '题目',
subtitle: '副标题',
});
2. 批改导航右按钮
setOptionMenu 此 API 有 reset、title、icontype、icon 这 4 个属性有一个即可,属性的优先级:reset > title > icontype > icon。
AlipayJSBridge.call('setOptionMenu', {
title : '按钮',
redDot : '5', // -1 示意不显示,0 示意显示红点,1-99 示意在红点上显示的数字
color : '#9951ffee', // 字体色彩,必须以#开始 ARGB 色彩值
});
AlipayJSBridge.call('showOptionMenu');// 强制刷新显示
AlipayJSBridge.call('setOptionMenu', {
icon : 'https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
redDot : '6', // -1 示意不显示,0 示意显示红点,1-99 示意在红点上显示的数字
});
AlipayJSBridge.call('showOptionMenu');// 强制刷新显示
AlipayJSBridge.call('setOptionMenu',{
// 显示时的程序为从右至左
menus: [{icontype: 'scan',},{icontype: 'add',}],
override: true // 在须要设置多个 option 的状况下,是否保留默认的 optionMenu
});
AlipayJSBridge.call('showOptionMenu');// 强制刷新显示
AlipayJSBridge.call('hideOptionMenu');// 暗藏右侧按钮
3. 批改导航栏背景色
批改设置导航栏背景色 setTitleColor API,参数 color、reset、resetTransparent。优先级 reset > color > resetTransparent。
window.AlipayJSBridge && AlipayJSBridge.call("setTitleColor", {
color: 16118569,
reset: false //(可选,默认为 false,true 复原默认导航栏色彩 title 等,color 等于有效)});
window.AlipayJSBridge && AlipayJSBridge.call("setTitleColor", {reset: true //(可选,默认为 false,true 复原默认导航栏色彩 title 等,color 等于有效)});
AlipayJSBridge.call("setTitleColor", {resetTransparent: true // 设置导航栏通明});
注:此 jsAPI 设置背景色后会影响导航题目和按钮色彩,须要在自定义插件中监听 kH5Event\_Scene\_NavigationBar\_ChangeColor 并在监听事件中实现代码:
// 禁止批改容器默认导航栏款式
[event stopPropagation];
4. 其余批改
(1)显示标题栏加载 loading
AlipayJSBridge.call('showTitleLoading');
(2)暗藏标题栏加载 loading
AlipayJSBridge.call('hideTitleLoading');
展现成果:
自定义 jsAPI 批改导航栏
1. 创立自定义 jsAPI
(1)创立 jsAPI 类:必须继承自 PSDJsApiHandler 基类。
(2)为与容器默认提供的插件命名保持一致,创立的 jsAPI 类命名以 XXJsApi4 结尾,其中 XX 为自定义的前缀。
(3)在 .m 文件中,需重写办法 -(void)handler:context:callback:。当在 H5 前端调用此 jsAPI 时,会转发到此办法。
2. 注册 jsAPI
(1)在自定义的 Plist 文件中注册此 jsAPI。
(2)在 JsApis 数组下注册上一步创立的 jsAPI 类,注册的 jsAPI 是一个字典类型,蕴含以下两项内容,Key 别离为:jsApi 和 name。
名称 | 含意 |
---|---|
jsAPI | 在 H5 页面中调用的 jsAPI 接口名。留神:为避免自定义的 jsAPI 与容器内置 jsAPI 相互影响导致不可用,请给自定义 jsAPI 名加上前缀予以辨别。 |
name | 创立的 jsAPI 的类名。 |
3. 自定义 jsAPI 代码实现
(1)H5 前端代码参考:
function setNativeTitle() {
my_jsapi_call("setNativeTitle",{'title':'主题'});
}
function my_jsapi_call(apiName,params) {window.AlipayJSBridge && AlipayJSBridge.call(apiName,params,function(data){alert('调用后果'+JSON.stringify(data));
});
}
(2)原生端代码参考:
- (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSDJsApiResponseCallbackBlock)callback {[super handler:data context:context callback:callback];
NSLog(@"+++++++%@",data);
NSString *string = data[@"title"];
// 获取以后 H5 容器 vc,通过 VC 内自定义批改导航栏
YXH5WebVC *vc = (YXH5WebVC *)DTContextGet().currentVisibleViewController;
vc.barView.title = string;
}
本文作者:阿里云 mPaaS TAM 团队(御雪 荣阳)
mPaaS 最新折扣资讯
【隐衷合规检测飞天会员八折专享】助力客户防备监管处罚及通过利用市场审核上架。点击理解更多
版权申明: 本文内容由阿里云实名注册用户自发奉献,版权归原作者所有,阿里云开发者社区不领有其著作权,亦不承当相应法律责任。具体规定请查看《阿里云开发者社区用户服务协定》和《阿里云开发者社区知识产权爱护指引》。如果您发现本社区中有涉嫌剽窃的内容,填写侵权投诉表单进行举报,一经查实,本社区将立即删除涉嫌侵权内容。