1. 概述
1.1 問題描述
HTML顯示天氣預報 中方法雖可以實現，但不夠靈活，樣式不夠美觀。如果要在報表上插入好看的天氣預報模塊,要如何實現呢? 如下圖所示：
1.2 解決思路
參考：中國天氣-天氣插件平台 ,找到喜歡的天氣樣式，引入 JS 和 CSS 即可。
2. 示例
2.1 準備插件
1）前往 中國天氣-天氣插件平台 注冊 、登錄。如下圖所示：
2）點擊「創建插件 > 創建網頁簡約插件」，創建插件。如下圖所示：
3）在「創建網頁簡約天氣插件」頁面，設置插件樣式，如下圖所示：
4）樣式設置成功後，點擊「生成代碼」，如下圖所示：
2.2 制作模板
新建模板，選取一個單元格 ，在單元格中添加一個 div，内容如下：
<div id="weather-v2-plugin-simple"></div>
将單元格顯示方式設置爲「用HTML顯示内容」，如下圖所示：
如果是決策報表，在決策報表中添加報表塊 ，在報表塊單元格中添加一個 div，内容如下：
<div id="weather-v2-plugin-simple"></div>
2.3 添加事件
點擊菜單欄「模板>模板Web屬性>分頁預覽設置」，選擇「爲該模板單獨設置」，添加一個「加載結束」事件：如下圖所示：
事件内容爲 2.1 節中生成的代碼。
JavaScript 代碼如下：
$(function() {
$.getScript("https://apip.weatherdt.com/simple/static/js/weather-simple-common.js?v=2.0");
WIDGET = {
CONFIG: {
"modules": "01234",
"background": 1,
"tmpColor": "FFFFFF",
"tmpSize": 16,
"cityColor": "FFFFFF",
"citySize": 16,
"aqiSize": 16,
"weatherIconSize": 24,
"alertIconSize": 18,
"padding": "10px 10px 10px 10px",
"shadow": "1",
"language": "auto",
"borderRadius": 5,
"fixed": "false",
"vertical": "middle",
"horizontal": "center",
"key": "lkBcLQsEtT"
}
}
})
報表塊中事件添加在報表塊「初始化」事件中。
2.4 效果預覽
保存模板，點擊「分頁預覽」，效果如下圖所示：
決策報表中效果如下圖所示：
注：不支持移動端。
3. 模板下載
點擊下載模板：天氣插件.cpt
4. 注意事項
登錄「天氣插件平台 > 登錄賬戶 > 點擊用戶名 > 用戶中心 」，可以查看插件運行狀态。如下圖所示：
在「網頁插件」處 就能看到自己創建插件的運行狀态。如下圖所示：
