现在客户端的功能越开发越大,功能点越多,功能点入口也很多,通过动态配置可以每个功能或页面进行解耦,方便控制开启与关闭,通过动态配置也可以减少App版本升级带来的很多兼容性问题。在项目上线前把项目基础功能点通过路由注册好,方便在App中和网页中操作。针对新版本新功能,旧版本没办法使用的情况,可以更加友好的提示用户升级版本或者设置网页入口给用户提供简易入口。
通过路由可以在原生页面中、H5中、扫码、URL Scheme打开对应页面,入口统一方便维护。
使用路由配置页面,通过路由中注册路径与参数打开对应的页面。
注册页面建议使用protocol://path/path?params=URL编码内容
例如:appscheme://demo/page1?dataJSON=%7B%22showType%22%3A%201%7D
- 关闭当前页(pop/dismiss)
- 分享弹窗
- 支付弹窗
- 不支持路径提示下载最新版本
- 打开微信,支付宝小程序
- 打开导航弹窗(苹果地图,高德地图,百度地图,腾讯地图)
- xcode配置qqmap://
- xcode配置iosamap://
- xcode配置baidumap://
- token等基本信息失效(例如:让App退到登录页)
- openURL
- 发短信
- 打电话
- 地图
- 邮件
- alter
- actionSheet
自定义配置项目URL Scheme
, 需要再项目配置
->TARGETS
->info
->URL Types
中添加一项并填入
键名 | 说明 | 示例 |
---|---|---|
Identifier | 项目bundleId | com.xxx.xxx |
URL Scheme | App专属标识 | AliPay |
可以通过在浏览器中测试,例如AppScheme://
如果可以打开App,即说明配置成功。
App未启动时
- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[connectionOptions.URLContexts enumerateObjectsUsingBlock:^(UIOpenURLContext * _Nonnull obj, BOOL * _Nonnull stop) {
// TODO: 获取到链接`obj.URL`打开对应Router
}];
});
}
App已启动
- (void)scene:(UIScene *)scene openURLContexts:(NSSet<UIOpenURLContext *> *)URLContexts {
[URLContexts enumerateObjectsUsingBlock:^(UIOpenURLContext * _Nonnull obj, BOOL * _Nonnull stop) {
// TODO: 获取到链接`obj.URL`打开对应Router
}];
}
App未启动时
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// TODO: 获取到链接`launchOptions[UIApplicationLaunchOptionsURLKey]`打开对应Router
});
return YES;
}
App已启动
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
// TODO: 获取到链接`url`打开对应Router
return YES;
}
注意:路径打开会转成小写字母,所以请设定路径时就全部为小写字母
通过之前注册的路径生成二维码,扫描二维码解析路径后进行页面操作。
原生页面显示样式由网页来控制,例如导航栏的样式,字体颜色,状态栏颜色,右侧按钮,导航栏是否随页面滚动,可以直接通过js触发消息通知原生页面变更样式。
通过WKUserContentController
控制页面操作,实例注册两个事件style
和action
,
js在网页中触发为示例:
- 打开页面
window.webkit.messageHandlers.action.postMessage({ "url": "appscheme://demo/page1" });
- 弹窗效果
window.webkit.messageHandlers.action.postMessage({ "url": "appscheme://xxx/xxx?dataJSON=%7B%22type%22%3A%202%7D" });
- 设置样式
window.webkit.messageHandlers.style.postMessage({
"showNavigationBar": true,
"scrollNavigationBar": false,
"backgroundColor": "#FF333333",
"barTinColor": "#ffffffff",
"statusBarBlack": true,
"rightButtons": [
{
"text": "分享",
"icon": "https://abc.xxx.com/img/icon.png",
"action": "appSchema/path/path"
},
{
"text": "举报",
"icon": "https://abc.xxx.com/img/icon.png",
"action": "appSchema/path/path"
}
],
"notSupportGesture": true,
"notSupportBounces": true
});
- 是否显示导航栏
- 导航栏是否随页面滚动
- 导航栏颜色
- 状态栏颜色
- 文字和按钮颜色
- 右侧按钮内容与点击操作
- 是否支持手势返回,默认支持
- 是否支持上下回弹效果,默认iOS支持
{
"showNavigationBar": true, // 是否显示导航栏
"scrollNavigationBar": true, // 导航栏是否随页面滚动,默认透明然后滚动显示颜色
"backgroundColor": "#fffffff", // 背景颜色
"barTinColor": "#ff333333", // 标题颜色,按钮颜色
"statusBarBlack": true, // 状态是否为黑色
"rightButtons": [ // 右边区域按钮
{
"text": "分享", // 按钮文本呢
"icon": "https://abc.xxx.com/img/icon.png", // 按钮图标
"action": "appSchema/path/path" // 按钮点击操作
},
{
"text": "举报", // 按钮文本呢
"icon": "https://abc.xxx.com/img/icon.png", // 按钮图标
"action": "appSchema/path/path" // 按钮点击操作
}
],
"notSupportGesture": false, // 是否不支持手势返回
"notSupportBounces": false // 是否不支持回弹效果
}
网页中可能需要原生App提供一个基本信息,例如
- App版本
- App渠道(iOS、Android)
- 用户token等基本信息