方块日历

大过年的水一篇。

这是 5 年前的一个问题:利用四个骰子组合出一年 12 个月共 365 天。虽然当时已经有解了,就是题图的这四个方块,但毕竟是想通过自己思路来解决。

一开始想的笨办法,穷举之,0101 —— 1231 这些都列出来,然后暴力组合,但进一步想就觉得不太现实。

小技巧

首先可以确定的一点是 6 和 9 是可以互换的,这样我们就只需要考虑 0 —— 8 这 9 个数的排列了。

划分子问题

然后想一想,月份一共就 12 个数,算是两个骰子排出一个月 31 天的子问题,所以先尝试一下两个骰子能排出多少天,不够的天数再用剩余俩骰子凑凑看。

用两枚骰子排出天数

十位的数字也就 0 1 2 3 这 4 种,而且 3 还不常见,所以猜测每个骰子都会有 0、1、2 这三个数,剩下来还有 3、4、5 和 6、7、8,正好可以分布在两枚骰子上!

两枚骰子排出天数

解决了

这样排出天数后,如法炮制就可得到月数,所以证明四枚骰子是完全可以排列出一年 12 个月 365 天的!
等有空时写个 web 版的方块日历~

逛公园才是正经事

总览

一晃在帝都都呆了四年多了,逛过的公园也不少,今日忽有友人问起周末闲时去处,也罢,将这些年逛过的公园一一道来。那几个耳熟能详的,比如故宫、天坛、颐和园和圆明园等就不表了。

东边

朝阳公园

在北京四年,在朝阳区就有三年半,朝阳公园作为朝阳区的扛把子,自然是头把交椅。

美丽的朝阳公园坐落于北京东三环与东四环之间,是我逛过单体最大的公园之一。大约是 2017 年某一个周日,闲得实在蛋疼,就买了张票去了朝阳公园,逛了一圈,逛到脚酸。

公园是很典型的以水域为中心,按功能划分区域的结构,中心区域为综合游乐场,东南侧为运动场地,有户外拓展、足球篮球棒球各种运动场地,北侧则基本以植被覆盖。整个公园坡度较小,适合慢跑等运动,据说住在周边的很多明星会来这里晨跑。

夏季的朝阳公园有荷花莲叶,冬季有人工滑雪场,总的来说游玩价值很高。和前女友在一起的时候甚至考虑过在这里的婚礼堂办婚礼,但她没给我求婚的机会。

公园西北角是蓝色港湾,建得不错,也有蛮多吃的。但我最钟意的是外面好运街的东吴面馆,虽然这家分店的面不如南方分店的好,价格也高出很多,但毕竟是家乡的口味。有几次特意坐车过来吃,除了有关河鲜的浇头不咋滴之外,其他的面都算差强人意。

朝阳公园西边是富人区,那房子建得一看就是打几辈子工都买不起的,我骑车路过时常常想里面的人有好好欣赏这片风景的时间吗?
光晕
夏日莲花

蓝港一角
冬季滑雪场

面对如此美景,甚至还手涂了几幅渣渣写生。

丑写生

朝阳公园门票常年 5 块钱(2021 年春节之后全年免费开放了),如果月末经济拮据掏不起可以出南门左转过马路找小门去红领巾公园,那儿免费,并且麻雀虽小一应俱全,什么游乐场运动场打坐散步区域都有,靠近湖边还经常有老年乐队萨克斯手风琴演奏。

摇一摇,摇到外婆桥
丑写生 2

奥林匹克森林公园

奥森我去的次数不算多,但公园的体量摆在那,去个一次抵别的公园两三次……而且风景确实很好,有个山包,坐落在帝都中轴线上,可以从北向南俯瞰笼罩在雾霾中的北京城。公园主线就是绕园一周的环园路,所以随大流总是能看到无穷无尽的人,那些运动 or 减肥协会也挺喜欢在这办活动,经常能看到穿统一服装的,高矮胖瘦都有,在健步如飞或踌躇前行。

推荐在秋天或者春天去逛奥森,秋天可以看满山枫叶,足够黄。春天可以到北园看三生三世十里桃花,足够骚。

春江水暖鸭先知昨日黄花深秋美景黄叶桃花n 多桃花俯瞰雾霾

将府公园

这个公园没啥名气,也没啥特色,但却是离我刚来北京时住的地方最近的一个,公园里有条废弃的铁路,然后就是各种横平竖直规划好的树林以及屈指可数的游乐运动场,还记得是有个啥点将台的仿古建筑来着,所以这地儿叫”将台”。

