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

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。

如图所示
在这里插入图片描述

得到Team id 和 bundle id

如图所示

在这里插入图片描述

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 数组中的内容，其他不能修改

{"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如图所示

在这里插入图片描述

1.5 配置工程的info.plist文件

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

<key>LSApplicationQueriesSchemes</key><array><string>alipayshare</string><string>alipay</string><string>sinaweibohd</string><string>sinaweibo</string><string>weibosdk2.5</string><string>weibosdk</string><string>weibo</string><string>sinaweibosso</string><string>weixin</string><string>wechat</string><string>weixinULAPI</string><string>mqqopensdkapiV4</string><string>mqzone</string><string>mqqwpa</string><string>wtloginmqq2</string><string>mqzoneopensdkapiV2</string><string>mqzoneopensdkapi19</string><string>mqzoneopensdkapi</string><string>mqzoneopensdk</string><string>mqqopensdkapiV3</string><string>mqqopensdkapiV2</string><string>mqq</string><string>mqqOpensdkSSoLogin</string><string>mqqapi</string></array>

配置CFBundleURLTypes

在这里插入图片描述

<key>CFBundleURLTypes</key>
<array><dict><key>CFBundleTypeRole</key><string>Editor</string><key>CFBundleURLName</key><string>weixin</string><key>CFBundleURLSchemes</key><array><string>微信appId</string></array></dict><dict><key>CFBundleTypeRole</key><string>Editor</string><key>CFBundleURLName</key><string>myapp</string><key>CFBundleURLSchemes</key><array><string>myapp</string></array></dict>
</array>

1.6 验证universallink

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

在这里插入图片描述

二、实现微信分享

2.1 微信开放平台配置

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

如图所示

在这里插入图片描述

2.2 实现微信分享代码

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

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

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

  @overridevoid initState() {// TODO: implement initStatesuper.initState();configWeixin();}///配置微信fluwxvoid configWeixin() {registerWxApi(appId: "微信appId",universalLink: "配置的universalLink");}

实现分享功能

  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');});}