iOS14 Widget小组件开发实践5——网络图片的加载

Posted 2023-04-25

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iOS14 Widget小组件开发实践5——网络图片的加载相关的知识，希望对你有一定的参考价值。

参考技术A

以上都是使用 Image 加载本地图片资源，但是 SwiftUI 中的 Image 没有提供直接加载 URL 方式的图片显示，那么如何在 SwiftUI 中让 Image 加载网络图片呢，可以采用异步加载网络图片数据，由 data 转换成 UIimage ，再给 Image 展示

但是这种异步加载图片的方式在 Widget 中却失效了， Image 显示不了图片。
在 TimelineProvider 的 getTimeline 中 completion(timeline) 执行完之后，不再支持图片的异步回调了，所以必须在数据请求回来的处理中采用同步方式，将图片的 data 获取，转换成 UIimage ，在赋值给 Image 展示。

接下里给 ios14 Widget小组件开发实践2——自定义Widget 里搭建的古诗视图增加一个网络封面图片显示，效果如下：

因为这个免费的 API 接口没有返回图片封面数据，所以就自己网上找个图片用来测试。关于图片请求的时机，这里我是将它放在了 API 接口回调后处理 json 转 model 的这一步：

最后在给 PoetryWidgetView 布局界面：

https://github.com/fzhlee/SwiftUI-Guide#20Image-Web
SwitUI-实现URL图片显示

iOS Widget 小组件打开其他APP✨仿TopWidget快捷启动✨ 附常用URL schemes

开发一个小组件App，有一项需求是快捷启动指定功能，比如微信扫一扫，付款码等功能，如下图所示：

快捷启动分为两部分：
1.点击指定区域，进入App并传入需要打开的功能链接
2.从App中打开传入的链接

一.小组件打开App并传入链接

根据官方文档的描述，点击Widget窗口唤起APP进行交互指定跳转支持两种方式：

widgetURL：点击区域是Widget的所有区域，适合元素、逻辑简单的小部件。

Link：通过Link修饰，允许让界面上不同元素产生点击响应

Widget支持三种显示方式，分别是systemSmall、 systemMedium、systemLarge，其中：

1、systemSmall(小号组件)只能用widgetURL修饰符实现URL传递接收。

//MARK: -小组件
//快捷启动small
struct ShortcutWidgetViewS : View {
    var date: Date
    var data: wShortcutData
    var body: some View {
        let info = data.infos[0]
                ZStack{
                    Image(uiImage: data.bg).resizable()
                	
                }.widgetURL(URL(string:"weixin://scanqrcode"))//这里是跳转微信扫一扫链接
    }
}

widgetURL可以挂在任意view即可生效
同一组件多次使用widgetURL，只生效最后一个

2.systemMedium、systemLarge可以用Link或者 widgetUrl处理

//MARK: -大组件
//快捷启动Large
struct ShortcutWidgetViewL : View {
    
    var body: some View {
        
        ZStack{
                    Image(uiImage: data.bg).resizable()
                    VStack{
                        HStack{
                       		//微信扫一扫链接
                            SwiftUIShortcutCellL(urlPath:"weixin://scanqrcode")
   							//扫一扫链接
                            SwiftUIShortcutCellL(urlPath:"alipay://platformapi/startapp?saId=10000007")
                        }
                        HStack{
                        	//健康码链接
                            SwiftUIShortcutCellL(urlPath:"alipay://platformapi/startapp?appId=68687564")
                            //乘车码链接
                            SwiftUIShortcutCellL(urlPath:"alipay://platformapi/startapp?saId=200011235")
                        }
                        HStack{
                        	//付款码链接
                            SwiftUIShortcutCellL(urlPath:"alipay://platformapi/startapp?appId=20000056")
                            //QQ扫一扫链接
                            SwiftUIShortcutCellL(urlPath:"mqq://qrcode/scan_qrcode?version=1&src_type=app")
                        }
                    }
                       
                    
                }
    }
}


struct SwiftUIShortcutCellL:View{
    var urlPath:String!//跳转的链接
    var body:some View{
        Link(destination: URL(string: urlPath)!) {
                ZStack(content: {
					//点击区域的UI
					Image(uiImage: data.bg)
                })
                
            } 
    }
}

二.从App中打开传入的链接

通过步骤一，我们实现了点击小组件，打开App并传入数据

