前言

最近一个月沉迷喜马拉雅无法自拔，听相声、段子、每日新闻，还有英语听力，摸鱼学习两不误。上班时候苦于没有桌面端，用网页版有些 bug，官方也不搞一个，只好自己动手了。样式参考了一下 Moon FM /t/555343，颜值还过得去，自我感觉挺好 ???

简介

Mob(モブ), 异能超能 100的男一号。

GitHub: zenghongtu/Mob

基于 Electron, Umi, Dva, Antd 构建

功能及 UI

目前实现的功能有这些：

• 一个基本的音乐播放器
• 每日必听
• 推荐
• 排行榜
• 分类
• 订阅
• 听过
• 下载声音
• 搜索专辑

技术选型

技术栈：

• Electron
• Umi
• Dva
• Antd

之所以选择 Umi 是因为在之前项目中研究过其部分源码，开发体验感不错，而且 bug 也少。 还有一个原因是我在找模板的过程中，看到这个大佬的模板wangtianlun/umi-electron-typescript，就直接拿来用了，大大减少了我搭建开发环境的时间，在此表示感谢~

如果你对 Umi 和 Dva 不熟，墙裂建议去学一下，分分钟就可以上手，而且开发效率要提高的不要太多。

开发篇

React Hooks 使用问题

在开发中，所有组件、页面都是使用 React Hooks 进行开发的。而让我觉得最难以琢磨的一个 hooks 非 useEffect 莫属。

// ...
useEffect(() => {ipcRenderer.on("HOTKEY", handleGlobalShortcut);ipcRenderer.on("DOWNLOAD", handleDownloadStatus);return () => {ipcRenderer.removeListener("HOTKEY", handleGlobalShortcut);ipcRenderer.removeListener("DOWNLOAD", handleDownloadStatus);};
}, [volume]);
// ...
const handleGlobalShortcut = (e, hotkey) => {switch (hotkey) {case "nextTrack":handleNext();break;case "prevTrack":handlePrev();break;case "volumeUp":const volumeUp = volume > 0.95 ? 1 : volume + 0.05;handleVolume(volumeUp * 100);break;case "volumeDown":const volumeDown = volume < 0.05 ? 0 : volume - 0.05;handleVolume(volumeDown * 100);break;case "changePlayState":handlePlayPause();break;default:break;}
};
// ...
复制代码

为了减少渲染次数，我会设置了第二参数为 [volume]，但这会导致一些出乎意料的情况，比如我触发了changePlayState，但却并没有得到意料中的值，这个时候设置为 [volume, playState] 就正常了。

原因很简单，因为playState不在依赖中，不会触发重新渲染

