通向荣誉的路上，并不铺满鲜花。

前言

用Java爬到我房间电表电量使用情况后，封装了一个接口，用于客户端的调用😝 在日常生活中，我用Mac的时间是最多的，如果将爬到的数据，展示在Mac的顶栏上，是一件很美好的事情😌 作为一个对Swift一无所知的我，花了两天时间，用Swift语言开发了一个Mac应用，接下来就跟大家分享下这个应用的开发过程，欢迎各为感兴趣的开发者阅读本文。

先跟大家看下最终实现的效果:

环境搭建

Swift: 4.2.1

Xcode: 10.1

MacOS: 10.14.2

库管理工具: Carthage

Alamofire: 4.0 (网络请求库)

SwiftyJSON: 3.0 (Json解析库)

创建项目

打开Xcode，我们看到的界面如图所示
- 左边为创建项目部分，右边为最近打开的项目
- 点击图中用红款勾选的地方
如图所示，按图中标明的序号，分别进行点击。
如图所示，分别填写项目相关信息
选择项目创建位置
出现如图所示的页面后，项目创建成功

配置项目为一个菜单栏应用

此时项目为一个空白项目，点运行后会出现一个空的window窗口，同时dock上出现应用图标，这并不是我们要的，所以要添加配置来移除他们。

如图所示，在info下添加添加一个配置项
Key选择Application is agent (UI Element),Value选择Yes
此时再次运行程序，我们发现dock栏已经不显示程序图标，但是window窗口依然在
根据图中所示，删除Window Controller Scene和View Controller Scene
此时，我们在云心应用程序，发现窗口也没了。

在菜单栏创建图标

如图所示,点击Assets.xcassets文件，新建一个Image Set
如图所示，将其命名为StatusIcon，将自己中意的图片制作成3种规格，托入对应的位置。
拖入图标后，执行图片中的步骤，让图标适配系统的黑暗模式
打开AppDelegate.swift文件，添加如下代码

    // 创建状态栏按钮
    let statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.squareLength)

    // applicationDidFinishLaunching生命周期
    if let button = statusItem.button {
         button.image = NSImage(named: "StatusIcon")
    }

运行程序，我们发现菜单栏有了我们刚才设置的图标，此时点击后什么都不会发生。

添加Popover容器

在项目目录下，新建一个Cocoa Class，命名为PopoverViewController,此文件为点击时打开的弹层页面
添加View Controller容器
如图所示，对上一步添加的容器进行修改
打开PopoverViewController.swift文件，在末尾添加如下代码

extension PopoverViewController {
    static func freshController() -> PopoverViewController {
        //获取对Main.storyboard的引用
        let storyboard = NSStoryboard(name: NSStoryboard.Name("Main"), bundle: nil)
        // 为PopoverViewController创建一个标识符
        let identifier = NSStoryboard.SceneIdentifier("PopoverViewController")
        // 实例化PopoverViewController并返回
        guard let viewcontroller = storyboard.instantiateController(withIdentifier: identifier) as? PopoverViewController else {
            fatalError("Something Wrong with Main.storyboard")
        }
        return viewcontroller
    }
}

打开AppDelegate.swift文件在class内添加如下代码

// 声明一个Popover
let popover = NSPopover()

创建显示/隐藏Popover的函数

在AppDelegate.swift文件的class内添加如下代码

    // 控制Popover状态
    @objc func togglePopover(_ sender: AnyObject) {
        if popover.isShown {
            closePopover(sender)
        } else {
            showPopover(sender)
        }
    }
    // 显示Popover
    @objc func showPopover(_ sender: AnyObject) {
        if let button = statusItem.button {
            popover.show(relativeTo: button.bounds, of: button, preferredEdge: NSRectEdge.minY)
        }
        
    }
    // 隐藏Popover
    @objc func closePopover(_ sender: AnyObject) {
        popover.performClose(sender)
    }

在AppDelegate.swift文件的applicationDidFinishLaunching函数中添加如下代码

    if let button = statusItem.button {
            button.image = NSImage(named: "StatusIcon")
            button.action = #selector(togglePopover(_:))
    }
    popover.contentViewController =            PopoverViewController.freshController()

