开发者学堂课程【mPaaS 小程序开发实战 - 教你如何独立运行小程序 ：iOS 端自定义开发（一）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/741/detail/13133
iOS 端自定义开发（一）
内容介绍：
一、 iOS 小程序自定义导航栏
二、 iOS 小程序自定义启动加载页
三、 iOS 小程序自定义双向通道
一、iOS 小程序自定义导航栏
自10.1.60 版本基线起，iOS 小程序支持对导航栏进行自定义，您可以对导航栏中的标题、背景、返回按钮、右侧的设置和关闭按钮进行自定义。本文将向您详细介绍关于自定义 iOS 小程序导航栏的方法。
导航栏指的是小程序页面中上侧的部分。
根据导航栏上的元素，将自定义导航栏分为三个部分：自定义导航栏背景和标题，自定义导航栏返问按钮，导航栏右侧设置和关闭按钮。
1、自定义导航栏背景和标题
（1）全局自定义导航栏背景和标题
小程序里会有很多页面，全局自定义是指每次设置之后，不管是标题还是背景，对所有的页面都是生效的。
如果您要全局自定义小程序所有页面默认导航栏背景和标题，则需要在 app.json 中修改 window 配置。app.json 中 window配置如下：
"window" : {
"enablewK": "YES",
"enableDSL": true,
"defaultTitle":"小程序"，
"backgroundColor": "#F5F5F9",
"pullRefresh": false,
"allowsBouncevertical":"YES",
"titleBarColor" :"#fff"
}
导航栏隐藏：您需要自定义 JSAPI 实现。
导航栏透明:“transparentTitle": "always”。
导航栏渐变:“transparentTitle": "auto"。
导航栏颜色:“titleBarColor": ""#f00”。
导航栏标题文案: "defaultTitle": "Alert"。
导航栏标题颜色:在H5基类的 viewWillAppear 方法的 super之后中，修改当前页面 titleView 的样式。
导航栏标题图片:"titlelmage": "https://plic.alipayobjects. Com/e/201212/1ntOVeWwtg.png"。标题不是纯文字，而是一张图片。
"titleBarColor"当前导航栏页面的背景色，小程序全部的背景
"defaultTitle"默认的标题；"backgroundColor"背景颜色；"pullRefresh"是否支持刷新；“transparentTitle"当前导航栏页面是否透明；修改标题颜色，需要在原生代码中通过修改代码来实现。
修改标题颜色，首先在小程序页面基类的 viewWillAppear 方法的 super之后中，修改当前页面 titleView 的样式。
在之前课程基础上，自定义当前页面的基类，创建一个 webviewcontrol，它继承 H5webviewController，同时他的.m 文件里面，在 viewWillAppear 之后，
自定义一个方法 customNavigationBarWithParams，在这个里面来修改当前页面标题的颜色，标题的颜色通过传递一个启动参数，启动参数的设置在小程序里设置 titleColor，设置为#0f0，绿色，保存一下。
回到参数之后，取到参数的值，得到当前页面的 view，修改当前页面标题所在的 label，修改 label 的颜色、字体等。基类设置完成之后，还需要在定制 H5 容器的时候，指定基类是刚刚创建的 MPH5Webviewcontroller，加上这个代码，不加的话，自定义的配置是不生效的。
重新运行一下工程。同时，点击一下讲过的预览，看修改过的代码在手机上的效果，手机端的投屏，点击调试小程序，扫描二维码，点击到下一个页面，就可以看到标题变成绿色，也就是变成了刚刚设置的颜色，
导航栏标题位置：请参考以下代码进行实现。
1. - (NSDictionary *)nebulaCustomConfig
2.{
3. return @{@"h5_tinyAppTitleViewAlignLeftConfig“ : @"{\"enable\":\NO\}”};
4.}
现在的标题处在靠左的位置，在左侧的返回按钮上，有的用户可能希望标题居中显示，这就需要使用上述的代码，将代码放到 DTFrameworklnterface+TinyAppDemo.m 中，同样还需要进行开关的配置，这个方法其实是代理的协议，我们要实现代理协议的方法，同时指定协议所在的 Delegate，作为开关的内容，设置完成之后，就修改了标题的位置，重新运行一下工程。
在全局自定义导航栏背景和标题的基础之上，还可以修改某一页面的导航栏，修改某一页面的导航栏主要是在当前页面 -json_中配置。
（2）自定义某一页面导航栏背景和标题
如果您要自定义小程序中某一页面的导航栏背景和标题,则需要在该页面的 -json_中配置。
导航栏隐藏:您需要自定义JSAPI实现。
导航栏透明:“transparentTitle”: "always”".。
导航栏渐变:“transparentTitle": "auto”。
导航栏颜色:“titleBarColor": "#f00”。
导航栏标题文案:“defaultTitle":"Alert”。
导航栏标题颜色:您需要自定义 JSAPI，在 JSAPI中修改当前页面 titleView 的样式。
导航栏标题图片:"titlelmage":"https://pic.alipayobjects. Com/e/201212/1ntOVeWwtg.png"
同样可以对导航栏进行隐藏、透明、修改颜色，标题颜色等等，举一个当前页面 tiny-to-native.json 的 json 配置，这是一个自定义 json 页面，选择自定义 API，当前页面的标题是小程序，背景是白色，修改他的 title，改成自定义API，选择标题颜色，红色，点击保存，刷新看一下效果，变成了红色，标题也变成了自定义 API。
刚才是在两个 json 配置里面，一个是当前页面所在的 json 配置文件，一个是 app.json 文件里。
都设置了“titleBarColor"和“defaultTitle"，同时设置，当前页面的优先级是要高的，也就是说以当前页面设置的“titleBarColor"和“defaultTitle"两个参数为准。所以说他的背景就是红色，字体是白色。
同样可以设置导航栏进行透明、渐变。透明是指页面的导航栏彻底透明的，渐变是刚进页面背景是透明的，向上滚动页面导航栏是不透明的。
还有一种情况是页面打开了之后，需要动态的修改，比如用户点击某个按钮时候，要修改导航栏背景的颜色，小程序默认使用 my.setNavigationBar 的 API 来供它使用。
动态修改当前页面的导航栏背景和标题
如果您要动态修改当前页面的导航栏霄景和标题，则需要调用 my.setNavigationBar 进行配置。
导航栏隐藏:您需要自定义 JSAPI 实现。
导航栏透明:不支持。
导航栏渐变:不支持。
导航栏颜色:backgroundColor : "efo0” 。
导航栏标题文案:“title”:"新标题"。
导航栏标题颜色:您需要自定义 JSAPI，在 JSAPI 中修改当前页面 titleView 的样式。
可以修改当前页面的背景颜色，标题的文案，导航栏标题颜色，导航栏标题图片等等，导航栏隐藏、透明、渐变等API 是不支持的，如果要实现这些功能，需要在基类里通过传参，或者自定义 JSAPI 的实现。
（3）自定义导航栏返回按钮
如果您要全局修改返回按钮样式，则需要在 H5 基类的
viewWillAppear 方法的 super 之后中，修改当前页面 leftBarButtonltem 样式。可修改的样式包含以下内容，您可以参考下方代码段以获得更多指导。
修改返回箭头和文案颜色
修改返回箭头样式和文字内容
隐藏返回箭头
隐藏返回文案
在基类里修改当前返回按钮的颜色，同样可以在当前某个页面上设置 backbuttoncolor 来确定当前页面颜色，这个参数是自定义的，设置成什么都可以，跟代码能对应上就可以。“#0f0”改成绿色，修改颜色，左侧按钮的颜色和返回按钮的颜色。设置完成之后，重新运行工程，重新生成二维码，并扫描，点进一个页面，默认是蓝色，变成了白色。
（4）导航栏右侧设置和关闭按钮
全局修改右侧按钮图片和颜色
如果您要修改右侧按钮图片和颜色，则需要引入头文件 #import <TinyappService/TASUtils.h>并进行如下配置。
修改关闭按钮颜色:[TASUtils sharedinstance].
customltemColor = [UlColor redColor]。
修改关闭按钮图片:[TASUtils sharedinstance].
customCloselmage=[Ullmage imageNamed:@"x]。
显示分享按钮:[TASUtils sharedInstance].
shoulShowSettingMenu = YES。
修改分享按钮图片:[TASUtils sharedInstance].
customSettinglImage = [Ullmage imageNamed:@"xx"]。
修改分享按钮颜色:[TASUtils sharedInstance].
customltemColor = [UIColor redColor]。
全局修改右侧按钮图片和颜色，在基础之上设置这些API就可以了。头文件#import <TinyappService/TASUtils.h>最好是放在 DTFrameworklnterface 快要启动的时候，导入这个头文件之后，设置后面这些部分。
修改关闭按钮颜色，或者图片整体样式都替换掉，在关闭按钮左侧增加一个分享按钮，分享按钮默认是隐藏的，如果需要可以把它显示出来，[TASUtils sharedInstance]. shoulShow SettingMenu = YES，有了分享按钮之后，还能修改分享按钮的样式，默认它是连接点，还可以修改他的颜色。设置全部打开之后，重新运行工程，
（5）全局修改右侧按钮样设
如果您要全局修改右侧按钮样式，则需要在 H5 基类的
viewwillAppear 中，重写当前页面的 rightBarButtonltem。
完全修改右侧按钮，可能右侧按钮不想是一张图片，把它变成文字，可以完全重写右侧的按钮。
1.- (void)viewWillAppear:(BOOL)animated
2.{
3.[super viewWillAppear:animated];
4....
5.BOOL isTinyApp = [NBUtils isTinyAppWithSession:self. psdSession];
6.if (isTinyApp){
7.self.navigationltem.rightBarButtonltem=[[UIBar Buttonltem alloc] initWithTitle:@"关闭"
style:UlBarButtonltem
8.}
9.}
10.
11.- (void)onClickClose
12.{
13.[TASUtils exitTinyApplication:self.appld];
14.}
在基类里面重写当前验证的 rightBarButtonltem，重新定义他的点击事件还有样式，点击调试小程序，扫描二维码，可以看到右侧多出一个分享按钮，显示了分享按钮之后，我们要让关闭按钮和分享按钮进行修改，比如点击加号的时候，就已经退出了小程序，如果想完全自定义按钮的话，还能在 H5 基类里面完全重写当前页面的rightBarButtonltem，点击的事件可以调用 TASUtils exitTinyApplication:self.appld，同样可以来退出当前的小程序，这样整个右侧的按钮变成了关闭的文案，可以重新运行一下工程，查看效果。
打开可以看到右侧的图标变成了文案，当点击关闭按钮的时候，就回到自定义的点击事件里面去。这个自定义事件也是关闭小程序，同样也关闭了小程序。