所以这条经验就是在使用 hook 遇到问题时，可以先试一下添加到`useEffect·中（如果有用到这个 hook 的话）

组件复用

先来看一下预览：

可以发现很多组件是相似的，如何提高他们的复用，这一个提高开发效率的途径。

在这个项目中我没有使用高阶组件，而是通过反正控制或者说是render props来进行复用，在组件的指定生命周期中进行调用。

共有三个组件在其他多个组件和页面中复用：

• 页面内容加载组件
• 专辑封面组件
• 专辑列表组件

页面内容加载组件如下：

export interface Content<T, R> {render: (result: Result) => React.ReactNode;genRequestList: (params?: R[]) => Array<Promise<T>>;rspHandler: (rspArr: any, lastResult?: any) => Result;params?: R[];
}export default function({params, // api 的请求参数genRequestList, // 负责返回 api 请求列表，返回值会被`Content`调用请求数据，返回值给`rspHandler`rspHandler, // 处理请求返回的`Response`值，返回值给`render`render //  负责渲染结果，将值传递给`render`函数中的组件
}: Content<any, any>) {const [loading, setLoading] = useState(true);const [hasError, setError] = useState(false);const [result, setResult] = useState(null);useEffect(() => {(async () => {try {setLoading(true);setError(false);const rspArr = await Promise.all(genRequestList(params));setResult(rspHandler(rspArr, result));} catch (e) {setError(true);} finally {setLoading(false);}})();}, [params]);return (<div className={styles.contentWrap}>{loading && !result ? (<div className={styles.loading}><Loading /></div>) : hasError ? (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />) : (render(result))}</div>);
}
复制代码

利用缓存提高体验度

对 axios 的 get 请求进行封装，对每个请求 url 生成唯一值，如果在白名单内，存入 session storage 中，默认过期时间是 3600s，在下次访问时，直接返回该值。

这样做的一个问题是无法获得最新数据，但对比体验感来说并不那么严重。

const request = ({ whitelist = [], expiry = DEFAULT_EXPIRY }) => ({...instance,get: async (url: string, config?: AxiosRequestConfig) => {if (config) {config.url = url;}const fingerprint = JSON.stringify(config || url);// 判断是否需要缓存const isNeedCache = !whitelist.length || whitelist.includes(url);// 生成唯一值const hashKey = hash.sha256().update(fingerprint).digest("hex");if (expiry !== 0) {const cached = sessionStorage.getItem(hashKey);const lastCachedTS: number = +sessionStorage.getItem(`${hashKey}:TS`);if (cached !== null && lastCachedTS !== null) {const age = (Date.now() - lastCachedTS) / 1000;// 如果没有过期，就直接返回该值if (age < expiry) {return JSON.parse(cached);}// 否则清除之前的旧值sessionStorage.removeItem(hashKey);sessionStorage.removeItem(`${hashKey}:TS`);}}const rsp = await instance.get(url, config);if (isNeedCache) {cacheRsp(rsp, hashKey);}return rsp;}
});export default request({ whitelist: [] });
复制代码

Flex justify-content: space-between 最后一行问题

在 flex 中设置justify-content: space-between后，在最后一行会出现让人不愉悦的情况。

对于这个问题，我的办法是通过计算然后填充空的div进去。

const DEFAULT_WIDTH = 130;
const DEFAULT_PAGE_COUNT = 130;
const DEFAULT_WINDOW_WIDTH = 1040;
export default function({siderWidth = SIDE_BAR_WIDTH,pageCount = DEFAULT_PAGE_COUNT,divWidth = DEFAULT_WIDTH
}) {const [fillCount, setFillCount] = useState(0);const handleResize = debounce(e => {let innerWidth: number;if (e) {innerWidth = e.target.innerWidth;}// 当前容器的宽度const containerWidth = innerWidth || DEFAULT_WINDOW_WIDTH - siderWidth;// 每一行可以放的个数const rowDivCount = Math.floor(containerWidth / divWidth);// 需要填充的个数const count = rowDivCount - (pageCount % rowDivCount);setFillCount(count);}, 100);useEffect(() => {handleResize();window.addEventListener("resize", handleResize);return () => {window.removeEventListener("resize", handleResize);};}, []);return (<>{fillCount? // 按照填充个数填进去Array.from({ length: fillCount }).map((_, idx) => {return (<divkey={idx}style={{ width: divWidth, height: 0 }}className={styles.filler}/>);}): null}</>);
}
复制代码

路由的前进与后退

在umi或者说是react-router中，也只有memory-router可以判断是否可以前进或者后退。

只能自己记录一下 index，然后进行判断。

let lastHistoryLen = 0;
const NavBar = ({ history, isLogin }) => {const { length, action } = history;const [curIndx, setCurIndx] = useState(0);const [suggests, setSuggests] = useState(null);const [text, setText] = useState('');const [visible, setVisible] = useState(false);useEffect(() => {// 判断最后历史记录的长度是否大于当前历史记录长度，如果是的话，把 index 归零if (lastHistoryLen > length) {setCurIndx(0);}lastHistoryLen = length;});const fetchSuggests = debounce(async (kw) => {if (!kw) {setSuggests(null);return;}const {data: { result },}: { data: SuggestRspData } = await getSuggest({ kw });let suggests = [...result.albumResultList, ...result.queryResultList];if (suggests.length < 1) {suggests = null;}// todo (only support albumResult now)setSuggests(suggests);}, 200);// ...const handleArrowClick = (n) => {return () => {setCurIndx(curIndx + n);router.go(n);};};复制代码

如何登录

本来想着分析一下登录接口，但是这么做的话，如果还要加上扫码登录，要花不少时间。

于是乎想到了使用 webview 嵌入登录页面，在登录后，如果打开了个人页面就说明登录成功了。

const TARGET_URL = "www.ximalaya.com/passport/sync_set";
const COOKIE_URL = "https://www.ximalaya.com";
const WebView = ({ onLoadedSession }) => {const [isLoading, setLoading] = useState(true);useEffect(() => {const webview = document.querySelector("#xmlyWebView") as HTMLElement;const handleDOMReady = e => {if (webview.getURL().includes(TARGET_URL)) {// todo fix prevent redirecte.preventDefault();const { session } = webview.getWebContents();onLoadedSession(session, COOKIE_URL);webview.reload();}};const handleLoadCommit = () => {setLoading(true);};const handleDidFinishLoad = () => {setLoading(false);};webview.addEventListener("dom-ready", handleDOMReady);webview.addEventListener("load-commit", handleLoadCommit);webview.addEventListener("did-finish-load", handleDidFinishLoad);return () => {webview.removeEventListener("dom-ready", handleDOMReady);webview.removeEventListener("load-commit", handleLoadCommit);webview.removeEventListener("did-finish-load", handleDidFinishLoad);};}, []);const props = {id: "xmlyWebView",useragent:// tslint:disable-next-line:max-line-length"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36",src: `https://${TARGET_URL}`,style: { widht: "750px", height: "600px" }};return (<div><Spin tip="Loading..." spinning={isLoading}><webview {...props} /></Spin></div>);
};
复制代码

最后

希望这篇文章能对你有所帮助。

下载与体验