开始开发 Dashboard Widgets，第四章，读书笔记

最新推荐文章于 2023-11-28 13:33:48 发布

wide288

最新推荐文章于 2023-11-28 13:33:48 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Mac OS X

本文链接：https://blog.csdn.net/wide288/article/details/40340923

Mac OS X 同时被 2 个专栏收录

126 篇文章

订阅专栏

Apple Dashboard Widget

10 篇文章

订阅专栏

本文介绍了一个天气地图Widget的开发过程，包括如何定义Widget特性、利用HTML/CSS搭建基本结构及使用JavaScript实现交互功能。此外还提供了创建Info.plist文件及设置项目图标的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录：http://blog.csdn.net/wide288/article/details/40298693

怎么开始开发基础的 widget

怎么使用 HTML 和 CSS 取得 widget 的形状
怎么使用 javascript 到你的 widget

从 html 开始
这里的项目是个天气地图。每个项目开始的点不一样，不过要先列出此 widget 的特性。
特性列表：
它应该有地图雷达，显示一块区域。
它应该有当前的临时地图。
它应该有昨天的临时地图。
它应该有明天的临时地图。

地图是可以调整大小的。

添加背景
<img src=”Default.png”>

创建 widget 结构的 CSS
body {
margin: 0;
}
#mapImage {
position: absolute;
top: 55px;
left: 16px;
}
.backgroundImage {
position: absolute;
top: 0px;
left: 0px;
}

引用方式
<style type=”text/css”>
@import “weathermaps.css”;
</style>

添加菜单

它怎么工作
用 JS 写 onclick 事件响应。改变图片引用内容。

建立 widget
创建 Info.plist

<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE plist PUBLIC “-//Apple Computer//DTD PLIST 1.0//EN”
“http://www.apple.com/DTDs/PropertyList-1.0.dtd”>
<plist version=”1.0”>
<dict>
<key>AllowNetworkAccess</key>
<true/>
<key>CFBundleDisplayName</key>
<string>WeatherMaps</string>
<key>CFBundleIdentifier</key>
<string>com.apple.widget.weathermaps</string>
<key>CFBundleName</key>
<string>WeatherMaps</string>
<key>CFBundleShortVersionString</key>
<string>.04</string>
<key>CFBundleVersion</key>
<string>.04</string>
<key>CloseBoxInsetX</key>
<integer>12</integer>
<key>CloseBoxInsetY</key>
<integer>12</integer>
<key>MainHTML</key>
<string>weathermaps.html</string>
</dict>
</plist>

创建项目的图标
Icon.png

改文件夹名称
双击安装。
确认它是工作的，安装后测试一下。