?專案地址
URL Scheme的作用
iOS Scheme介紹
我們都知道蘋果手機中的APP都有一個沙盒，APP就是一個資訊孤島，相互是不可以進行通訊的。但是iOS的APP可以註冊自己的URL Scheme，URL Scheme是為方便app之間互相呼叫而設計的。我們可以通過系統的OpenURL來開啟該app，並可以傳遞一些引數。
例如：你在Safari裡輸入www.alipay.com，就可以直接開啟你的支付寶app，前提是你的手機裝了支付寶。如果你沒有裝支付寶，應該顯示的是支付寶下載介面，點選會跳到AppStore的支付寶下載介面。
URL Scheme必須能唯一標識一個APP，如果你設定的URL Scheme與別的APP的URL Scheme衝突時，你的APP不一定會被啟動起來。因為當你的APP在安裝的時候，系統裡面已經註冊了你的URL Scheme。
一般情況下，是會呼叫先安裝的app。但是iOS的系統app的URL Scheme肯定是最高的。所以我們定義URL Scheme的時候，儘量避開系統app已經定義過的URL Scheme。
Android Scheme介紹
android中的scheme是一種頁面內跳轉協議;
通過定義自己的scheme協議，可以非常方便跳轉app中的各個頁面；
通過scheme協議，伺服器可以定製化告訴App跳轉到APP內部頁面。
使用uni_links庫
1 、pubspec.yaml檔案新增依賴
dependencies:
uni_links: 0.4.0
複製程式碼2 、安裝
flutter pub get
Running "flutter pub get" in dynamic_theme... 5.8s
Process finished with exit code 0
複製程式碼3、Dart程式碼中使用外掛
import 'package:uni_links/uni_links.dart';
複製程式碼Android 配置
⚠️注意：Scheme 命名不支援dynamic_theme在iOS中測試了一下無法開啟,改成了全小寫dynamictheme
android/app/src/main/AndroidManifest.xml
新增以下程式碼檢視完整程式碼
<!-- Deep Links -->
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->
<data
android:scheme="[YOUR_SCHEME]"
android:host="[YOUR_HOST]" />
</intent-filter>
複製程式碼例子：
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data android:scheme="dynamictheme"/>
<data
android:host="detail"
android:scheme="dynamictheme"/>
</intent-filter>
複製程式碼iOS 配置
開啟Xcode->Info->URL Types設定URL Scheme
新增完也直接反應到配置檔案info.plist中了，當然你要是覺得自己很厲害，也可以直接在info.plist新增。
ios/Runner/Info.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
...
<!-- 其它配置 -->
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLSchemes</key>
<array>
<string>dynamictheme</string>
</array>
</dict>
</array>
...
<!-- 其它配置 -->
</dict>
</plist>
複製程式碼Dart 程式碼
不同狀態下實現頁面跳轉
Future<void> initPlatformStateForStringUniLinks() async {
String initialLink;
// App未開啟的狀態在這個地方捕獲scheme
try {
initialLink = await getInitialLink();
print('initial link: $initialLink');
if (initialLink != null) {
print('initialLink--$initialLink');
// 跳轉到指定頁面
schemeJump(context, initialLink);
}
} on PlatformException {
initialLink = 'Failed to get initial link.';
} on FormatException {
initialLink = 'Failed to parse the initial link as Uri.';
}
// App開啟的狀態監聽scheme
_sub = getLinksStream().listen((String link) {
if (!mounted || link == null) return;
print('link--$link');
// 跳轉到指定頁面
schemeJump(context, link);
}, onError: (Object err) {
if (!mounted) return;
});
}
複製程式碼解析Scheme跳轉頁面
我配置的scheme是dynamictheme://使用的是Deep Link，你也可以配置成http://www.xx.com和https://www.xx.com這種是App Links。
final Uri _jumpUri = Uri.parse(schemeUrl.replaceFirst(
'dynamictheme://',
'http://path/',
));
switch (_jumpUri.path) {
case '/detail':
Navigator.of(context).pushNamed(
Detail.routeName,
arguments: Detail(value: _jumpUri.queryParameters['name'] ?? '詳情'),
);
break;
default:
break;
}
複製程式碼Scheme 測試地址
測試前需要先安裝APK(目前只有安卓APK可以下載，iOS需要自己拉程式碼打包)。
<a href="dynamictheme://"> 開啟App(dynamictheme://) </a>
<a href="dynamictheme://detail"> 開啟App跳轉到詳情頁面 </a>
<a href="dynamictheme://detail?name=flutter"> 開啟App跳轉到詳情頁面帶上引數 </a>
複製程式碼iOS 效果預覽
未開啟App（開啟以後跳轉）
已開啟App（監聽Scheme）
Android 效果預覽
未開啟App（開啟以後跳轉）
已開啟App（監聽Scheme）
