flutter开发实战-Universal Links配置及flutter微信分享实现

2024-04-19 1959阅读

flutter开发实战-Universal Links配置及flutter微信分享实现

在最近开发中碰到了需要实现微信分享,在iOS端需要配置UniversalLink,在分享使用fluwx插件来实现微信分享功能。

一、配置UniversalLink

1.1、什么是UniversalLink

Universal link 是Apple在iOS9推出的一种能够方便的通过传统HTTPS链接来启动APP的功能,可以使用相同的网址打开网址和APP。当用户点击一个链接可以跳转到你的网站并获得无缝重定向到对应APP

1.2、苹果开发者账号配置

我们登录https://developer.apple.com/account/ 登录苹果开发者账号进入后,找到证书配置,

找到对应的appid,开通Associated Domains。

如图所示

flutter开发实战-Universal Links配置及flutter微信分享实现

得到Team id 和 bundle id

如图所示

flutter开发实战-Universal Links配置及flutter微信分享实现

1.3 创建apple-app-site-association

创建名为apple-app-site-association的文件

必须生成名字为 apple-app-site-association 的文件,没有后缀没有后缀没有后缀

“appID”: “teamId.yourapp’s bundle identifie”,

如"appID": “MJ989785AQE.com.my.myapp”,

文件的格式为图片内容中的格式,只可以修改details 数组中的内容,其他不能修改

Python
{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "MJ989785AQE.com.my.myapp",
                "paths": [ "*","/app/*"]
            }
        ]
    }
}

注意:Universal Links必须支持https,Universal Links配置的文件(apple-app-site-association文件)paths不能带query参数,微信使用Universal Links拉起第三方App时,会在Universal Links末尾拼接路径和参数,因此App配置(apple-app-site-association文件)的paths必须加上通配符

“paths”: [“/*”] 路径为https域名后添加的文件夹路径

假设我们的链接为 https://www.baidu.com,

如果路径设置为"paths": [“/”] ,Universal Link链接为https://www.baidu.com,Associated Domains关联applinks:www.baidu.com

如果路径设置为"paths": [“/app/”] ,Universal Link链接为https://www.baidu.com/app/,Associated Domains关联applinks:www.baidu.com/app/

最后将配置好的指定文件apple-app-site-association,上传到HTTPS服务器的根目录下或者.well-known目录下,app在请求下载这个文件时优先从.well-known下载,如果请求不到文件,才会从根目录下载。

1.4 Xcode配置Associated Domains

根据上面的对应的关系,我们在Xcode配置Associated Domains

配置Associated Domains如图所示

flutter开发实战-Universal Links配置及flutter微信分享实现

1.5 配置工程的info.plist文件

我们需要在info.plist中添加LSApplicationQueriesSchemes

Python
LSApplicationQueriesSchemes
	
		alipayshare
		alipay
		sinaweibohd
		sinaweibo
		weibosdk2.5
		weibosdk
		weibo
		sinaweibosso
		weixin
		wechat
		weixinULAPI
		mqqopensdkapiV4
		mqzone
		mqqwpa
		wtloginmqq2
		mqzoneopensdkapiV2
		mqzoneopensdkapi19
		mqzoneopensdkapi
		mqzoneopensdk
		mqqopensdkapiV3
		mqqopensdkapiV2
		mqq
		mqqOpensdkSSoLogin
		mqqapi
	

配置CFBundleURLTypes

flutter开发实战-Universal Links配置及flutter微信分享实现

Python
CFBundleURLTypes

	
		CFBundleTypeRole
		Editor
		CFBundleURLName
		weixin
		CFBundleURLSchemes
		
			微信appId
		
	
	
		CFBundleTypeRole
		Editor
		CFBundleURLName
		myapp
		CFBundleURLSchemes
		
			myapp
		
	

1.6 验证universallink

在浏览器输入域名后如果已安装app可以选择打开app。如图所示

flutter开发实战-Universal Links配置及flutter微信分享实现

二、实现微信分享

2.1 微信开放平台配置

在配置好universallink后,在微信开放平台(https://open.weixin.qq.com/)配置universal links

如图所示

flutter开发实战-Universal Links配置及flutter微信分享实现

2.2 实现微信分享代码

在flutter端,我们可以使用fluwx来实现微信分享。

在pubspec.yaml中,引入fluwx: ^3.13.0,我这里使用的是3.13.0版本

代码实现,我们在app的入口中,添加代码

Python
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    configWeixin();
  }
 ///配置微信fluwx
  void configWeixin() {
    registerWxApi(appId: "微信appId",universalLink: "配置的universalLink");
  }

实现分享功能

Python
  void shareToWeixin() {
    WeChatShareTextModel weChatShareTextModel = WeChatShareTextModel(
      "来自Flutter的分享, Hahaha",
      scene: WeChatScene.SESSION,
    );
    shareToWeChat(weChatShareTextModel).then((value) {
      print('shareToWeChat result:$value');
    }).catchError((error){
      print('shareToWeChat error:$error');
    }).whenComplete(() {
      print('shareToWeChat whenComplete');
    });
  }

flutter开发实战-Universal Links配置及flutter微信分享实现

三、小结

flutter开发实战-Universal Links配置及flutter微信分享实现。内容较多,可能描述不准确,请见谅。

学习记录,每天不停进步。

VPS购买请点击我

免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

目录[+]