电脑系统前端程序,电脑软件前端

2024-05-24 06:21:08

1.前端主要都需要学什么？

2.编程语言的应用场景

3.计算机编程语言有哪几种

4.web前端零基础该怎么去学习？

电脑系统前端程序,电脑软件前端

Electron是什么及它的优势（摘自网络）Electron简介Electron是是GitHub开发的一个开源框架。它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。Electron可以用于构建具有html、css、JAVAScript的跨平台桌面应用程序，它通过将Chromium和node.js合同一个运行的环境中来实现这一点，应用程序可以打包到mac、windows和linux系统Electron为前端技术人员利用web前端技术开发桌面应用带来了可能，开发人员可利用已经掌握的前端技术如Html、CSS、JavaScript，以及结合一些前端技术框架：Vue、Angular、React、webpack，加之浏览器渲染引擎、Electron封装的系统API快速实现一款桌面应用的开发，Electron做了大部分复杂的工作，开发人员只需要专注在核心业务和前端技术本身。同时，通过一定的优化，Electron可以做到很好的体验。支持平台目前支持Electron的平台有OSX、Windows、Linux：OSX：对于OSX系统仅有64位的二进制文档，支持的最低版本是OSX10.8。Windows：仅支持Windows7及其以后的版本，之前的版本中是不能工作的。对于Windows提供x86和amd64(x64)版本的二进制文件。需要注意的是ARM版本的Windows目前尚不支持。Linux：预编译的ia32(i686)和x64(amd64)版本Electron二进制文件都是在Ubuntu12.04下编译的，arm版的二进制文件是在ARMv7（硬浮点ABI与DebianWheezy版本的NEON）下完成的。预编译二进制文件是否能够运行，取决于其中是否包括了编译平台链接的库，所以只有Ubuntu12.04可以保证正常工作，但是Ubuntu12.04+、Fedora21、Debian8等平台也被证实可以运行Electron的预编译版。Electron的优缺点Electron的优点如下所示：部署升级方便，用户可以通过浏览器就可以访问。HTML/JS/CSS编写，方便且高效。可支持Windows、Linux、Mac系统。可让js前端的生态融入进来，让开发员有大量的模块和资源可用（类似python第三方库、vscode插件）Electron的缺点如下所示：对于开发者而言：浏览器适配比较繁琐。有些应用必须指定浏览器版本（比如OCX必须是IE内核，H5必须是较高版本），必须打开浏览器，输入一长串URL地址。打包体积大：一个小应用打包下来可能就需要几十兆，不过目前磁盘存储已经不是什么大问题，随着网路环境越来越好，磁盘容积也越来越大，这个问题给用户带来的负担越来越不明显，几乎可以忽略。占用内存较在：一般50M起步，多数要100-400M,新版不知道有否优化。毕竟开的是浏览器，有点重。性能有延迟：在100多ms以上，没有Winform那么快。开发有一定复杂度：除需要掌握必要的前端知识外，基于Electron开发仍需要了解跨进程通信的一些知识点，进程上的一些问题往往还是容易给开发者带来一定的困惑，有一定的学习成本，但是通过系统学习还是容易攻克的。版本更新快：它是基于Chromium的，所以Electron跟随Chromium的版本发布节奏，版本迭代较快，这可能会导致一些兼容问题，但幸运的是目前Electron的核心功能一直都算是很稳定的。安全问题：Electron提供给了开发人员足够的便利，同时也有一些具有风险的开关，开发者需要在开发中妥善处理，避免对应用客户带来安全隐患，开发人员需要关注安全问题。对于传统C/S桌面客户端开发者：对web应用不习惯，尤其是使用专业c#Delphi软件，大多数会觉得web应用没有桌面应用方便或强大。Electron开发桌面程序需要的前端技术Electron是基于Chromium和Node.js实现的，所以开发人员所需要使用到的前端技术主要包括以下方面：1、Html、CSS、JavaScript、ES62、前端开发工具Vue、Angular、React等的一种3、其他网络、缓存、通讯、系统、跟踪等前端技术4、对Vscode编辑器的熟悉基于Electron实现的软件Electron现已被多个开源应用软件所使用，其中被广大所熟知和使用的Atom、MongoDB桌面版管理工具、Skype桌面版、WhatsApp桌面版、HTTP网络测试工具Postman、接口管理软件ApiFox、WhatsAp、Teams、支付宝小程序IDE、开发人员熟知的VisualStudioCode编辑器就是基于Electron实现的。案例将来还会更多。一、搭Electron1、使用克隆库来搭建1）安装git要先安装git,安装git,在任何目录右键就有相关的命令文件资源管理器直接敲cmd随时在当前目录下克隆来创建项目2）克隆项目然后gitclone）安装依赖克隆后再：cdelectron-quick-start安装依赖并运行（主要是针对package.json里面的DevDependencies这段里面的依赖配置）npminstall&&npmstart或者直接cnpmi(一定要先进入到项目目录，是针对当前文件夹来的）也可直接下载DownloadZip源码包下来再解压到你指定的文件夹下面4）运行项目运行：在package.json里Scripts段里有一个start它模拟"electron."来运行相当于把"electron."封装成start这个命令了。所以可以通过：npmstart/cnpmstart来运行（npm是node.js里的）可看到控制台里显示实际执行的是electron.node_modules:各种依赖库模块Ct+C结束运行Preload.js是在main.js讲程创建window时加载的写在webPreferences里监听了DOMContentLoaded事件使用replacetext来替换index.html按指定ID找到几个版本文本renderer.js渲染进程（与index.html一起组成渲染进程index.html引用了<scriptsrc="./renderer.js"></script>2、使用electron-forge(锻造)脚手架来搭建项目1)npx是node.js新版支持的命令npxcreate-electron-appmy-new-app(推荐用这个)或yarncreate-electron-appmy-new-appnpx相当于多步传统的方式npminstall-g@electron-forge/cli(安装脚手架）或cnpm安装electron-forgeinitmy-new-appcdmy-new-appnpmstart但npx使用的是npm可能下载慢或下载不了，可考虑使用cnpmnpx运行时控制台可看到简洁的安装过程，最后一步是安装相关的依赖2）使用Vscode打开项目项目下载或克隆后，使用Vscode编辑器来打开生成以下文件会放在src目录下：index.js主进程index.html渲染进程index.cssindex.html用到的css3）运行项目打开package.json在scripts节中可看到"start":"electron-forgestart",所以你可以使用npmstart来运行同理，可使用npmmake来生成exe文件4）关闭DevTools运行可看到打开了调试工具这个是在index.js主进程的createWindow最后使用了一句mainWindow.webContents.openDevTools();5）渲染进程重载网页改完index.html或index.css后，可以不中止，直接在view-reload重新加载网页3、手工写代码来搭建Electron项目，更好理解代码1）手工创建新项目先创建项目目录，不能有空格，不能有中文在vscode打开这个目录2）新建3个文件index.htmlindex.cssindex.js在index.html文件中，输入html:5可产生一个基本的html框架或!+Tab键也可以（必须是html文件中，js文件中不行）输入div或html+tab(不用<div>也可)再新建main.js右键在文件资源管理器打开，再在上面输入cmd就会自动到达这个目录的命令行输入npminit--yes回车，它就会在当前目录下生成package.json文件它会自动找main.js入口，并配置好入口也可手工再编辑修改package.json的内容3）在当前项目安装一下Electron（开发环境）虽然我们全局已安装了electron,但输入electron.没有代码自动补齐或提示需要在Vscode再用cnpmielectron--save-dev再安装一次,把它写到package.json中的devDependencies中依赖里这样再敲electron.代码就会自动提示了所以建议在项目里面安装一次这个模块4）Requireelectron再引用const{app,BroserWindow}=require("electron")5）app添加监听ready事件再监听应用的启动事件。需要事件名及回调函数app.on("ready",()=>{constmainWindows=newBrowserWindows({width:600,height:400})mainWindow.loadFile(path.join(dirname,'index.html'));//path.joindirname都是node.js的electron可直接引用node.js里面的东西在前面要先引用constpath=require('path');//mainWindow.loadUrl('}二、开发工具中配置Eslint(js代码检测工具）1、安装Eslint插件ESLint（有时发音为EasyLint）是一种静态代码分析工具，用于识别JavaScript代码中发现的有问题的模式,可配置安装此插件后，代码敲错，会有提示安装：cnpminstall-geslint（全局安装不需要注重目录）2、项目中配置Eslint插件cd到项目的目录终端下运行：eslint--init1）选择3种方式，只查找问题，....，第3种可强制修改你的格式（也可右键格式化你的代码shift+alt+f）2）再问你是在javascriptmodules(import/export)还是CommonJS(require/exports)使用，选择这个（node.js使用是require)3)再问你是在ReactVue.jsNoneofthese(选择这个）4)然后问你是否使用TypeScript,选择No会生成一个.eslintrc.js配置文件（其实就是我们刚才选择的配置）再回到刚才错误代码，就有提示了就是你虽然全局安装了，但需要用eslint--init在当前项目中使用（其实就是生成一个.eslintrc.js配置文件）5)使用node来运行js文件随便创建一个文件，内容为console.log(process.platform)在终端输入：nodetest.js就可运行得到是win32(windows平台）三、electron的运行流程运行electron项目是执行命令：electron.1、它先找项目中的package.json中的入口找到"main":"main.js",加载这个主进程它实例化BrowserWindow，也就创建了一个渲染进程它再加载本地的index.html文件（htmlcss)展示给用户这个应用的页面再使用IPC去完成任务并从主进程得到信息2、主进程与渲染进程一个electron应用只有一个主进程，但可以有多个渲染进程，每个Electron中的web页面运行在它自己的渲染进程里3、进程与线程的区别进程(Process)：是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调试的基本单位，是操作系统结构的基础线程(Thread）：在一一个程序里的一个执行路线就叫做线程（thread),更准确的定义是：线程是”一个进程内部的控制序列“线程和进程：一个程序至少有一个进程，一个进程至少有一个线程4、可在newBrowserWindow时增加属性parent:设置窗体的父窗体5、在主进程和渲染进程里修改内容怎么刷新在主进程里修改东西，必须重新运行electron.在渲染进程里改东西，可以使用网页-View-ForceReload来刷新6、如何在主进程和渲染进程中使用nodejs模块及NodeJs第三方模块主进程中无需任何配置就可使用Nodejs模块constfs=require("fs")主进程打印console.log需要在终端里看，而不是在浏览器时里的开发工具里的console里看（DevTools)渲染进程：第一种方法:preload加载的可直接使用在newBrowserWindow(查看官网它的详细参数）时使用webPreferences:{preload:path.join(__dirname,"renderer/preload.js")BrowserWindow通过preload.js可直接使用nodejs模块第二种方法：不在preload加载的如果要在index.html引用Nodejs的模块如index.html里加了<scriptsrc="rederer.js"></script>在rederer.js中如果使用require就会出错。必须在main.js中的创建这个渲染进程newBrowserWindow(对应那个index.html)加上下面配置webPreferences:{nodeIntegration:true,contextIsolation:false}7、加个按钮来显示调用文件的内容1、在index.html增加个按钮<buttonid="opednFile">打开</button>2、再定义<divid="content">//将来最好改成textArea，代码显示更美观一些3、再为div增加个样式4、在renderer.js中要监听按钮单击事件window.onload=()=>{contentDom=document.querySelector('#openFile')openFileDom=document.querySelector('#content')openFileDom.onclick=()=>{alert('test')constfs=require('fso')fs.readFile('package.json',(err,data)=>{if(err){console.log(err)return}console.log(data.toString())contentDom.innerHTML=data.toString()})}}四、调用h5里的拖放Api及Nodejs实现文件拖放1、在窗体的onload设置ondragenterondrop等事件window.onload=()=>{varcontentDom=document.querySelector('#content')//=function()可改成箭头函数=()=>//阻止这些事件的默认行为contentDom.ondragenter=contentDom.ondragover=contentDom.ondragleave=()=>{returnfalse}contentDom.ondrop=(e)=>{//console.log(e)console.log(e.dataTransfer.files[0].path)}}2、electron进程图（摘自kevin5979）主进程什么是electron主进程?electron运行package.json的main脚本的进程被称作主进程electron主进程的相关/作用每个electron只有一个主进程用于管理原生GUI，典型的窗口（BrowserWindow、Tray、Dock、Menu）主进程用于创建渲染进程主进程控制应用的生命周期简单的说，electron项目的主进程只有一个,主进程的执行代码需要写到main.js中,起到统筹全局的作用渲染进程什么是electron渲染进程?electron展示web页面的进程被称作主进程electron主进程的相关/作用通过Node.js、Electron提供的API与系统底层打交道一个electron可以有多个渲染进程主进程APIapp：控制应用的事件生命周期autoUpdater：自动更新BrowserView：创建和控制视图BrowserWindow：创建和控制窗口contentTracing：跟踪并确定性能问题dialog：创建和控制本机系统对话框globalShortcut：监听系统快捷键inAppPurchase：（MAC专用）MacAppStore的应用内购买ipcMain：从主模块到渲染模块（ipcRenderer）的异步通信Menu：创建远程应用以及上下文菜单MenuItem：在菜单中添加菜单项net：发出HTTP或HTTPS请求netLog：记录网络事件Notification：创建桌面通知powerMonitor：监视电源状态powerSaveBlocker：组织系统自动进入省电模式protocol：注册自定义协议并拦截基于协议的请求screen：检索有关屏幕大小、显示器、光标位置等的信息session：管理浏览器会话、cookie、缓存、代理设置等systemPreferences：获取系统配置信息TouchBar：（MAC专用）配置TouchBar布局Tray：添加图标和上下文菜单到系统通知区webContents：渲染以及控制web页面渲染进程APIipcRenderer：从渲染器进程到主进程的异步通信remote：在渲染进程中使用主进程模块webFrame：自定义渲染当前网页desktopCapturer：通过[navigator.mediaDevices.getUserMedia]API，可以访问那些用于从桌面上捕获音频和视频的媒体源信息通用APIclipboard：在系统剪贴板上执行复制和粘贴操作crashReporter：将崩溃日志提交给远程服务器nativeImage：使用PNG或JPG文件创建托盘、dock和应用程序图标shell：使用默认应用程序管理文件和url3、主进程、渲染进程可用模块及

