【iOS14】仿网易云桌面小组件（二）

上一篇文章【iOS14】仿网易云桌面小组件（一）介绍了如果创建小组件，并使用SwiftUI简单实现了网易云小组件的界面，本篇将从网络请求，图片同步，动态数据展示等方面来对小组件进行优化。

通过本篇文章你将学到以下几点
1、SwiftUI中的网络请求，图片同步下载
2、动态刷新小组件
3、小组件中参数传递，绑定数据，实现如下效果

小组件

SwiftUI中的网络请求，图片同步下载

首先我们根据内容先来定义数据模型

struct GKWYData {
    let title: String   // 标题
    let desc: String    // 描述
    let icon: String    // 图标名称
    let bg: String      // 背景图片名称
    var bgImage: UIImage? = UIImage(named: "background") // 背景图片对象
}

// 创建默认数据
let defaultData = GKWYData(title: "每日音乐推荐", desc: "为你带来每日惊喜", icon: "cm4_disc_type_list", bg: "leida_bg")

我们创建一个类GKWYDataLoader，然后定义静态方法获取每日音乐推荐，代码如下：

struct GKWYDataLoader {
    /// 请求推荐内容
    /// - Parameter completion: 请求完成回调
    static func request(completion: @escaping (GKWYData) -> Void) {
        // 热门音乐列表接口，成功后用随机设置一个音乐为推荐音乐
        // 如果获取不到则使用默认数据，保证不能为空
        let url = URL(string: "https://musicapi.qianqian.com/v1/restserver/ting?format=json&from=ios&channel=appstore&method=baidu.ting.billboard.billList&type=1&size=20&offset=0")!
        let request = URLRequest(url: url)
        
        URLSession.shared.dataTask(with: request) { (data, response, error) in
            if data != nil && error == nil {
                let json = try! JSONSerialization.jsonObject(with: data!, options: []) as! [String: Any]
                let error_code = json["error_code"] as! Int
                if error_code == 22000 {
                    if let list = (json["song_list"] as? [[String: Any]]) {
                        // 获取随机数
                        let random = arc4random() % UInt32(list.count)
                        let item = list[Int(random)]
                        
                        let title = item["title"] as! String
                        let author = item["author"] as! String
                        let album = item["album_title"] as! String
                        let desc = author + "-" + album
                        let cover = item["pic_radio"] as! String
                        
                        var image: UIImage? = UIImage(named: "background")
                        // 同步网络图片到本地
                        if let data = try? Data(contentsOf: URL(string: cover)!) {
                            image = UIImage(data: data)
                        }
                        
                        let wyData = GKWYData(title: title, desc: desc, icon: "cm4_disc_type_list", bg: "", bgImage: image)
                        completion(wyData)
                    }else {
                        completion(defaultData)
                    }
                }else {
                    completion(defaultData)
                }
            }else {
                completion(defaultData)
            }
        }.resume()
    }
}

2、动态刷新小组件

给SimpleEntry增加数据模型

struct SimpleEntry: TimelineEntry {
    let date: Date
    let data: GKWYData
}

修改Provider里面的getTimeline方法如下，每隔5分钟刷新一次数据

func getTimeline(in context: Context, completion: @escaping (Timeline) -> ()) {
        let currentDate = Date()
        let updateDate = Calendar.current.date(byAdding: .minute, value: 5, to: currentDate)
        
        GKWYDataLoader.request { (data) in
            let entry = SimpleEntry(date: currentDate, data: data)
            let timeline = Timeline(entries: [entry], policy: .after(updateDate!))
            completion(timeline)
        }
    }

3、小组件中参数传递，绑定数据

在GKWYWidgetView中增加数据模型，并绑定数据

struct GKWYWidgetView: View {
    let data: GKWYData
    
    var body: some View {
        GeometryReader { geo in
            ZStack(alignment: .bottomLeading) {
                // 添加背景图
                Image(uiImage: data.bgImage!)
                    .resizable()
                // 添加阴影
                LinearGradient(gradient: Gradient(colors: [Color.black.opacity(0.15), Color.black.opacity(0.35)]), startPoint: .top, endPoint: .bottom)
                // 添加logo
                Image("cm2_clock_logo")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 20, height: 20)
                    .position(x: geo.size.width - (20/2) - 10, y: (20/2) + 10)
                    .ignoresSafeArea(.all)
                // 添加左下角的图标及文字
                VStack(alignment: .leading, spacing: 5) {
                    HStack() {
                        Image(data.icon)
                            .resizable()
                            .frame(width: 20, height: 20)
                        Text(data.title)
                            .font(.system(size: 16))
                            .foregroundColor(.white)
                    }
                    
                    Text(data.desc)
                        .font(.system(size: 14))
                        .foregroundColor(.white)
                }.padding()
            }
        }
    }
}

修改GKWYWidgetEntryView并传递数据

struct GKWYWidget2EntryView : View {
    var entry: Provider.Entry

    var body: some View {
        GKWYWidgetView(data: entry.data)
    }
}

然后运行小组件，就可以看到下面的效果

动态小组件

至此，小组件中动态显示网络数据就已经完成。

最后

本篇文章我们学到了从网络请求数据并在小组件中动态显示，接下来将会介绍给小组件增加可编辑功能
---敬请期待

参考资料

iOS14 Widget小组件开发实践2——自定义Widget
网易云音乐 iOS 14 小组件实战手册