Many developers will deeply customize the navigation bar of the H5 container after it is connected. In addition to Native customization, there are also many scenes that use jsAPI to realize dynamic modification of the navigation bar. This paper aims to introduce how to dynamically modify the navigation bar under jsAPI through the description of the actual scene and the way of jsAPI, for the reference of mPaaS Coder. How to realize the customized development of navigation bar under Native page?

Built-in jsAPI modification navigation bar

1. Modify the navigation bar title

Modify navigation bar title API: setTitle

Alipayjsbridge. call('setTitle', {title: 'H5 setTitle',});Copy the code
Alipayjsbridge. call('setTitle', {subtitle: 'subtitle ',});Copy the code
Alipayjsbridge. call('setTitle', {title: 'title ', subtitle:' subtitle ',});Copy the code

2. Modify the navigation right button

SetOptionMenu This API has reset, title, icontype, icon these four attributes can be one of the priority: reset > title > icontype > icon.

Alipayjsbridge-call ('setOptionMenu', {title: 'button ', redDot: '5', // -1 indicates no display, 0 indicates redDot, 1-99 indicates number displayed on redDot. '#9951ffee', // font color, must start with # ARGB color value}); AlipayJSBridge.call('showOptionMenu'); // Force the display to refreshCopy the code
AlipayJSBridge.call('setOptionMenu', { icon : 'https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png', redDot : '6', // -1 indicates no display, 0 indicates red dot display, 1-99 indicates number displayed on red dot}); AlipayJSBridge.call('showOptionMenu'); // Force the display to refreshCopy the code
Menus: [{icontype: 'scan',},{icontype: 'add',}], override: True // Whether to keep the default optionMenu} when multiple options are required); AlipayJSBridge.call('showOptionMenu'); // Force the display to refreshCopy the code
AlipayJSBridge.call('hideOptionMenu'); // Hide the right buttonCopy the code

3. Change the background color of the navigation bar

SetTitleColor API, parameters color, reset, resetTransparent. Priority reset > color > resetTransparent.

window.AlipayJSBridge && AlipayJSBridge.call("setTitleColor", { color: 16118569, reset: False // (optional, default is false, true to restore the default navigation bar color title, color equals invalid)});Copy the code
window.AlipayJSBridge && AlipayJSBridge.call("setTitleColor", { reset: });});});});Copy the code
Alipayjsbridle. call("setTitleColor", {resetTransparent: true});Copy the code

KH5Event_Scene_NavigationBar_ChangeColor = kH5Event_Scene_NavigationBar_ChangeColor = kH5Event_Scene_NavigationBar_ChangeColor = kH5Event_Scene_NavigationBar_ChangeColor

// Disable changing the container's default navigation style [event stopPropagation];Copy the code

4. Other modifications

##### (1) Display title bar loading loading

AlipayJSBridge.call('showTitleLoading');
Copy the code

##### (2) Hide title bar loading loading

AlipayJSBridge.call('hideTitleLoading');
Copy the code

Display effect:

Custom jsAPI modification navigation bar

1. Create a custom jsAPI

(1) Create jsAPI class: must inherit from PSDJsApiHandler base class.

(2) In keeping with the default plug-in name provided by the container, create the jsAPI class name starting with XXJsApi4, where XX is the custom prefix.

(3) in the m file, need to rewrite the method – (void) handler: context: callback:. When this jsAPI is called on the H5 front end, it is forwarded to this method.

2. Registered the jsAPI

(1) Register this jsAPI in a custom Plist file.

JsAPI = jsAPI; jsAPI = jsAPI; jsAPI = name;

The name of the meaning
jsAPI The name of the jsAPI interface invoked on the H5 page. Note: To prevent the custom jsAPI and the container built-in jsAPI from being unavailable, please prefix the custom jsAPI name.
name The name of the jsAPI class created.

3. Custom jsAPI code implementation

(1) H5 front-end code reference:

Function setNativeTitle() {my_jsapi_call("setNativeTitle",{'title':' theme '}); } function my_jsapi_call(apiName,params) { window.AlipayJSBridge && AlipayJSBridge.call(apiName,params,function(data){ Alert (' call result '+ json.stringify (data)); }); }Copy the code

(2) Native code reference:

- (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSDJsApiResponseCallbackBlock)callback { [super handler:data context:context callback:callback]; NSLog(@"+++++++%@",data); NSString *string = data[@"title"]; / / get the current vc, H5 container through within the vc is a custom navigation YXH5WebVC modified vc = (YXH5WebVC *) DTContextGet () currentVisibleViewController; vc.barView.title = string; }Copy the code

Author: Ali Cloud mPaaS TAM team (YuxueRongyang)

MPaaS latest discount information

[20% off for Flying Members of Privacy Compliance Test] Help customers prevent regulatory penalties and pass the application market approval. Click to learn more