利用electron.js 把 手机App “每日一文” PC端化

本文是使用了Electron.js 构建一个 Pc端 的 “每日一文”
不把UI都复刻过来，只是把功能相应地实现一下。

DEMO介绍

1. 应用跟手机端的“每日一文”差不多，其实这APP也是用了它的API接口

2. 实现了的功能：
   2.1 打开程序自动获取一篇文章，以及获取到其作者信息（信息来源于百度百科）
   2.2 可以保存喜欢的文章到本地（/saveArticles）
   2.3 可以手动获取随机一篇文章

3. 未完成 ：
   长按保存按钮进行文章另存为的操作

效果图

文章一览.png

作者.png

功能按钮.png

实现

用到的轮子有：

1. Button.css - 一个高度可定制的、免费并且开源的按钮 CSS 样式库
   
   

   Button.css.png

2. font-awesome -The iconic font and CSS toolkit

3. jQuery

因为就一个单页面应用，我也就不把style另外拎出来了（虽然不利于后期重构和维护），但对于一个一两百行的小DEMO而言，我就懒一点了。
为了能看清楚代码结构，我就把index.html部分抽出来贴吧：

index.html - 部分

index.html -style 样式

index.html - 页面脉络结构

  ...
  
    


    


      

      

      
正在获取中...
      

      
      

      
      
      
      

      
    


    

      

        
      
      

      

      


    
  

  

renderer.js

//module import

const ipc = require('electron').ipcRenderer;

var cheerio = require('cheerio'),
    superagent = require('superagent'),
    fs = require('fs'),
    path = require('path')
;
var result_list=$("#DailyArticle"),
    articleTitle=$(".articleTitle")[0],
    articleContent=$('.articleContent')[0],
    articleFooter=$('.articleFooter')[0],

    authorAvatar=$('.authorAvatar')[0],
    authorAvatarImg=$('.authorAvatar-img')[0],
    authorName=$('.authorName')[0],
    authorDes=$('.authorDes')[0]
;

//随机获取一篇文章
function getRandomArticle(){
    superagent
        .get('https://interface.meiriyiwen.com/article/random?dev=1')
        .end(function (err, sres) {
          if (err) throw err;

          //获取文章的标题、内容、作者
          let dailyArticle=eval("text="+sres.text);
          console.log(dailyArticle);
          articleTitle.innerHTML=dailyArticle.data.title;
          articleContent.innerHTML=dailyArticle.data.content;
          articleFooter.innerHTML=dailyArticle.data.author;


          //将作者的名字传入百度百科API获取更多作者信息
          let search_author=articleFooter.innerText;

          //获取作者信息
          //
          getAuthorInfo(search_author);

        });
}

//获取作者信息
function getAuthorInfo(search_author) {
    superagent.get("http://baike.baidu.com/api/openapi/BaikeLemmaCardApi")
          .query({
            scope:103,
            format:'json',
            appid:379020,
            bk_key:search_author,
            // bk_key:'让·季奥诺',  //test err: {}
            bk_length:600
          })
          .end(function(err,authorres){
            console.log(authorres);
            console.log(authorres.text);
            //若没有找到作者，返回错误信息
            let errApiInfo={"errno":2}
            if(authorres.text=="{}"){
                authorName.innerText=search_author;
                authorDes.innerText="未找到此作者相关信息";
                return false;
            }
            else if (authorres.text=='{"errno":2}') {
                authorName.innerText=search_author;
                authorDes.innerText="未找到此作者相关信息";
                return false;
            }
            else{

                //将JSON字符串转为对象
                var authorInfo=eval("text="+authorres.text);
                // console.log(authorInfo);

                //为图片框设置属性
                $('.authorAvatar-img').attr({
                    src:authorInfo.image,
                    alt:authorInfo.title
                });

                //将作者相关信息填充到DOM中
                authorName.innerText=authorInfo.title;
                authorDes.innerText=authorInfo.abstract;
            }
          });
}

//页面加载时获取文章
getRandomArticle();


//按键监听
//
//按钮：更换文章
$('#btn_getRandomArticle').on('click',function(){
    getRandomArticle()

    //回到顶部
    var speed=200;
    $('body,html ').animate({scrollTop:0},speed);
    return false;
});


//按钮：保存文章到 ../saveArticles/ 文件夹下
$('#btn_save').on("click",function(event){
    upLevelPath=path.resolve(__dirname,"..")
    saveArticlesPath=path.join(upLevelPath,"saveArticles/"+articleTitle.innerText+".txt");

    fs.exists(saveArticlesPath,function(exists){
            if(exists){
                console.log("文件已存在");
                $('#text_saved').text("文件已存在于:"+saveArticlesPath);

                return false;
            }else{
                fs.writeFile(saveArticlesPath,articleContent.innerText+articleFooter.innerText,function(err){
                    if(!err)
                        console.log("保存成功");
                        $('#text_saved').text("文本保存于:"+saveArticlesPath);
                    }
                )
            }
        }
    );
    
    console.log("save");
});

//长按进行文章另存为的操作-未完成
var timeout;
$('#btn_save').on("mousedown",function(){
    timeout=setTimeout(function(){
        ipc.send('save-dialog');
        console.log("long click");
    },1000);
});
$('#btn_save').on("mouseup",function(){
    clearTimeout(timeout);

})


ipc.on('saved-fileDirectory', function (event, path) {
  if (!path) path = '无路径';
  $('#text_saved').innerHTML = `选择的路径: ${path}`
})


//刷新按钮：重新获取作者信息

$('#btn_refresh').on("click",function(){
    getAuthorInfo(articleFooter.innerText);
});

在main.js里面添加上 "打开保存文件对话框的" 监听

//保存文章的监听
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog

ipc.on('save-dialog', function (event) {
  defaultPath_url=url.format({
    pathname: path.join(__dirname, 'saveArticles/'),
    protocol: 'file:',
    slashes: true
  })
  const options = {
    title: '保存文本到',
    defaultPath:defaultPath_url,
    filters:[
      {name:'文本文件', extensions:['txt']}
    ]
  }

参考资料：

Electron-中文文档，API