本实例简练地介绍了如何新增一个业务内容。
业务需求：显示当前日期和时间；显示距离放学还有多久时间？
先看项目效果图：
01 自定义功能区
在ribbon.xml中添加一个<button/>标签，即在功能区添加button按钮，名称是“时间提醒”，绑定了点击事件用于执行OnAction，并通过getImage获取该按钮的图标。
<button id="time" label="时间提醒" onAction="OnAction" getEnabled="OnGetEnabled" getImage="GetImage" visible="true" size="large"/>自定义功能区多出来一个“效率符号”区域，菜单里新增了一个“时间提醒”Button。
02 在main.js中引入接口函数
增加一行代码，引入time.js文件。
document.write("<script language='javascript' src='js/time.js'></script>");03 配置ribbon.js
1.在OnAction函数中创建time.html页面，须同步在ui目录下创建time.html文件。
case "time":
{
let tsId1 = wps.PluginStorage.getItem("taskpane_id1")
if (!tsId1) {
let tskpane1 = wps.CreateTaskPane(GetUrlPath() + "/ui/time.html")
let id1 = tskpane1.ID
wps.PluginStorage.setItem("taskpane_id1", id1)
tskpane1.Visible = true
} else {
let tskpane1 = wps.GetTaskPane(tsId1)
tskpane1.Visible = !tskpane1.Visible
}
}
break;2.在GetImage函数中配置button图标的路径。
case "time":
return "images/time.svg"04 配置html+css+js实现
html页面：是根据第三步ribbon.js页面的OnAction函数来配置的，即在ui文件夹下面新建一个time.html页面，用三个<div></div>标签存放三块内容。
css文件配置：在css文件夹下面新增time.css文件，配置网页的样式。
js配置：在js文件夹下面新增time.js，实现业务逻辑。
