技术干货 | jsAPI 方式下的导航栏的动态化修改-阿里云开发者社区

开发者社区> mPaaS小助手> 正文

技术干货 | jsAPI 方式下的导航栏的动态化修改

简介: 操作指导:通过 jsAPI 实现导航栏的动态修改。
+关注继续查看

公众号首图1014.png

很多开发同学在接入 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');

展示效果:1627994216981-552f2d90-3b02-4b16-8dd4-63cda4846f69.png

自定义 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 最新折扣资讯

【隐私合规检测飞天会员八折专享】助力客户防范监管处罚及通过应用市场审核上架。点击了解更多

尾部banner.gif

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C# 动态修改dll的签名 以及修改引用该dll文件的签名
原文:C# 动态修改dll的签名 以及修改引用该dll文件的签名 在读取RedisSessionStateProvider配置 提到用mono ceil 来修改程序集以及它的签名,里面GetPublicKey 和GetPubliKeyToken 方法里面那个字符串的获取 以及后来的签名 我们都应该 用code来实现,还有应用该dll文件的签名也一同需要修改。
1462 0
Linux下批量修改文件名(rename)
原文地址: http://blog.csdn.net/sea_shore/article/details/6102437 1.rename命令批量修改文件名, 其实linux下可以使用别的办法来批量修改文件名, 不过rename实在太方便了 比如把所有的表为cdb1_* 修改为cdb_*的在本目录下只需要# rename 'cdb1' 'cdb' * 以前都是写个for循环来做.
1644 0
【iOS开发】强制修改 iOS 状态栏颜色
下面截图给出修改 iOS 状态栏颜色的 4 种方式 Target.png Info.plist.png Storyboard.png code.png 其中第四张图中的代码,直接写在你的任何一个 ViewController 的 class 里面就可以。
668 0
State Processor API:如何读取,写入和修改 Flink 应用程序的状态
Apache Flink 1.9.0引入了状态处理器(`State Processor`)API,它是基于DataSet API的强大扩展,允许读取,写入和修改Flink的保存点和检查点(checkpoint)中的状态。
657 0
如何修改dedecms专题目录默认名称special
  专题有一个聚合的效果,一般会比普通的文章页更符合用户需求。如果用dedecms建专题的话,默认的目录是special,怎么修改修改dedecms专题目录名称呢,比如将/special/改为/s/这样更好记忆?这样改也不容易让同行发现,不然你辛辛苦苦建的专题几分钟时间就成为别人的了。
932 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7737 0
SAP SE16N 批量修改KONP表数据
SAP SE16N 批量修改KONP表数据   在做当前的一个项目里,我在导入采购信息记录主数据的时候,把价格的货币单位人民币弄成了CNY,实际上项目上要求使用RMB,有660多条采购信息记录的价格都有类似的问题。
2057 0
113
文章
0
问答
来源圈子
更多
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载