记得从将台往这公园走是要过个铁路的,对于从小在铁路旁长大,但与铁路渐行渐远的我来说还挺怀念。顺便说一句,五道口现在也不是道口了,旁边铁路也没了。真是沧海桑田。

冰车

时刻保持社交距离的鸭鸭

四得公园

又一个半点名气的没有的公园,哪”四得”呢?据百度百科,办园宗旨是”使游人能够得到自然清新的乐趣,得到身心的锻炼,得到一定的植物知识,得到健康长寿”,答案竟然如此浅显,真是令人吃惊。但这个公园见证了我足足减掉了 15 斤肥肉的艰苦历程 …… 绕园一周 900 米,我那时经常早上跑 4 圈走 1 圈,晚上跑 3 圈走 2 圈,爆燃脂。然后挺着湿漉漉的大肚子,走过将台西路那一大片露天烧烤店,在满大街吃客面前耀武扬威得像个犯傻的二愣子,回到我那乌漆嘛黑的家。

早上跑步时能偶尔能看到小猫咪,一黄一灰,后来就不见了,估计是被人打死了。夏天晚上跑步能闻到夜来香还不知是玉兰香,野花挺多。我每次跑到撑不下去时就瞅瞅有没有好身材的妹子,想像追到她就能跟她嘿嘿哈哈,那就有动力了。

前进的动力跑累了,拍个照香气扑鼻

望和公园

我搬到望京之后,又想跑两步了,就找了个附近的公园,但这里其实大大小小足有三四个公园,每个都差不多,刚来的人都可能分不清。但我很快就放弃了在这边跑步的想法,因为这里的跑道不仅抓地性有问题,下过雨之后竟然是软的,还有一个极陡的上下坡,加上住 21 层等电梯也不容易,这些都成了跑步的阻碍。后来我买了个瑜伽球 + 垫,照着油管上一个 UP 主分享的动作(大约是平板支撑 + 手脚传球 + 卷腹等)练腰腹力量,辅以一两周一次的 Keepland H.I.T.T. 减脂效果还可以。

这公园的湖边景致还有点意思,像是精心打理过的,如下图的云雾缭绕效果,宛如仙境一般。

云雾缭绕花团锦簇

望京公园

虽然名字挺响亮,但实际挺小挺荒凉,从酒仙桥路向北到快要转弯到望京去的地方往东北侧,大约 500 米就是。这个公园连湖都没有,全是树,树都很高,有种无边落木萧萧下的感觉。去过一次,总觉得像是拍那种带凶杀案的文艺片取景地。无边落木萧萧下

太阳宫公园

有同学住在附近,来逛过两三次,没啥特色,门口有个大广场,里面各种树木一看就是人工产物。在外面四环路看过去倒是能看到一些大型盆栽啥的,但似乎不是一家,在公园内就看不到了。

生机勃勃这是啥?

地坛公园

99.9 % 的人看到地坛这两个字都会联想到史铁生,2017 年春节前我在附近逗留时去逛了一圈,发现地坛公园确实挺好的 …… 因为是皇家园林,布局工工整整,树木修剪得也不错,西北侧有个寺庙,东北侧一些供人憩息的院落,中心位置路挺宽,适合办庙会。有两次花了额外的钱上到了坛上,和天坛一比就显得接地气了很多。

庄严肃穆威武~

中轴

景山公园

讲完了东边的公园,来讲讲皇城根下的景山公园。出了故宫神武门正对着的就是,门票应该是 3 元,景山最著名的当属大明朝崇祯爷自缢那棵歪脖子树了,可惨了,说殓尸时思宗皇帝光着左脚,右脚穿着一只红鞋。但人已逝,树非树,都成了坊间趣谈。

明思宗殉国处

从景山顶上可以望见故宫中轴线,也就是北京城的中轴线。俯瞰故宫

那次去景山还看到了一个老者吹萨克斯,演奏的曲目是《追梦人》。吹萨克斯的老者

北海公园

北海公园在景山旁边,基本也就是个湖,湖中间有个岛。有趣的一点是,你从北门进去就有两条路,一条往西,一条往东,你选了一条走到头之后发现到不了另一条路上,这时咋办呢,只能掏腰包买船票坐船到湖中心再往另一头去,不得不说还是挺精明的。

和同学逛北海公园时,同学说他和他老婆第一次约会就在北海公园,他老婆看到如此良辰美景就开始吟诗作赋了,而他应不上来,只得干笑,想到这场面就忍俊不禁。