此时，运行项目，点击菜单栏的应用图标，会显示弹层，再次点击弹层会消失

优化Popover

执行完上个步骤后，我们会发现弹层只会在点击时关闭或者消失，接下来我们来优化下，失去焦点时，也让它隐藏

新建一个EventMonitor.swift文件，用于事件监听,此文件代码如下

import Cocoa

public class EventMonitor {
    private var monitor: Any?
    private let mask: NSEvent.EventTypeMask
    private let handler: (NSEvent?) -> Void
    
    public init(mask: NSEvent.EventTypeMask, handler: @escaping (NSEvent?) -> Void) {
        self.mask = mask
        self.handler = handler
    }
    
    deinit {
        stop()
    }
    
    public func start() { //开启监视器
        monitor = NSEvent.addGlobalMonitorForEvents(matching: mask, handler: handler)
    }
    
    public func stop() { //关闭监视器
        if monitor != nil {
            NSEvent.removeMonitor(monitor!)
            monitor = nil
        }
    }
}

打开AppDelegate.swift在class中声明这个监视器

// 声明监视器
var eventMonitor: EventMonitor?

在applicationDidFinishLaunching函数中添加

eventMonitor = EventMonitor(mask: [.leftMouseDown, .rightMouseDown]) { [weak self] event in
  if let strongSelf = self, strongSelf.popover.isShown {
    strongSelf.closePopover(event!)
  }
}

修改showPopover和closePopover函数

    // 显示Popover
    @objc func showPopover(_ sender: AnyObject) {
        if let button = statusItem.button {
            popover.show(relativeTo: button.bounds, of: button, preferredEdge: NSRectEdge.minY)
        }
        eventMonitor?.start()
        
    }
    // 隐藏Popover
    @objc func closePopover(_ sender: AnyObject) {
        popover.performClose(sender)
        eventMonitor?.stop()
    }

运行项目，我们发现失去焦点后，弹层隐藏掉了。

添加右键菜单

如图所示，添加menu组件进来
将 Menu 与 AppDelegate.swift 建立联系
删除多余项，添加退出图标和条目
修改AppDelegate.swift文件，添加Handler来接管togglePopover

// 接管togglePopover
    @objc func mouseClickHandler() {
        if let event = NSApp.currentEvent {
            switch event.type {
            case .leftMouseUp:
                togglePopover(popover)
            default:
                statusItem.menu = Menu
                statusItem.button?.performClick(nil)
            }
        }
    }

statusItem.button添加如下代码

// 点击事件
 button.action = #selector(mouseClickHandler)
 button.sendAction(on: [.leftMouseUp, .rightMouseUp])

在AppDelegate.swift的末尾添加

extension AppDelegate: NSMenuDelegate {
    // 为了保证按钮的单击事件设置有效，menu要去除
    func menuDidClose(_ menu: NSMenu) {
        self.statusItem.menu = nil
    }
}

在applicationDidFinishLaunching内添加

// 修复按钮单击事件无效问题
Menu.delegate = self

此时右键，我们发现已成功添加

实现退出功能

如图所示，将推出函数关联至AppDelegate文件下
完善退出app函数

    // 关闭App
    @IBAction func Quit(_ sender: Any) {
        NSApplication.shared.terminate(self)
    }

再次运行后，右键，点击推出，即可关闭应用

编写Popover页面

执行完上述步骤后，我们创建了一个空的Popover,接下来我们往Popover添加内容，调用接口，显示我们房间电表电量使用情况。

布局页面

如图所示,添加Text Field和label组件，拖拽至PopoverViewController中，并与PopoverViewController.swift进行关联
调整拖出来的控件大小，搞成如图所示的样子

安装Cartfile库管理工具

Cartfile是一个优秀的库管理工具，相当于我们前端的npm。

点击Cartfile下载地址，进入Cartfile的github仓库的下载页面，选择pkg文件下载，然后安装。

安装网络请求库和Json解析库

Alamofire,为一个优秀的网络请求库，他封装了各种http请求。

