[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…