前端主要都需要学什么？

编程软件有很多种，JavaScript由LiveScript发展而来的脚本语言。Python是一种功能强大而完善的通用型语言。Scheme由LISP语言发展而来。Smalltalk一种简单易学，使用方便的程序语言。WebStrom目前被广大的中国JS开发者誉为Web前端开发神器。

JavaScript

JavaScript，是一种由Netscape的LiveScript发展而来的脚本语言。

Python

Python是一种面向对象的解释性的计算机程序设计语言，也是一种功能强大而完善的通用型语言。

Scheme

Scheme一种系统设计语言，由LISP语言发展而来，属于lisp的一种方言。

Smalltalk

Smalltalk一种面向对象的程序设计语言一种程序设计环境一个应用开发环境。

WebStrom

WebStrom目前被广大的中国JS开发者誉为Web前端开发神器。

编程语言的应用场景

web前端开发在目前的IT行业是一个比较重要的岗位，web前端开发是直接与用户接触，前端体验的好坏，以及美观程度是非常重要的，毕竟现在是一个看脸的时代。前端开发需要学习的知识非常的多，非常的杂，一个前端页面的开发，需要涉及很多的知识，且前端框架的更新速度很快，需要不断学习新知识。下面我们简单介绍一下，前端开发3个最基础的知识：HTML、CSS、JavaScript。