在SceneDelegate中实现以下代码接收数据
App我用的是swift+UIKit ，用其他方式的大佬自行转换代码

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
        print(URLContexts)
        print(URLContexts.first!.url)
    }

输出数据如下

至此我们拿到了点击区域对应的URL，然后跳转链接就可以了

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
        print("URLContexts: \\(URLContexts)")
        print("URL: \\(URLContexts.first!.url)")
        UIApplication.shared.open(URLContexts.first!.url, options: [:], completionHandler: nil)
    }

三.URL schemes

跳转链接使用的方式是URL schemes
亲测有效

支付宝

功能	URL
手机充值	alipay://platformapi/startapp?saId=10000003
扫一扫	alipay://platformapi/startapp?saId=10000007
账单	alipay://platformapi/startapp?appId=20000003
登录界面	alipay://platformapi/startapp?appId=20000008
银行卡	alipay://platformapi/startapp?appId=20000014
余额	alipay://platformapi/startapp?appId=20000019
余额宝	alipay://platformapi/startapp?appId=20000032
付款	alipay://platformapi/startapp?appId=20000056
转账	alipay://platformapi/startapp?saId=20000116
饿了么	alipay://platformapi/startapp?appId=20000120
收款码	alipay://platformapi/startapp?appId=20000123
自选股	alipay://platformapi/startapp?appId=20000134
会员	alipay://platformapi/startapp?appId=20000160
理财	alipay://platformapi/startapp?appId=20000165
通讯录	alipay://platformapi/startapp?appId=20000166
记账	alipay://platformapi/startapp?appId=20000168
生活缴费	alipay://platformapi/startapp?appId=20000193
花呗	alipay://platformapi/startapp?appId=20000199
黄金	alipay://platformapi/startapp?appId=20000218
总资产	alipay://platformapi/startapp?appId=20000243
我的快递	alipay://platformapi/startapp?appId=20000754
滴滴	alipay://platformapi/startapp?appId=20000778
基金	alipay://platformapi/startapp?appId=20000793
语音助手	alipay://platformapi/startapp?appId=20000835
充值中心	alipay://platformapi/startapp?appId=20000987
搜索	alipay://platformapi/startapp?appId=20001003
蚂蚁森林	alipay://platformapi/startapp?appId=60000002
流量钱包	alipay://platformapi/startapp?appId=60000057
商家服务	alipay://platformapi/startapp?appId=60000081
共享单车	alipay://platformapi/startapp?appId=60000155
蚂蚁庄园	alipay://platformapi/startapp?appId=66666674
余利宝	alipay://platformapi/startapp?appId=66666708
惠支付	alipay://platformapi/startapp?appId=68687009
养老	alipay://platformapi/startapp?appId=68687131
余额宝	alipay://platformapi/startapp?appId=77700124

微信

功能	URL
打开微信	weixin://
扫一扫	weixin://scanqrcode

微信能搜到很多功能的URL，经测试，目前只有打开微信和微信扫一扫可以使用

系统

功能✨	URL
App Store	itms-apps://
备忘录	mobilenotes://
邮件	mailto://
写给指定邮件	mailto://address@126.com
给指定号码打电话	tel://12315
短信	sms://
给指定号码发短信	sms://15011111111
日历	calshow://
相册	photos-redirect://
音乐	music://
快捷指令	shortcuts://
创建捷径	shortcuts://create-shortcut
打开指定捷径	shortcuts://open-shortcut?name=[name]
钱包	shoebox://
闹钟	Clock-alarm://
秒表	Clock-stopwatch://
倒计时	Clock-timer://

百度

功能✨	URL
百度地图	baidumap://
手机百度	BaiduSSO://
百度音乐	baidumusic://
百度视频	bdviphapp://
百度糯米	bainuo://
百度导航	bdNavi://
百度贴吧	com.baidu.tieba://
百度输入法	BaiduIMShop://
百度云	baiduyun://

腾讯

功能✨	URL
QQ	mqq://
QQ音乐	qqmusic://
QQ安全中心	qmtoken://
腾讯手机管家	mqqsecure://
QQ浏览器	mttbrowser://
腾讯企业邮箱	qqbizmailDistribute2://
腾讯视频	tenvideo://
腾讯新闻	qqnews://
腾讯微云	weiyun://
腾讯地图	sosomap://

