移动开发平台 mPaaS 设置标题

By | 2021年4月23日

此接口用于设置页面的标题栏,包括主标题、副标题以及标题菜单项。

注意:由于苹果的 ATS 限制,image URL 必须为 https 链接或 base64,而 http 链接会被忽略。

setTitle 接口的使用方法

  
  1. AlipayJSBridge.call('setTitle', {
  2. title: '标题',
  3. });

代码示例

设置各种类型的标题栏:

  
  1. <h1>点击以下按钮看不同效果</h1>
  2. <a href="javascript:void(0)" class="btn title">只设置标题</a>
  3. <a href="javascript:void(0)" class="btn subTitle">标题+副标题</a>
  4. <a href="javascript:void(0)" class="btn clear">清空标题</a>
  5. <script>
  6. function ready(callback) {
  7. // 如果 jsbridge 已经注入则直接调用
  8. if (window.AlipayJSBridge) {
  9. callback && callback();
  10. } else {
  11. // 如果没有注入则监听注入的事件
  12. document.addEventListener('AlipayJSBridgeReady', callback, false);
  13. }
  14. }
  15. ready(function(){
  16. document.querySelector('.title').addEventListener('click', function() {
  17. AlipayJSBridge.call('setTitle', {
  18. title: '标题'
  19. });
  20. });
  21. document.querySelector('.subTitle').addEventListener('click', function() {
  22. AlipayJSBridge.call('setTitle', {
  23. title: '标题',
  24. subtitle: '副标题'
  25. });
  26. });
  27. document.querySelector('.clear').addEventListener('click', function() {
  28. AlipayJSBridge.call('setTitle', {
  29. title: ' ',
  30. subtitle: ' ',
  31. });
  32. });
  33. });
  34. </script>

API

  
  1. AlipayJSBridge.call('setTitle',{
  2. title, subtitle, image
  3. }, fn)

入参

名称 类型 描述 必选 默认值
title string 主标题文案 N “”
subtitle string 副标题文案 N “”
image string 支持 URL 或者 base64,请使用一张 3X 图,如果设置了 image,则前两个参数失效,并且不从 webview 的回调中读取 title。 N “”

注意事项

安卓 10.0.18 版本之前不支持设置空的 title,可以通过设置一个不可见字符串绕过,10.0.20 版本已经去掉这个限制。

  
  1. AlipayJSBridge.call('setTitle', {
  2. title: '\u200b',
  3. });

请关注公众号获取更多资料

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注