前语

怎么让咱们的Widget和用户交互？而不仅仅是一个展现栏？

这个问题想必咱们开发的进程中都遇到过吧？现在iOS14-beta1是只支持点击（tap）操作的，也就是说Widget无法运用翻滚等手势来完成交互的。

可是这儿的点击和咱们APP里边的点击还略有不同： 只能通过Link来操作,不能运用点击事件来操作

一起这儿的Link还和_ y 4 – [ Y 9 |软件内的Link不同，这儿的Link只能用于跳转到自己APP内，假如需要运用DeepLink等就必须要在软件内再次跳转。

假如你没有看过前面的文r r ~ 8 } 3 ( P章建议先阅读前面的文章:

[iOS14]WidgetKit开发实战1-初识iOS小部件

[iOS14]WidgetKit开发实战2-开发一言小部件

[iOS14]WidgetKit开发实{ ~ J 7战3-小部件用户装备

项目地址：F @ 2 B 2 – M i Rgithm l ! H # t K ub.com/Littleor/iW…

效果展 r 0 Q y H w X z现

打造付出小部件

怎么打造一款付出小部件用来快速J ! 8唤醒付出宝和微信的扫一扫和付款码？

这儿就需要用到Link了，下面让咱们从零开始写小部件

1.创立Widget

前面现已具体写了怎么创立一个Widget，这儿就不再赘述。

咱们这儿直接运用上一节的可装备的内! w g W 8 5容小部件来作为底板修正

2.修正Provider

这儿咱们要做的是一款方便付出小部件，无需更新故把Provm A 4 A lidG 2 C i jer中的timeli1 | 3 3ne改为.never

.never的小部件仍然能够通过k w d , y T bWidgetCenter调用API更新

struct PayToolsProvider: In9 ` s / ^ P O e @tentTimelineProvider {
typealias Entry = SimpleEntry
public func snapshot(for configuration: ConfigurationIntent, with context: Context, completion: @escI n B | eaping (SimpleEntry) -> ()) {
l{ q t d Net entry = Simplel d Q 6 ^ t hEntry(date: Date())
completion(entry)
}
public func timeline(for configuration: ConfigurationIntent, with context: Conte_ 2 J * j xt, completion: @escaping (Timeline<Entry>) -> ()) {
let currentDate = Date()
let entry = SimpR i # a U % oleEntry(date: curro L T p F A _entDate)
let timeline = Timeline(entries: [entry], policy: .} ~ { &neverZ 7 S b 5)
compl2 J  &etion(timelin[ a o M U A -e)
}
}

其间的SimpleEn` { u !try为:

struct SimpleEntry: TimelineEntry {
public let date: Date
//去除了configure毕竟方便付出小部件没啥能够装备的
}

3.修正View

View是咱们需要留意的重点，无论是Link仍是widgetURL都需要通过View来装备
这儿咱们直接先贴代码。其间的IconWidgetItem为我封装的一个View，完整代码详见z y Q 8 P I = y WiWidget

struct PayToolsMediumView: View {
var body: some View {
HStack(spacing: 3.0) {
IconWidgetItem(icon:"l l gqrcode",bottomIcon: "alipay",size: 70)
Icon/ ) 1 6WidgetItem(icon: "pay",bottomIcon: "alipay",size: 70,url: "alipay://platformapi/startapp?appId=20000056")
.padding([.topZ s P g, .leading, .bottom])
IconWidgetItem(icon: "qrcode A N d",bottomIcon: "wecp r g I 9hat",size: 70, url: "w: J 5 m G Feixin:/P e & 2 $ A/scanqrcode")
.padding(.all)
IconWidgetIt. ? Z O T I hem(icon: "pay",bottomIcon: "wechat",siz$ - / & ne: 70, url: "weixin://")
}
}2 y $ } ` Q
}

其间IconWidgetItem代码：

struct IconWidgetItem:VieW W Z w {H f } 6 e r B ~
var icon:String = "q. p `rcode"
var bottomIcon:String = "alipay"
var size: CGFloat = 60
var url: String  = "o : J 0 e 7 F U talipayqr://platformapi/startapp?saId=10000007"
v} z N 5 _ [ Xar body:k B 7 % [ t e v some View {
//这儿的Link是要害
Link(destination: URL(string: url)!)= = ( z 0 {
ZStack {
ZStack {
Image(icon)
.resizable()
.aspectRatio(contentMode: .fit)
}
.frame(width: size, height: size, alignb m k Iment: .center)
.zIndex(1)
HStack() {E ~ |
Spacer()
VStack {
Spacer()
HStack {
Image(bottomIcon)
.resizable()
.aspectRatio(contentMode: .fit)
.opacity(1)
}
.frame(width: size/3, height: size/3, alignment: .center)
.Z i Z z Tbackground(Color.white)
.cornerRadius(size/6)
.shadow(radius: 1)
}
}
.zIndex(2)
}.frame(width: size, height: size, alignment: .center)
}
}
}

IconWidgetItem中的Link是要害点，装备了Link就能够让Widget点击后跳转APP的时分带上URL。

可是这个时分是不能点+ O (击翻开这个Link的。而是翻开了APP。

4.软件内部跳转

因为Widget无法直接翻开Link，所以咱们只能退而求其次，这儿我选用的是运用NavigatiG g s S t @ jonVi0 N *ew的ob o M k W H v 6nOpenURL方法来完成跳转，假如有更好的方法欢迎留言或提交PR！

    NavigationView{
//...View
}
.onOpenURL(perform: { (url) in
UIApplication.shared.open(url)
})

如此即可完成Widget的Link通过APP跳转。

后记

i! e z 5 – # tOS14供给的Widgetkit大约内容也就到这儿结束了，Widget开发往简单来说需要做的无非是Provider和View和一点装备，装备好Provider和View我相信你也能够做出优雅的小V 0 M ?部件！

最终假如你认为这些文章对你有用，欢迎给该Github项目iWidget点个Star。

个人博客： sixming.com

项目地址：github.com/Littleor/iW…