北京双飞 7 日游 1080 元 / 人落霞与孤鹜齐飞北海公园边上有个北海幼儿园,我第一次看到就惊呆了,有副对联讲得好,”拳打南山敬老院,脚踢北海幼儿园”,网上搜了搜,南山敬老院在昌平,有点远,所以给这对联配上俩图的愿望一直搁浅着。

北海幼儿园

陶然亭公园

这大概是我最早逛的公园之一了 ,那是一个雾霾天,前一周连写了三个线上 bug 的我决定去庙里烧柱香祈求佛祖保佑永无 bug。先是到了法源寺,看到了一院子的猫,还有几位老和尚在和女施主手把手促膝长谈。然后出门走到牛街买了仨牛肉包子啃了,接着向南就走到了陶然亭。估计是因为地处南城,都是各种老头老太在锻炼身体,过去太久也找不到照片,依稀记得是有个挺大的亭子,门口有些假山假石,园里好像还有个滑滑梯啥的。正值冬季,似乎还有冰雪嘉年华。随便放个网上的照片吧。

网图,侵删

西边

玉渊潭公园

有一年春天去的,人超级多,绕着湖走了一大圈,湖中间有个堤可以通行,北侧有游廊。记得是为了看樱花,但樱花质量也就寥寥,不甘落后的商家还出了樱花特款棒冰。地理位置还是很好的,旁边就是中华世纪坛和各种国家单位,真的是人来人往。抛开人多这一项之外,风景还算不错。