网易

功能✨	URL
有道词典	yddictproapp://
网易公开课	ntesopen://
网易邮箱	neteasemail://
网易新闻	newsapp://
网易云音乐	orpheuswidget://
网易云播放已下载歌曲	orpheuswidget://download
网易云听歌识曲	orpheuswidget://recognize

银行

功能✨	URL
中国银行	BOCMBCIphone://
工商银行	com.icbc.iphoneclient://
农业银行	bankabc://
建设银行	wx2654d9155d70a468://
邮政银行	psbcmbank://
交通银行	wx862767be0919d45a://
招商银行	cmbmobilebank://
民生银行	com.cmbc.cn.iphone://
中信银行	citic://
浦发银行	wx1cb534bb13ba3dbd://
兴业银行	cibmb://
招商银行	cmbmobilebank://
广发银行	wb801126555://
光大银行	wxf505f9da589b9506://
华夏银行	com.hx.hxbank://
渤海银行	wxcc0b1c78c5bebdb5://
天津银行	wx1683cc7279171014://
恒丰银行	egbank://
浙商银行	wx105bde8d0d9f2372://
平安银行	paebqw://
江苏银行	jsbsjyh://
北京银行	wxb57101c34cb7773e://
上海银行	bankofshanghai://
河北银行	hebbank://
青岛银行	wxe63b95c397856088://
齐鲁银行	wx66b04eb340cefc57://
日照银行	sccba810://
莱商银行	sccba803://
潍坊银行	wx4df61036a188951c://
济宁银行	wx46071b807d2f473c://
东营银行	wb4216759672://
烟台银行	sccba816://
威海银行	wx14cd9621b76ffa2f://
枣庄银行	sccba808://
泰安银行	wb3819898473://
杭州银行	com.hzbank.hzbank.per://

社交

功能✨	URL
知乎	zhihu://
新浪微博	sinaweibo://
腾讯微博	TencentWeibo://
陌陌	momochat://
百度贴吧	com.baidu.tieba://
钉钉	dingtalk://

购物

功能✨	URL
淘宝	taobao://
京东	openApp.jdMobile://
苏宁易购	suning://
美团	imeituan://
1号店	yhd://
唯品会	vipshop://
大众点评	dianping://
天猫	tmall://

音频

功能✨	URL
抖音	douyin://
微视	weishiiosscheme://
微拍	wpweipai://
优酷	youku://
腾讯视频	tenvideo://
爱奇艺	iqiyi://
百度视频	bdviphapp://
土豆视频	tudou://
搜狐视频	sohuvideo://
哔哩哔哩	bilibili://
56视频	com.56Video://
暴风影音	com.baofeng.play://
虾米音乐	xiami://
酷我音乐	com.kuwo.kwmusic.kwmusicForKwsing://
酷狗音乐	kugouURL://
天天动听	ttpod://
QQ音乐	qqmusic://
网易云音乐	orpheuswidget://

工具

功能✨	URL
Chrome	googlechrome://
迅雷	thunder://
12306	cn.12306://
高德地图	iosamap://
百度地图	baidumap://
金山词霸	com.kingsoft.powerword.6://
印象笔记	evernote://
搜狗输入法	com.sogou.sogouinput://
WPS Office	KingsoftOfficeApp://
OfficeSuite	mobisystemsofficesuite://
PDF Expert 5	pdfexpert5presence://
扫描全能王	camscanner://

其他

功能✨	URL
掌阅iReader	iReader://
艺龙旅行	elongIPhone://
携程	CtripWireless://
58同城	wbmain://
Line	line://
1Password	onepassword://
Clear	clearapp://
Calendars 5	calendars://
GoodReader 4	com.goodreader.sendtogr://
Documents 5	rdocs://
nPlayer	nplayer-http://
GPlayer	gplayer://
AVPlayer HD	AVPlayerHD://
AVPlayer	AVPlayer://
Ace Player	aceplayer://

以上是关于iOS14 Widget小组件开发实践5——网络图片的加载的主要内容，如果未能解决你的问题，请参考以下文章

iOS14 Widget小组件开发(Widget Extension)

iOS Widget 小组件打开其他APP✨仿TopWidget快捷启动✨ 附常用URL schemes

iOS 14 小部件中的动画

iOS Widget小组件大小和位置(透明组件)