Electron开发一个小应用

标签：weather4 npm https Electron 开发应用 twoicon div op

保命声明：笔者在校属于中水平学生，代码能力有限，若行文中有错漏之处欢迎大家指出。
项目地址:https://gitee.com/qsbye/electron-app

Electron

作为一个跨平台的桌面应用开发框架，Electron 的迷人之处在于，它是建立在 Chromium 和 Node.js 之上的 —— 二位分工明确，一个负责界面，一个负责背后的逻辑. Electron 能开发跨平台的桌面应用.

安装Electron Fidder集成开发环境

[https://www.electronjs.org/zh/docs/latest/]
[https://www.electronjs.org/fiddle#downloads]

获取数据

获取天气数据

[https://blog.csdn.net/weixin_36018773/article/details/114052637]
[https://www.cnblogs.com/bianchengxia/p/9234037.html]
[https://blog.csdn.net/weixin_42339078/article/details/100150188]
[http://www.tianqihoubao.com/weather/top/guangzhou.html]
[https://www.cnblogs.com/ngz311616/p/9525045.html]

因为使用天气API有限制,所以直接从百度网页获取，例如百度搜索“天气”就会自动根据ip地址给出所在城市的天气预报，获取天气信息几乎是没有限制。

百度天气
[https://weathernew.pae.baidu.com/weathernew/pc?query=广东广州天气&srcid=4982]

选择器路径:

[id="\31 "] > div.op_weather4_twoicon_container_div > div.op_weather4_twoicon > a.op_weather4_twoicon_today.OP_LOG_LINK > div.op_weather4_twoicon_shishi > div.op_weather4_twoicon_shishi_info

实时温度

<!--数值-->
[id="\31 "] > div.op_weather4_twoicon_container_div > div.op_weather4_twoicon > a.op_weather4_twoicon_today.OP_LOG_LINK > div.op_weather4_twoicon_shishi > div.op_weather4_twoicon_shishi_info > span.op_weather4_twoicon_shishi_title
<!--单位-->
[id="\31 "] > div.op_weather4_twoicon_container_div > div.op_weather4_twoicon > a.op_weather4_twoicon_today.OP_LOG_LINK > div.op_weather4_twoicon_shishi > div.op_weather4_twoicon_shishi_info > span.op_weather4_twoicon_shishi_data > i.op_weather4_twoicon_shishi_sup

当日温度范围

[id="\31 "] > div.op_weather4_twoicon_container_div > div.op_weather4_twoicon > a.op_weather4_twoicon_today.OP_LOG_LINK > p.op_weather4_twoicon_temp

风向、风速

[id="\31 "] > div.op_weather4_twoicon_container_div > div.op_weather4_twoicon > a.op_weather4_twoicon_today.OP_LOG_LINK > p.op_weather4_twoicon_wind

空气质量

<!--数值-->
[id="\31 "] > div.op_weather4_twoicon_container_div > div.op_weather4_twoicon > a.op_weather4_twoicon_today.OP_LOG_LINK > div.op_weather4_twoicon_realtime_quality_wrap > span > span:nth-child(1)
<!--等级-->
[id="\31 "] > div.op_weather4_twoicon_container_div > div.op_weather4_twoicon > a.op_weather4_twoicon_today.OP_LOG_LINK > div.op_weather4_twoicon_realtime_quality_wrap > span > span.op_weather4_twoicon_aqi_text_today

天气

<!--实时天气-->
[id="\31 "] > div.op_weather4_twoicon_container_div > div.op_weather4_twoicon > a.op_weather4_twoicon_today.OP_LOG_LINK > div.op_weather4_twoicon_shishi > div.op_weather4_twoicon_shishi_info > span.op_weather4_twoicon_shishi_data > i.op_weather4_twoicon_shishi_sub
<!--当日天气-->
[id="\31 "] > div.op_weather4_twoicon_container_div > div.op_weather4_twoicon > a.op_weather4_twoicon_today.OP_LOG_LINK > p.op_weather4_twoicon_weath

当日公历、农历

[id="\31 "] > div.op_weather4_twoicon_container_div > div.op_weather4_twoicon > a.op_weather4_twoicon_today.OP_LOG_LINK > p.op_weather4_twoicon_date

使用墨迹天气

npm install request --save // http请求库
npm install cheerio --save // 分析html工具
npm install express --save // nodejs web框架

脚本:

const request = require("request")
const cheerio = require("cheerio")
const weatherURL = 'https://tianqi.moji.com/weather/china/Guangdong/guangzhou'

// 获取墨迹天气提示信息
function getWeatherTips(url) {
    return new Promise((resolve,reject)=>{
    	request(weatherURL,(error,res,body)=>{
    	  if (!error) {
    	    let html = res.body || "";
    		let $ =cheerio.load(html)
    		let temp = $('.wea_weather em').text().trim()+'℃'
    		let desc = $('.wea_weather b').text().trim()
    		let water = $('.wea_about span').text().trim()
    		let win = $('.wea_about em').text().trim()
    		let tips = $('.wea_tips em').text().trim()
    		let words=`今日${city}天气\n${desc}\n温度：${temp}\n湿度：${water}\n风力：${win}\n${tips}`
    		resolve(words)
    	} else {
    		reject(error)
    	}      
      })
   })   
}

获取网速

[https://segmentfault.com/a/1190000040771061?sort=newest]

一言

这里不用API方式，而是用网页获取方式
网址[https://hitokoto.cn]

<!--文本-->
#hitokoto_text
<!--出处-->
#hitokoto_author

毒鸡汤

https://www.lioncp.cn/du.php

#text

每日一图

[https://zhuanlan.zhihu.com/p/136867451]
[https://wallhaven.cc/help/api]

<div style="background-image: url(http://tool.liumingye.cn/bingimg/img.php);"></div>
<img src="http://tool.liumingye.cn/bingimg/img.php" />
http://tool.liumingye.cn/bingimg/img.php

生成网页截图

[http://wenku.kuryun.com/docs/phantomjs/screencapture.html]

npm install --global phantomjs #无头浏览器
npm install --global pageres-cli

开始

[https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-first-app]

初始化npm项目

mkdir my-electron-app && cd my-electron-app
npm init

初始化后会生成package.json，存储项目配置
程序的入口点为main.js

在 package.json 中指定的脚本文件 main 是所有 Electron 应用的入口点。这个文件控制主程序 (main process)，它运行>在 Node.js 环境里，负责控制您应用的生命周期、显示原生界面、执行特殊操作并管理渲染器进程 (renderer processes)

打包后的应用本身会包含 Electron 的二进制文件,但是开发环境需要安装electron

npm install electron --save-dev

安装需要喝一杯奶茶的时间（本土化一点，歪果仁喝一杯咖啡的时间

标签：weather4,npm,https,Electron,开发,应用,twoicon,div,op
From： https://www.cnblogs.com/qsbye/p/16754094.html