Sakura<{=....(嘎~嘎~嘎~)中央电视塔隔岸赏花

紫竹院公园

紫竹院公园过去曾经是北京市知名的女同性恋者聚集场所,后来女同性恋者则主要在专门的餐馆、酒吧聚集。男同性恋者则选择东单公园、元大都城垣遗址公园等处聚集。

北京有俗话称”要想成陶然亭,要想散紫竹院。”指男女朋友若同去陶然亭公园则会谈成,若同去紫竹院公园则会分手。也有说法是”成不成,陶然亭;散不散,紫竹院。

紫竹院公园在国家图书馆南边,旁边都是舞蹈学院艺术馆啥的,人文气息浓郁。既然叫紫竹院,园内自然以竹子为主,错落以假山假水啥的。也像模像样修了各种亭台楼阁。与陶然亭一样也有冰雪嘉年华啥的,毕竟北方人冬天不管下不下雪都得有个玩雪的地方。

园中循湖面往西南望去,可以看到玉渊潭边上的中央电视塔。

无题

百望山森林公园

这是目前离我最近的公园了,我们领导几乎每周都会去这儿爬个山。听名字就知道这是个山,坐落在京城西北角,相传北宋杨六郎与辽兵在此山下鏖战,佘太君登山观阵助威,此山因而得名。山顶有佘太君雕像,迎风伫立,俯瞰众生。[百望]{.ul}山曾是平西抗日游击队诞生地,现有黑山扈抗日战斗纪念碑等。还有个圣母院和一个传教士 PIERRE WILLIEMS 之墓,蛮好奇在他的祖国荷兰,他会被认为是和东渡日本的鉴真和尚一样的宗教人物吗?

天气好的时候可以一览北京的天际线,望京那一排高楼、奥林匹克七星塔、盘古酒店、擎天柱一样的中国樽和中央电视塔,近处的就是颐和园和圆明园了。

西北望长安可怜无数山

北京植物园

植物园是我去过最偏僻的公园之一了,坐落在香山脚底下。大冬天去的,没啥植物,里面有俩景点有点意思,一个是梁启超墓,由其子 —— 著名建筑学家梁思成亲自操刀,整个墓园安静祥和,西侧有个亭子,说是打算立个铜像,因财力不足而作罢。

另一个就有意思了,说是一退休老教师返回祖宅生活,搬动床柜时擦破了墙皮,露出来其中的诗文,考证发现竟是曹雪芹故居。于是政府就依样画葫芦给复原了一个故居出来。故居里详细介绍了曹雪芹家因被贬而辗转北京各处居住的故事,结合北京当时燕京八景等景致。猜测先生当时是如何在北国寒风中忆甜思苦,怀想金陵时极致奢靡的上流生活,写出那部不朽的传世之作《红楼梦》。

从故居出来往山上走,一路溪流蜿蜒,实际上是都结成冰了,有穿古装的小主在冰上拍照,颇有几分像贾府众女眷踏雪寻梅的景致。溯源至尽头,有一巨石,呈元宝状,相传这就是女娲娘娘补天剩下的那块奇石——红楼故事的一切就从这里开始。

西山情缘,红楼之梦惊!老教师在自己祖宅发现曹雪芹故居诗文冰面漫步天降奇石

北京园博园

讲到这里也就差不多了,第一次去园博园还是 2013 年来北京领个奖时和老师一起去的,那时的园博园刚修好,地铁也刚通到那,里面的园子开得还是挺齐的,中间的锦绣谷虽说不上花团锦簇,但还是有几分姿色。一晃过了 7 年了,2020 年和我妈又去了一趟,真是相当惨淡了。几个特色展馆全部歇业,什么东南亚、非洲、台湾馆全部都关门了,连吃饭地方都只剩吉祥馄饨一家黑店,要不然就只能吃方便面自热米饭啥的。整个园博园到处一副颓败气息,唯一还能参观打量的三个园子分别是北京园、江苏园和广东园,大致与 GDP 财力相符。

西北处有个永定塔,气势恢宏,我妈说拍塔不要站在塔脚底下仰拍,这样就会被塔镇住不得翻身。

宝塔镇蛇妖江苏园锦绣谷广东园

后记

这里只列出中心城区方便寻找到的公园,像还有些什么雁栖湖公园之类的因为太远没有列举必要,不过雁栖湖作为会议度假疗养胜地,风景倒还可以,跟十三陵水库有的一拼。下一为雁栖湖,下二三为十三陵水库。

雁栖湖蟒山望十三陵水库十三陵水库

像故宫、颐和园和圆明园啥的,偶尔也会去去,就觉得这几个地儿吧,随着游客纷至沓来,越来越像个现代景点,越来越不是皇家园林那味儿了。

Electron 开发实践

前言

首先介绍一下腾讯文档桌面端应用,以下简称桌面端,其通过嵌入 web 端腾讯文档应用并利用 Electron 封装本地系统接口的能力实现了独立分发的桌面端 App,兼顾了 macOS 和 Windows 两大操作系统,借此实现了腾讯文档的全端覆盖。

两大平台,一个月时间,我们是如何做到从技术选型到项目上线的呢?

这也太标题党了,跟市面上流传甚广的 21 天精通 C++ 简直一模一样。

我们都知道罗马不是一天建成的,如果把软件开发比作建一座城市的话,我们的的确确在一个月时间内造出了腾讯文档桌面端应用。肯定有人要问了,为何是一个月时间呢?为什么不是半个月,三个月亦或是半年时间?

事实上,这也是我们一开始进行技术选型和开发规划时所考虑的问题,因为选择了使用 JavaScript 及 Web 技术开发客户端,就注定了与 web 开发息息相关,包括迭代周期和开发顺序等方面,web 端腾讯文档的发布周期是一周两次发布,在一个月时间内差不多可以交付一系列完整的 API,这样可以做到桌面端与 web 端并行开发,最终整合成一个整体。如果等到半年时间才交付了桌面端,这时 web 端应用的 API 和 JSBridge 等接口规范都可能随之发生改变,容易造成返工甚至二次开发。

下面,我们将从四个方面介绍腾讯文档桌面端开发实践内容:技术选型、DevOps 工程化实践、混合式开发基础建设和跨端统一用户体验。

技术选型

竞技场耸立,罗马屹立不倒;竞技场倒塌,罗马倒塌;罗马倒塌,整个世界都会崩溃。 ——圣徒比德

技术选型与古罗马的竞技的核心并无二致,都在于选优拔萃。而我们做技术选型的目的则不在于观赏,在于为了今后的开发找到正确的方向。

首先是总体的开发框架选择,结果是没有疑问的,我们选择了 Electron,实际上 NW.js 前身 node-webkit 和 Electron 的开发团队具有继承关系,而 NW.js 的特点是以 html 作为启动文件,在窗口里直接调用 Node.js,但我们知道能力越大责任越大,同时风险系数也越高。Electron 的主进程是跑在 Node.js 环境下的,可以无缝使用 Node.js 能力,而单独的窗口,即渲染进程,需要显式地打开开关才能使用,这样就一定程度上降低窗口中的页面滥用 Node.js 能力对系统造成危害或者频繁调用 Node.js 能力对性能产生影响的可能性。在插件、第三方包、社区生态和搜索热度上, Electron 都完胜于 NW.js,所以我们就放心地使用 Electron 进行开发吧。

社区优质实践

既然选定了 Electron 作为开发框架,先来看一看业界基于 Electron 的优质实践,首当其冲的是宇宙第一 IDE 的 Visual Studio 的 …… 挂名弟弟 …… Visual Studio Code,同样是微软出品,现已成为 web 开发事实上的标准 IDE。

然后是 Github 出品的 Atom 编辑器,这里插一句题外话,Electron 原名”Atom Shell”,后来随着框架的进一步抽离和沉淀,改名为”Electron”,这点非常符合国外技术圈觉得”工具不好用就发明一个趁手的工具”的思路。以及同样是 GitHub 出品的 GitHub Desktop 客户端,其他知名的基于 Electron 开发的桌面软件还有协作办公软件 Slack、 IM 即时通讯软件 WhatsApp 和 知识协作软件 Notion 等。

构建工具

我们做桌面端应用与 web 端应用差异最大的在于分发方式不同,web 端应用打开页面浏览即为分发成功,而桌面端应用则必须要下载到本地安装后使用,所以提升下载与安装体验对用户增长率提升至关重要。而提到安装包,就不得不提一下 electron-builder,它不仅做到了轻配置快速构建,也带给了桌面端应用非常多的额外能力,例如系统级别的文件关联,自动签名认证功能,制品管理和安装流程定制等,这些都与后面讲到的工程化建设和跨端体验一致性密切相关。通过一套配置,即可构建出包括自动更新、App Store 发布包在内的多个制品。

单测框架

如果说安装包是团队给用户的交付物的话,代码就是开发给团队的交付物。好的代码应该是可测试、可维护和承上启下的,要做到这些的最佳实践形式就是编写测试。而多种多样的测试里最方便快速的就是单元测试了,针对 Electron 的测试方式与常见 web 端测试不同,也可以认为是分别在 JSDOM 和 Node.js 两种环境下进行测试。经过调研,我们引入了 @jest-runner/electron 作为我们的单测框架,它的优势是一套配置,根据文件目录分发到两种执行环境下运行,也就是前面提到的主进程和渲染进程。并且具有代码无侵入,配置简单,速度飞快等特点。

从下面的图可以看到,运行全部 200 多个用例仅耗时不到 30s,方便开发时快速验证功能完备性。

DevOps 工程化实践

然后是我们的 DevOps 实践。为什么要协作呢?一个团队单打独斗不舒服吗?因为不同团队不同开发人员间基础能力有差异,倒不一定是体现在技术能力,而是技术侧重点不一样。DevOps 则提供了平台赋能,将各个能力项拉齐到统一水准。就像罗马士兵拥有了统一的装备,将人变成了战士。

同时要注意到的是选择协作工具时不仅仅要考虑当下,也要考虑系统的伸缩性,为未来的发展壮大留有余量。

最终实现了”把控代码质量”,”托管构建过程”和”运行时保障”这三大目标。

把控代码质量:

静态代码分析、ESLint 扫描、圈复杂度扫描、重复代码扫描、单元测试、自动化测试

托管构建过程:

自动构建托管、自动签名认证、自动发布、自动转工单

运行时保障:

配置下发、灰度开关、自动化故障上报、日志监控、性能监控

混合式开发基础建设

前面讲到的都是外在条件,但文档内在是 web 项目。我们需要设想一下,对于一个 web 项目而言,包括 HTML、CSS、JavaScript 和其他媒体文件等等都是外部资源,如何建设好应用在于如何利用好外部资源。

如果说将 web 应用改造成桌面端应用是建一座城的话,那么将外部的能力引入到应用内的混合式开发基础建设就像是建造罗马水道一样。将水源从山脉中引流到城市里供人饮用、灌溉农田菜圃,再将污水输送出城市,完成城市的资源循环。

让我们先来看看这里都有哪些系统和外界网络提供的能力呢?比如本地的原生数据库,文件系统里存储的数据文件,服务器的计算资源和静态文件 CDN 等。

本地资源:数据库、文件 IO 和 JSBridge

首先是本地的资源,我们经过反复比较,最终选择了最高效的 LevelDB 作为底层数据库实现,它是由 Google 开发的 KV 数据库,具有很高的随机写,顺序读/写性能,同时原生数据库也给于客户端程序更多的操控权。我们在其上封装了包括多库多用户管理,请求指令封装、分发日志上报等能力,通过 electron 提供的基于 scheme 的渲染进程 URL 请求拦截,以及主进程 webContents 通过 executeJavaScript 向渲染进程执行脚本,实现了 JSBridge,将包括上面提到的 LevelDB 以及 electron-store 等存储能力引入到了 web 端,同时通过 Node.js 自带的 fs 模块将文件 IO 能力提供给桌面端应用。

外部资源

然后要提到的是外界网络能力,包括服务器和静态文件 CDN 等。

这两种能力都是通过 web 技术实现的,腾讯文档目前 web 上已经实现了有限的离线编辑能力,比如自动缓存增量编辑操作,进行版本冲突处理和提交等,在静态文件上正在开发基于 PWA 的离线缓存方案。同时因为是桌面端,前面提到的 LevelDB 是通过拷贝二进制可执行文件到发布资源中来实现分发的,所产生的问题是对不同系统需要分发不同的二进制文件,或带来工序上的复杂和计算资源的浪费,未来对类似需求可能考虑 WebAssembly Interface 来做跨端分发可执行文件。

跨端统一用户体验

既然是应用开发,用户体验是重中之重。如何在跨端情况下保证用户体验的统一性,需要我们制定一系列的规范,像同时期的罗马和秦帝国一样,立国之初就统一了包括法典、文字度量衡等规范,这大大地有利于内部进行交流协作,在处理差异性问题时有据可循。

弹窗

以简单的一个系统设置弹窗为例,在设计规范中 Windows 和 macOS 上样式实现是不一致的,弹框的边框则是都采用了系统样式,但 Windows 同时需要定义标题和关闭按钮,而 macOS 则沿用了系统的红绿灯样式,同时考虑到代码一致性手动实现了标题部分。在内容部分,macOS 考虑到与系统 UI 一致,手动实现了弹窗内 tab 切换,主体内容则是基于 DUI 实现两端共用。这里带来的问题是,开发往往只会在一台机器上开发,如果开发需要每次都打包分发到另一个平台看效果也太麻烦了,可以通过加开关的形式进行调试。在完成对弹窗的封装以后,我们可以基于 BrowserWindow 和 React 对其进行统一的生命周期管理,保证同一类型弹窗只显示一个。

安装与升级

然后是安装与升级,Windows 是覆盖安装,mac 是拖拽安装,Windows 可自定义安装前后行为,例如安装完写入注册表,卸载后清理用户数据,mac 版则利用了系统的静默升级。而 electron-updater 则让两者都实现了自动下载并一键升级的功能。

更多桌面平台特性

我们在开发过程中还遇到了更多的桌面特性,比较顺利的是 Electron 和 electron-builder 帮助实现了非常多的系统功能如:文件打开方式关联,QQ 消息链接自动打开 App 并打开文档,监测剪贴板链接自动打开在线文档等等。而其中不方便实现的则是全局的 Web UI 容器,因为 Electron 自带的系统 UI 控件非常少,也大多不符合 UI 规范,需要自定义 UI 界面只能通过打开渲染窗口并加载 HTML 文件的方式。如图所示的全局 toast 在项目中应用非常广泛,如何将其与 React DUI 组件进行共用呢?

命令式创建 Web UI 组件

首先要明确的是我们肯定是通过打开 BrowserWindow 窗口加载 html 来展示 UI。一种比较常见的思路是命令式创建 web UI 组件,比如创建 DialogManager 来统一管理多个 dialog,但这里的问题是有多少个 dialog 就需要多少个 dialog.html 文件,因为它们都是编译时就确定的,即使通过 url 分发,也必须至少创建一个 dialog 文件才能打开窗口。

声明式创建 Web UI 组件

React 提供了声明式创建组件的方式,我们可否通过其创建组件呢?通过调研,我们发现了 React 的 createPortal 函数是可以将 React 组件挂载到新创建的 window 里去的,那么我们只需要定制新创建 window 的参数就可以实现无边框窗口加载 React DUI 组件的功能。即实现了利用 React 管理窗口的生命周期。

  • window.open 并通过 Electron 拦截定义新创建 Chromium 窗口

  • React.createPortal 将组件(如 )

挂载到新创建的窗口内

  • 利用 React 管理窗口的生命周期

这样可以把唤起 Web UI 的职责交给常驻后台的隐藏渲染窗口 webComponent,在其中自定义组合各种各样丰富的 React DUI,通过 React 进行统一管理,后续可以几乎零边际成本增添新组件,同时在组件与进程频繁交互时也方便通过组件树找出对应关系进行维护。