SwiftyJSON,为一个优秀的json解析库

我们可以通过Cartfile来获取他们

在我们的项目根目录创建Cartfile文件，并添加如下内容

github "Alamofire/Alamofire" ~> 4.0
github "SwiftyJSON/SwiftyJSON" ~> 3.0

打开终端，进入到我们项目的根目录，执行如下命令

carthage update --platform macOS

执行完毕后，我们发现，项目的根目录下多了Carthage文件夹
此时我们打开，xcode，打开如图所示的页面
如图所示，选择我们刚才Carthage文件夹下的，build->Mac->framework文件
添加成功后，如图所示

开启网络访问

Xcode默认不允许http请求，按照如图所示的操作进行即可。

调用接口渲染页面

在PopoverViewController.swift文件中添加如下代码

import Cocoa
import Alamofire
import SwiftyJSON

class PopoverViewController: NSViewController {
    // 今日用电
    @IBOutlet weak var electricityToday: NSTextField!
    // 本月已用
    @IBOutlet weak var currentMonthBatteryTotal: NSTextField!
    // 剩余电量
    @IBOutlet weak var remainingBattery: NSTextField!
    // 统计时间
    @IBOutlet weak var time: NSTextField!

    private var timer: Timer?
    // 定时器记数: 每20分钟执行一次，3轮为1小时
    private var timeCount = 3
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 获取并设置页面数据
        setPageData()
        // 启动定时器
        loop()
    }
    
    // 获取并设置数据
    func setPageData(){
        // 发起post请求
        Alamofire.request("https://www.xxx.com",method: .post,parameters: ["userName":"xxx","password":"xxx"],encoding: JSONEncoding.default).responseJSON { (response) in
            switch response.result {
            // 请求成功
            case .success(let resData):
                // 将返回的数据转为JSON对象
                let jsonData = JSON.init(resData as Any)
                // 变量赋值
                self.electricityToday.stringValue = jsonData["data"]["electricityToday"].string!
                self.currentMonthBatteryTotal.stringValue = jsonData["data"]["currentMonthBatteryTotal"].string!
                self.remainingBattery.stringValue = jsonData["data"]["remainingBattery"].string!
                self.time.stringValue = jsonData["data"]["time"].string!
                break
            case .failure(let error):
                print("接口调用失败")
                print(error);
                break
            }
        }
    }
    
    // GCD 方式的定时器，循环
    func loop() {
        print("\(Date()): 定时器初始化")
        // timeInterval: 隔多少秒执行一次
        timer = Timer(timeInterval: 1200, repeats: true, block: { timer in
            self.loopFireHandler(timer)
        })
        // 添加定时器
        RunLoop.main.add(timer!, forMode: .common)
    }
    // 定时器需要执行的内容
    @objc private func loopFireHandler(_ timer: Timer?) -> Void {
        // 定时器执行结束结束
        if self.timeCount <= 0 {
            print("\(Date()): 执行完1轮，开始下一轮")
            self.timeCount = 3
            return
        }
        // 获取并设置页面数据
        setPageData()
        // 执行完分钟
        self.timeCount -= 1
      
    }

}


extension PopoverViewController {
    static func freshController() -> PopoverViewController {
        //获取对Main.storyboard的引用
        let storyboard = NSStoryboard(name: NSStoryboard.Name("Main"), bundle: nil)
        // 为PopoverViewController创建一个标识符
        let identifier = NSStoryboard.SceneIdentifier("PopoverViewController")
        // 实例化PopoverViewController并返回
        guard let viewcontroller = storyboard.instantiateController(withIdentifier: identifier) as? PopoverViewController else {
            fatalError("Something Wrong with Main.storyboard")
        }
        return viewcontroller
    }
}

写在最后

如何爬取你房间内电表使用情况，请移步这篇文章:Java爬取电表电量使用情况

参考文献: https://www.smslit.top/2018/06/29/macOS-dev-basic-NSPopover/

本篇文章对应的代码地址: home-battery-tool

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
本文首发于掘金，未经许可禁止转载💌