资讯专栏INFORMATION COLUMN

Electron 前端提测小工具

Riddler / 3380人阅读

摘要:场景目前公司的测试环境还是由开发来搭建和部署的。没网,我就做个离线版的工具呗。调研选型技术目前我了解到使用前端技术做桌面应用有和以及着三种神器。好了,多说无用,来预览一下我们的小工具吧默认,就是最新的要提测的包。更新于年月日已入手。

场景

目前公司的测试环境还是由开发来搭建和部署的。这种做法是极其不科学的。所以那种部署啊什么的重复性的操作还是做个工具让测试自己去部署好了。
先来预览一下工具-.-:

实施

本来是想做个在线版的工具的。但是和公司运维沟通蛋疼。测试服务器没网,让他们开个联网的权限bb个不停,还来个这是我该做的事情吗?我只能说我是前端开发,服务器有需求是我一个开发该做的事情吗?
好了,不抱怨,我前端啥都能玩,不就是没网,照样怼。
没网,我就做个离线版的工具呗。做个桌面应用不就好啦。

挖坑记录

虽然以前也没折腾过桌面应用什么的,但是不要怂,撸起袖子干。

调研选型技术

目前我了解到使用前端技术做桌面应用有 Electron 和 NW.js 以及 heX 着三种神器。具体选哪个呢,不纠结,看到
Electron 出自github,那自然首先考虑啦。

安装 Electron

作为一个懒人,首先想到的就是手脚架啦:

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

然后我们大概可以看到这样一个应用:

然后我们看到了这样的目录结构:

看下,我们熟悉的也就 index.html, main.js 和 renderer.js 这三个文件。都打开看看,然后再和本地跑起来的应用关联下,不难理解 main.js 就是用来创建我们应用视窗的。index.html 是用来展示应用主内容的。
既然是 html 和 js 那就撸起袖子干咯。

码字

注意看 renderer.js 的注释:


不需要多么高深的英语吧?说这个文件是被 index.html 引用的。这个文件还可以编写 nodejs 的代码。如此说来那不就 easy 了。
在此之前,已经挖了一个坑:

基于 vue-cli 的前端项目的自动发布预览环境 https://segmentfault.com/a/11...

既然可以写nodejs,那就直接把之前做的 nodejs 相关代码拿来用就好啦。

仍然是使用 ssh2 模块,链接服务器,然后调用之前编写的 shell 脚本,传入的参数稍作修改就好了。
好了,多说无用,来预览一下我们的小工具吧:


默认,dist.zip就是最新的要提测的包。如果这个包部署在测试环境出现问题,影响测试了,那么可以点击修改,然后输入我们开发提供一个回退版本的包名,然后点击发布测试环境等待构建完成就ok了。

嘿嘿,前端是不是无敌逆天了。开发完毕还没完,要给测试用,是不是要打包成一个 exe。

electron-packager 打包应用

安装:

npm install electron-packager -g

打包:

electron-packager . fe-tool --out ../electron

第一个参数是要打包的资源路径,这里我用的点代表当前路径下的资源。 第二个参数是要打包的文件名,最后一个参数是打包后输出在哪个文件夹下。

整理

作为一个穷鬼,也就在 windows 下折腾了一番。啥时候买个Mac,再来装一波啊。

更新于:2018年11月27日10:25:24 Mac已入手。蛮好用的哦。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90766.html

相关文章

  • 基于 vue-cli 的前端项目的自动发布预览环境

    摘要:就是在提测前部署一个预览环境,在提测前,每个人本地验证一遍,再放在预览环境验证一遍。于是就准备啪啪啪撸一个完成自动发布预览环境的工具。用来直接把已经好的文件发布到预览环境。这样以后组里的其他同事也都可以用一行命令自己部署预览环境了。 场景 进入公司一段时间了。流程还是不太让人省心。就在上个提测版本的质量还是没法保证,总是或多或少出现一些问题。于是就想到了上家公司的一个做法。就是在提测前...

    ctriptech 评论0 收藏0
  • 测试开发实战[提测平台]15-实现提测单修改和邮件标记

    摘要:继续测试开发实战系列的分享,本篇是对提测平台的提测功能的编辑功能进行实现,主要重点是服务端更新接口中邮件内容标注逻辑实现,和对前端上篇添加需求的基础进行适配改造。微信搜索【大奇测试开】,关注这个坚持分享测试开发干货的家伙。继续测试开发实战系列的分享,本篇是对提测平台的提测功能的编辑功能进行实现,主要重点是服务端更新接口中邮件内容标注逻辑实现,和对前端上篇添加需求的基础进行适配改造。TPMSe...

    番茄西红柿 评论0 收藏2637
  • 开发后台项目的套路是什么?

    摘要:跨部门沟通沟通确定后,沟通结果以邮件的形式确认抄送相关。创建更改数据库根据公司要求规范操作数据表,确定后邮件抄送相关开发。静态页面开发目前后台项目大部分使用,自己拼页面即可。更新将自己开发的功能模块,部署到上。 需求评估 产品经理、开发工程师、测试工程师,组织需求评审会议,讲解本次的开发功能。 开发需分析: 是否涉及到其他开发部门? 是否需要创建数据库/数据表? 本次需要做多少页面?...

    whjin 评论0 收藏0
  • 有赞业务中台测试团队介绍

    摘要:在冒烟测试执行过程中,开发可以跟测试确定一个合理的冒烟用例数。另外在中台测试组每月或每季度会成立专项测试小组专门执行对应的专项测试。 一、团队概况  有赞帮助每一位重视产品和服务的商家成功,目前旗下拥有:有赞微商城、有赞零售、有赞美业、有赞小程序等SaaS软件产品,适用全行业多场景,帮商家网上开店、网上营销、管理客户、获取订单。  有赞业务中台测试团队按照职责划分为六条线:交易组、营销...

    gaosboy 评论0 收藏0
  • 一口气完成electron的入门学习

    摘要:目前类似的工具有,等。在渲染进程中,直接调用原生的接口是十分危险的。这里介绍一种,通过和对象,以消息的方式进行通信。主进程获得消息后,通过返回信息。另外,还提供了一种同步的消息传递方式。打包完成功能代码后,我们需要将代码打成可运行的包。 介绍 目前,使用前端技术开发桌面应用已经越来越成熟,这使得前端同学也可以参与桌面应用的开发。目前类似的工具有electron,NW.js等。这里我们着...

    Ethan815 评论0 收藏0

发表评论

0条评论

Riddler

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<