Progress桌面客户端:Electron与AngularJS构建的原生跨平台应用

需积分: 5 0 下载量 162 浏览量 更新于2024-11-02 收藏 2KB ZIP 举报
资源摘要信息: "progress-desktop:@cmcnamara87 的 Progress 网络的跨平台桌面客户端,基于 Electron 构建" 知识点: 1. 跨平台桌面客户端:跨平台桌面客户端指的是能够在不同的操作系统(如Windows、macOS和Linux)上运行的应用程序,为用户提供统一的界面和功能体验。这种客户端常用于需要在多种操作系统中部署同一应用的场景。 2. Electron 构建技术:Electron 是一个使用 JavaScript、HTML 和 CSS 等 Web 技术来构建跨平台的桌面应用程序的框架,由 GitHub 开发和维护。它基于 Chromium 和 Node.js,允许开发者利用前端技术来创建丰富的桌面应用界面,并通过 Node.js 部分访问底层系统功能。Electron 构建的应用具有易于打包部署、快速迭代更新等优点,适合于开发工具和协作平台。 3. AngularJS:AngularJS 是一个开源的 JavaScript 框架,用于构建动态的Web应用。它主要被设计用来提高动态Web应用的开发效率,并且使得复杂的单页应用(SPA)的开发变得更加容易和快捷。AngularJS 通过依赖注入和数据绑定等特性,能够帮助开发者创建更加模块化和易于维护的代码结构。在 Electron 应用中,AngularJS 通常用于构建用户界面的前端部分。 4. 原生桌面客户端:原生桌面客户端指的是使用操作系统底层API编写的应用程序,这种程序可以直接与操作系统的内核交互,具有较高的性能和更好的访问系统资源的能力。与基于Web技术构建的桌面客户端相比,原生客户端通常需要为每种操作系统编写或编译不同的代码。 5. alpha 版本软件:Alpha 版通常是指软件开发过程中的一个早期测试阶段版本。Alpha 版本一般不对外公开发布,主要供开发者内部测试使用,或者作为内部预览版提供给测试者进行测试。此时的版本可能存在较多的bug和不稳定因素,用户界面和功能可能不完整或未最终定型,但足以进行初步的功能测试和评估。 ***:虽然没有具体的描述,但从标题和描述来看,*** 可能是一个与 Progress 网络相关的平台或服务。鉴于这是一个“非常前 alpha”的客户端,可以推测该网站或服务可能与项目管理、进度跟踪或者其他与进度监控相关的功能有关。 7. JavaScript:JavaScript 是一种广泛使用的脚本语言,它是网页开发的核心技术之一。在 Electron 应用中,JavaScript 负责逻辑处理、用户交互和其他动态功能。作为一种动态的、解释执行的语言,JavaScript 支持面向对象、过程式编程,并且与 HTML 和 CSS 紧密集成,为开发者提供了丰富的前端开发能力。 总结:这个资源是一个名为 "progress-desktop" 的项目,它是一个名为 Progress 网络的跨平台桌面客户端的非常早期的 alpha 版本。该客户端利用了 Electron 和 AngularJS 作为主要技术栈,以实现跨平台兼容性并提高开发效率。通过标签 "JavaScript" 可知,JavaScript 语言在应用开发中扮演了重要角色。此外,"progress-desktop-master" 提示了这是一个源代码托管的主分支,表明用户可能会找到完整的代码库和资源以供研究或进一步开发。

<template> <view class="box"> <view style="text-align: center;padding: 10rpx;"> <image class="image" src="../../static/images/icons/male.png" mode="scaleToFill" /> <view style="font-size: 24rpx;color: #a6a8ac;">男生</view> </view> <view class="mid"> <view class="flex" style="justify-content: space-between;"> <view class="males">{{ malePercent }}%</view> <view class="females">{{ femalePercent }}%</view> </view> <view class="progress-bar"> <view class="male" :style="{ width: malePercent + '%' }"></view> <view class="progress"> <view class="progress-bar-inner" :style="{ width: percent + '%' }"></view> </view> <view class="female" :style="{ width: femalePercent + '%' }"></view> </view> </view> <view style="text-align: center;padding: 10rpx;"> <image class="image" src="../../static/images/icons/female.png" mode="scaleToFill" /> <view style="font-size: 24rpx;color: #a6a8ac;">女生</view> </view> </view> </template> <script setup> import { computed } from 'vue' const props = defineProps({ male: { type: Number, requirde: true }, female: { type: Number, requirde: true }, }) // 总比例 const percent = computed(() => { return props.male / (props.male + props.female) * 100 }) // 男生比例 const malePercent = computed(() => { return Math.round(props.male / (props.male + props.female) * 100) }) // 女生比例 const femalePercent = computed(() => { return Math.round(props.female / (props.male + props.female) * 100) }) </script> <style lang="scss" scoped> .progress-bar { display: flex; align-items: center; height: 30rpx; width: 100%; border: 1px solid #ccc; border-radius: 30rpx; overflow: hidden; } .progress-bar .male, .progress-bar .female { display: flex; justify-content: center; align-items: center; height: 100%; color: #fff; font-size: 14px; font-weight: bold; } .progress-bar .male { flex: 0 0 auto; background-color: #007bff; } .progress-bar .progress { flex: 1 1 auto; height: 100%; position: relative; } .progress-bar .progress .progress-bar-inner { height: 100%; background-color: #28a745; position: absolute; top: 0; left: 0; } .progress-bar .female { flex: 0 0 auto; background-color: #dc3545; } .content { justify-content: space-between; } .males { color: #007bff; font-size: 24rpx; } .females { color: #dc3545; font-size: 24rpx; } .box { display: flex; justify-content: space-around; align-items: center; margin-top: 50rpx; margin-bottom: 50rpx; .mid { width: 70%; } } .image { height: 60rpx; width: 60rpx; } </style> 帮我把上述代码改成只传male一个值就可以显示出male和female两个的比例出来

2023-06-03 上传