Flutter 应用间跳转应用,实现唤起第三方App
前言
最近因为工作需求,做了应用间跳转应用,因为是一个flutter新手,所以在工作之余随便总结记录一下。
一、应用间跳转应用场景
1.使用第三方用户登录,跳转到需授权的App。如QQ登录,微信登录等。需要用户授权,还需要"返回到调用的程序,同时返回授权的用户名、密码"。
2.应用程序推广,跳转到另一个应用程序(本机已经安装),或者跳转到iTunes并显示应用程序下载页面(本机没有安装)。
3.第三方支付,跳转到第三方支付App,如支付宝支付,微信支付。
4.内容分享,跳转到分享App的对应页面,如分享给微信好友、分享给微信朋友圈、分享到微博。
5.显示位置、地图导航,跳转到地图应用。
6.使用系统内置程序,跳转到打电话、发短信、发邮件、Safari打开网页等内置App中。
…
等等
二、配置URL Scheme
跳转应用的实现,需要使用 uni_links 第三方库来协助完成外部页面的 Scheme(在想要跳转到的应用中引入uni_links库,并配置Scheme)
Android 配置
安卓支持两种app links 和deep links.
app links需要是scheme需要指定https,并且要增加hosts文件assetlinks.json,还需要服务端配合。
deep links可以自定义scheme,也不要服务端的验证.
在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>
<!-- App Links -->
<intent-filter android:autoVerify="true">
<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 https://YOUR_HOST -->
<data
android:scheme="https"
android:host="[YOUR_HOST]" />
</intent-filter>
</activity>
ios配置
ios也支持两种,“Universal Links” 和 “Custom URL schemes”,两个功能和android类似。
Universal Link需要在ios/Runner/Runner.entitlements添加一个com.apple.developer.associated-domains环境,
<?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>
<!-- ... other keys -->
<key>com.apple.developer.associated-domains</key>
<array>
<string>applinks:[YOUR_HOST]</string>
</array>
<!-- ... other keys -->
</dict>
</plist>
Custom URL schemes在Info.plist中添加
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>Two You</string>
<key>CFBundleURLSchemes</key>
<array>
<string>tyfapp</string>
</array>
</dict>
</array>
提示:当需要被拉起的 App 没有被安装时,这个链接就不会生效;
uni_links使用
它可以帮助我们帮助我们获取进入的链接,它有两个方法供我们使用。一个是获取初始链接,另一个是监听。
初始链接方法:
Future<void> _handleInitialUri() async {
// In this example app this is an almost useless guard, but it is here to
// show we are not going to call getInitialUri multiple times, even if this
// was a weidget that will be disposed of (ex. a navigation route change).
if (!_initialUriIsHandled) {
_initialUriIsHandled = true;
_showSnackBar('_handleInitialUri called');
try {
final uri = await getInitialUri();
if (uri == null) {
print('no initial uri');
} else {
print('got initial uri: $uri');
}
if (!mounted) return;
setState(() => _initialUri = uri);
} on PlatformException {
// Platform messages may fail but we ignore the exception
print('falied to get initial uri');
} on FormatException catch (err) {
if (!mounted) return;
print('malformed initial uri');
setState(() => _err = err);
}
}
}
监听链接变化:
void _handleIncomingLinks() {
if (!kIsWeb) {
// It will handle app links while the app is already started - be it in
// the foreground or in the background.
_sub = uriLinkStream.listen((Uri? uri) {
if (!mounted) return;
print('got uri: $uri');
setState(() {
_latestUri = uri;
_err = null;
});
}, onError: (Object err) {
if (!mounted) return;
print('got err: $err');
setState(() {
_latestUri = null;
if (err is FormatException) {
_err = err;
} else {
_err = null;
}
});
});
}
}
销毁监听:
@override
void dispose() {
_sub?.cancel();
super.dispose();
}
三、实现跳转
上面我们配置好了android和ios,现在只需要我们通过我们配置的deeplink来打开跳转App了。
1.引入库
url_launcher: ^6.1.8
2. 跳转
打开浏览器
const url = 'https://flutter.io';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
打开外部APP
代码如下(示例):
final Uri launch = Uri.parse('tyfapp://');
bool isInstall = await canLaunchUrl(launch);
if(isInstall){
print('已安装,跳转app');
await launchUrl(launch);
}else{
print('未安装,做出提示或者到下载页面');
}
提示:ios跳转到App Store可通过这样实现:
final url = "https://itunes.apple.com/cn/app/id1380512641"; // id 后面的数字换成自己的应用 id 就行了
launchUrlString(url);
H5跳转App
第一种
window.location = 'wechat://';
第二种文章来源:https://www.toymoban.com/news/detail-744490.html
<a href="wechat://"></a>
或
const a = document.createElement('a')
a.href = "wechat://";
document.body.appendChild(a);
a.click();
四、结尾
这样就完成了打开第三方app了,我只是随便简单记录了一下,后续继续完善补充。文章来源地址https://www.toymoban.com/news/detail-744490.html
到了这里,关于Flutter 应用间跳转应用,实现唤起第三方App的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!