[iOS14]WidgetKit开发实战4-Link-支付小部件

前言

如何让咱们的Widget和用户交互？而不单单是一个展现栏？

这个问题想必你们开发的过程当中都遇到过吧？目前iOS14-beta1是只支持点击（tap）操做的，也就是说Widget没法使用滚动等手势来完成交互的。

可是这里的点击和咱们APP里面的点击还略有不一样： 只能经过Link来操做,不能使用点击事件来操做

同时这里的Link还和软件内的Link不一样，这里的Link只能用于跳转到本身APP内，若是须要使用DeepLink等就必需要在软件内再次跳转。

若是你没有看过前面的文章建议先阅读前面的文章:

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

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

[iOS14]WidgetKit开发实战3-小部件用户配置

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

效果展现

打造支付小部件

如何打造一款支付小部件用来快速唤醒支付宝和微信的扫一扫和付款码？

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

1.建立Widget

前面已经详细写了如何建立一个Widget，这里就再也不赘述。

咱们这里直接使用上一节的可配置的内容小部件来做为底板修改

2.修改Provider

这里咱们要作的是一款快捷支付小部件，无需更新故把Provider中的timeline改成.never

.never的小部件仍然能够经过WidgetCenter调用API更新

struct PayToolsProvider: IntentTimelineProvider {
    typealias Entry = SimpleEntry
    public func snapshot(for configuration: ConfigurationIntent, with context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date())
        completion(entry)
    }
    
    public func timeline(for configuration: ConfigurationIntent, with context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        let currentDate = Date()
        let entry = SimpleEntry(date: currentDate)
        let timeline = Timeline(entries: [entry], policy: .never)
        completion(timeline)
    }
}
复制代码

其中的SimpleEntry为:

struct SimpleEntry: TimelineEntry {
    public let date: Date
    //去除了configure毕竟快捷支付小部件没啥能够配置的
}
复制代码

3.修改View

View是咱们须要注意的重点，不管是Link仍是widgetURL都须要经过View来配置 这里咱们直接先贴代码。其中的IconWidgetItem为我封装的一个View，完整代码详见iWidget

struct PayToolsMediumView: View {
    var body: some View {
        HStack(spacing: 3.0) {
            IconWidgetItem(icon:"qrcode",bottomIcon: "alipay",size: 70)
            IconWidgetItem(icon: "pay",bottomIcon: "alipay",size: 70,url: "alipay://platformapi/startapp?appId=20000056")
                .padding([.top, .leading, .bottom])
            IconWidgetItem(icon: "qrcode",bottomIcon: "wechat",size: 70, url: "weixin://scanqrcode")
                .padding(.all)
            IconWidgetItem(icon: "pay",bottomIcon: "wechat",size: 70, url: "weixin://")
        }
    }
}
复制代码

其中IconWidgetItem代码：

struct IconWidgetItem:View {
    var icon:String = "qrcode"
    var bottomIcon:String = "alipay"
    var size: CGFloat = 60
    var url: String  = "alipayqr://platformapi/startapp?saId=10000007"
    var body: some View {
    //这里的Link是关键
        Link(destination: URL(string: url)!) {
            ZStack {
                ZStack {
                    Image(icon)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                }
                .frame(width: size, height: size, alignment: .center)
                .zIndex(1)
                HStack() {
                    Spacer()
                    VStack {
                        Spacer()
                        HStack {
                            Image(bottomIcon)
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .opacity(1)
                            
                        }
                        .frame(width: size/3, height: size/3, alignment: .center)
                        .background(Color.white)
                        .cornerRadius(size/6)
                        .shadow(radius: 1)
                    }
                    
                }
                .zIndex(2)
            }.frame(width: size, height: size, alignment: .center)
        }
        
    }
}
复制代码

IconWidgetItem中的Link是关键点，配置了Link就可让Widget点击后跳转APP的时候带上URL。

可是这个时候是不能点击打开这个Link的。而是打开了APP。

4.软件内部跳转

由于Widget没法直接打开Link，因此咱们只能退而求其次，这里我采用的是使用NavigationView的onOpenURL方法来实现跳转，若是有更好的方法欢迎留言或提交PR！

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

如此便可实现Widget的Link经过APP跳转。

后记

iOS14提供的Widgetkit大概内容也就到这里结束了，Widget开发往简单来讲须要作的无非是Provider和View和一点配置，配置好Provider和View我相信你也能够作出优雅的小部件！

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

我的博客： sixming.com

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