web前端开发

HTML

HTML是构成网页的骨架，所有的信息显示都要靠HTML实现。一个网页可以没有CSS代码，没有JavaScript代码，但绝对不能没有HTML代码，HTML是web页服装设计要学好必须每天坚持学习。为了方便大家的交流学习，也是创建了一个群每天都有分享学习方法和专业老师直播服装设计课程，这个扣裙首先是346 中间是099 最后是105? 服装设计学习零基础想要学习的同学欢迎加入，如果只是凑热闹就不要来了!!!面的核心。现在HTML发展到了HTML5，新版本增加了很多特性，使得HTML功能更加完善。

HTML

CSS

CSS在一个网页中起到的作用就像是一个化妆师，它可以让网页变的更加漂亮，更加易于浏览阅读。一个看脸的时代，CSS就是网页的化妆师。CSS的版本也发展到了CSS3，CSS3配合HTML5，让web开发进入了一个新时期。

css

JavaScript

JavaScript是web开发学习中的一个难点，JavaScript我们平时简称JS。JS需要系统学习，它的学习难度基本等同于学习一门后端开发语言，比如php。随着node.js的普及，前端开发后端化，node.js使用Chrome V8引擎，使得它可以做后端开发。JavaScript的应用越来越广泛，所以JavaScript的学习是非常重要的。

JavaScript

计算机编程语言有哪几种

安装一个vs 就可以开发桌面应用程序，还可以写网页应用程序。唯一缺点是目前跨平台方案不行。

Java

可以开发web应用，也可以开发窗口应用。但在各种系统中原生支持不太好，一般需要安装运行时环境。

C++

是主要用于应用程序开发，可以开发windows程序和linux程序，网页应用程序也可以开发，但不方便。

Flash

可以做网页前端特效，也可以开发AIR ，AIR可以同时发布到桌面或者安卓，苹果APP。

Javascript

最早只是用于网页前端，现在用于后端的nodejs ，也有可以编译为app的reactjs等扩展工具。

web前端零基础该怎么去学习？