现在客户端的功能越开发越大，功能点越多，功能点入口也很多，通过动态配置可以每个功能或页面进行解耦，方便控制开启与关闭，通过动态配置也可以减少App版本升级带来的很多兼容性问题。在项目上线前把项目基础功能点通过路由注册好，方便在App中和网页中操作。针对新版本新功能，旧版本没办法使用的情况，可以更加友好的提示用户升级版本或者设置网页入口给用户提供简易入口。
通过路由可以在原生页面中、H5中、扫码、URL Scheme打开对应页面，入口统一方便维护。
一、组件化
使用路由配置页面，通过路由中注册路径与参数打开对应的页面。
注册页面建议使用protocol://path/path?params=URL编码内容
例如：appscheme://demo/page1?dataJSON=%7B%22showType%22%3A%201%7D
常用三方工具类
组件化页面
- 普通功能页面
- WebView
- 跨平台页面（uni-app）
- 支付页面
- 404页面
- 其他自定义页面
组件化功能
- 关闭当前页（pop/dismiss）
- 分享弹窗
- 支付弹窗
- 不支持路径提示下载最新版本
- 打开微信，支付宝小程序
- 打开导航弹窗（苹果地图，高德地图，百度地图，腾讯地图）
- xcode配置qqmap://
- xcode配置iosamap://
- xcode配置baidumap://
- token等基本信息失效（例如：让App退到登录页）
- openURL
- 发短信
- 打电话
- 地图
- 邮件
- alter
- actionSheet
二、URL Scheme
自定义配置项目URL Scheme, 需要再项目配置->TARGETS->info->URL Types中添加一项并填入
| 键名 | 说明 | 示例 |
|---|---|---|
| Identifier | 项目bundleId | com.xxx.xxx |
| URL Scheme | App专属标识 | AliPay |
可以通过在浏览器中测试，例如AppScheme://如果可以打开App，即说明配置成功。
使用SceneDelegate获取路径与参数
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
}];
}
使用AppDelegate获取路径与参数
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交互
原生页面获取网页中信息
原生页面显示样式由网页来控制，例如导航栏的样式，字体颜色，状态栏颜色，右侧按钮，导航栏是否随页面滚动，可以直接通过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
});
Action
- 关闭网页
- 控制原生样式
- 打开原生页面
- 打开弹窗
- 打开支付
- 打开分享
Style
- 是否显示导航栏
- 导航栏是否随页面滚动
- 导航栏颜色
- 状态栏颜色
- 文字和按钮颜色
- 右侧按钮内容与点击操作
- 是否支持手势返回，默认支持
- 是否支持上下回弹效果，默认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等基本信息
Demo地址：点击前往
网友评论