preface

How do our widgets interact with users? Not just a display bar?

This problem must be everyone in the process of development have encountered? Currently ios 14-Beta1 is tap-only, which means widgets can’t interact with gestures like scrolling.

However, the click here is slightly different from the click in our APP: it can only be operated by Link, not by click events

The Link can only be used to jump to your APP. If you want to use DeepLink, you must jump to your APP again.

If you haven’t read the previous article, it’s recommended to read the previous article:

[iOS14]WidgetKit Development Practice 1- Getting to know iOS widgets

[iOS14]WidgetKit Development Practice 2- Develop a simple widget

[iOS14]WidgetKit Development Practice 3- Widget user configuration

Project address: github.com/Littleor/iW…

Results show

Build payment widgets

How to create a payment widget to quickly wake up alipay and wechat scan and payment code?

This is where Link comes in, so let’s write the widget from scratch

1. Create a Widget

I’ve already written in detail how to create a Widget, so I won’t go over it here.

We will use the configurable content widget from the previous section directly as a backplane for modification

2. Modify the Provider

Here we are going to make a quick payment widget and change the timeline in the Provider to.never without updating it

The.never widget can still call API updates through WidgetCenter

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)
    }
}
Copy the code

SimpleEntry is:

struct SimpleEntry: TimelineEntry {
    public letDate: date // Remove configure after all, the quick payment widget has nothing to configure}Copy the code

3. Modify the View

View is one of the most important things we need to pay attention to. Both Link and widgetURL need to be configured with View. IconWidgetItem is a View that I have encapsulated. See iWidget for the complete code

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://")}}}Copy the code

IconWidgetItem code:

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 {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)
        }
        
    }
}
Copy the code

The Link in IconWidgetItem is the key point. If you configure the Link, the Widget will have the URL when it is clicked to jump to the APP.

But you can’t open the Link at this time. I’m opening up my APP.

4. Internal software jump

NavigationView onOpenURL NavigationView onOpenURL NavigationView onOpenURL NavigationView onOpenURL NavigationView onOpenURL

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

In this way, the Link of the Widget can be jumped through the APP.

Afterword.

This is the end of Widgetkit for iOS14. Widget development is simply about the Provider and View and a little bit of configuration.

Finally, if you find these articles useful, feel free to Star the Github project iWidget.

Personal blog: Sixming.com

Project address: github.com/Littleor/iW…