当前位置：首页 > news >正文

uniapp页面样式和布局和nvue教程详解

news 来源：原创 2025/7/27 20:07:50

uniapp页面样式和布局和nvue教程

尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx

px 即屏幕像素。
rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的，屏幕宽度进行计算，具体配置参考：rpx计算配置

`rpx` 详细说明：

设计师在提供设计图时，一般只提供一个分辨率的图。严格按设计图标注的 px 做开发，在不同宽度的手机上界面很容易变形。而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。微信小程序设计了 rpx 解决这个问题。 uni-app 在 App 端、H5 端都支持了 rpx ，并且可以配置不同屏幕宽度的计算方式，具体参考：rpx计算配置。
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。
开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如： 设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx。
换言之，页面元素宽度在 uni-app 中的宽度计算公式：750 * 元素在设计稿中的宽度 / 设计稿基准宽度
页面元素宽度在 uni-app 中的宽度计算举例说明：

若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为： 750 * 100 / 750 ，结果为：100rpx。
若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为： 750 * 100 / 640 ，结果为：117rpx。
若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为： 750 * 200 / 375 ，结果为：400rpx。

注意：
rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用px,rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向。

全局样式与局部样式

定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
注意：
App.vue 中通过 @import语句可以导入外联样式文件，一样作用于每一个页面。

<style>/*每个页面公共css */@import url("../../common/css/common.css");
</style>

uniapp页面样式和布局和nvue教程
效果：
uniapp页面样式和布局和nvue教程详解
APP和小程序中子组件会使用父组件的样式，H5端不会使用父组件的样式。

CSS变量

uni-app 提供内置 CSS 变量

CSS 变量	描述	App	小程序	H5
–status-bar-height	系统状态栏高度	系统状态栏高度	25	0
–window-top	内容区域距离顶部的距离	0	0	NavigationBar 的高度
–window-bottom	内容区域距离底部的距离	0	0	TabBar 的高度

注意：

var(--status-bar-height) 此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度。
当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为var(--status-bar-height)的 view 放在页面顶部，避免页面内容出现在状态栏。
由于在 H5 端，不存在原生导航栏和 tabbar，也是前端 div 模拟。如果设置了一个固定位置的居底 view，在小程序和 App 端是在 tabbar 上方，但在 H5 端会与 tabbar 重叠。此时可使用--window-bottom，不管在哪个端，都是固定在 tabbar 上方。
目前 nvue 在 App 端，还不支持 --status-bar-height变量，替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度，然后通过 style 绑定方式给占位 view 设定高度。

示例：

<template><view><view class="status_bar"><!-- 这里是状态栏 --></view><view> 状态栏下的文字 </view></view>
</template>
<style>.status_bar {height: var(--status-bar-height);width: 100%;background: red;}
</style>

效果：
uniapp页面样式和布局和nvue教程详解

`<template/>` 和 `<block/>`

uni-app 支持在 template 模板中嵌套 <template/> 和 <block/> ，用来进行 列表渲染 和 条件渲染。
<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
<block/> 在不同的平台表现存在一定差异，推荐统一使用 <template/> 。

<template><view><view class="box"><template v-if="test"><view>test为true,</view><view>test为true</view></template><template v-else><view>test为false,</view><view>test为false</view></template></view></view>
</template>
<script>export default {data() {return {test: false,}}}
</script><style>.box {display: flex;}
</style>

效果：
uniapp页面样式和布局和nvue教程详解

`Flex` 布局

为兼容多端跨平台运行，建议使用flex布局进行开发
阮一峰的flex教程：flex教程

{
display: flex;
flex-direction: row;
}

flex-direction 决定主轴的方向（即项目的排列方向）
flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content 定义了项目在主轴上的对齐方式。
align-items 定义项目在交叉轴上如何对齐。
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

nvue 教程

        uni-app App 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染。一个 App 中可以同时使用两种页面，比如首页使用 nvue，二级页使用 vue 页面，hello uni-app 示例就是如此。
        虽然 nvue 也可以多端编译，输出 H5 和小程序，但 nvue 的 css 写法受限，所以如果你不开发 App，那么不需要使用 nvue。
        以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的 API 能力（比如各种 push sdk 集成、蓝牙等能力调用），使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3 拨人开发，适得其反。 nvue 解决了这个问题，让前端工程师可以直接开发完整 App，并提供丰富的插件生态和云打包。这些组合方案，帮助开发者切实的提高效率、降低成本。
        如果一个页面路由下同时有vue页面和nvue页面，即出现同名的vue和nvue文件。那么在App端，会仅使用nvue页面，同名的vue文件将不会被编译到App端。而在非App端，会优先使用vue页面。

`nvue`开发与`vue`开发的常见区别

基于原生引擎的渲染，虽然还是前端技术栈，但和web开发肯定是有区别的。

nvue 页面控制显隐只可以使用 v-if 不可以使用 v-show
nvue 页面只能使用 flex 布局，不支持其他布局方式。页面开发前，首先想清楚这个页面的纵向内容有什么，哪些是要滚动的，然后每个纵向内容的横轴排布有什么，按 flex 布局设计好界面。
nvue 页面的布局排列方向默认为竖排（ column ），如需改变布局方向，可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改，仅在 uni-app 模式下生效。
nvue页面编译为H5、小程序时，会做一件css默认值对齐的工作。因为weex渲染引擎只支持flex，并且默认flex方向是垂直。而H5和小程序端，使用web渲染，默认不是flex，并且设置 display:flex 后，它的flex方向默认是水平而不是垂直的。所以nvue编译为H5、小程序时，会自动把页面默认布局设为flex、方向为垂直。当然开发者手动设置后会覆盖默认设置。
文字内容，必须、只能在 <text> 组件下。不能在 <div> 、 <view> 的text区域里直接写文字。否则即使渲染了，也无法绑定js里的变量。
只有 text 标签可以设置字体大小，字体颜色。
布局不能使用百分比、没有媒体查询。
nvue 切换横竖屏时可能导致样式出现问题，建议有 nvue 的页面锁定手机方向。
支持的css有限，不过并不影响布局出你需要的界面， flex 还是非常强大的。
不支持背景图。但可以使用 image 组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念
css选择器支持的比较少，只能使用 class 选择器。
nvue 的各组件在安卓端默认是透明的，如果不设置 background-color ，可能会导致出现重影的问题。
class 进行绑定时只支持数组语法。
Android端在一个页面内使用大量圆角边框会造成性能问题，尤其是多个角的样式还不一样的话更耗费性能。应避免这类使用。
nvue页面没有 bounce 回弹效果，只有几个列表组件有 bounce 效果，包括 list 、 recycle-list 、waterfall 。
原生开发没有页面滚动的概念，页面内容高过屏幕高度并不会自动滚动，只有部分组件可滚动（ list 、waterfall 、 scroll-view/scroller ），要滚得内容需要套在可滚动组件下。这不符合前端开发的习惯，所以在 nvue 编译为 uni-app模式时，给页面外层自动套了一个 scroller ，页面内容过高会自动滚动。（组件不会套，页面有 recycle-list 时也不会套）。
在 App.vue 中定义的全局js变量不会在 nvue 页面生效。 globalData 和 vuex 是生效的。
App.vue 中定义的全局css，对nvue和vue页面同时生效。如果全局css中有些css在nvue下不支持，编译时控制台会报警，建议把这些不支持的css包裹在条件编译里， APP-PLUS-NVUE
不能在 style 中引入字体文件，nvue 中字体图标的使用参考：加载自定义字体。如果是本地字体，可以用plus.io 的API转换路径。
目前不支持在 nvue 页面使用 typescript/ts 。
nvue 页面关闭原生导航栏时，想要模拟状态栏，可以参考文章。但是，仍然强烈建议在nvue页面使用原生导航栏。nvue的渲染速度再快，也没有原生导航栏快。原生排版引擎解析 json 绘制原生导航栏耗时少，而解析nvue的js绘制整个页面的耗时要大的多，尤其在新页面进入动画期间，对于复杂页面，没有原生导航栏会在动画期间产生整个屏幕的白屏或闪屏。

样式

nvue的css仅支持flex布局，是webview的css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面，只是写法需要适应。
在选择器方面支持的较少，只支持简单的 class="classA" 。
class 进行绑定时只支持数组语法。
不支持媒体查询。
不支持复合样式，不支持简写。
不能在 style 中引入字体文件。
布局不能使用百分比，如 width：100%; 。
有些web的css属性在nvue里无法支持，比如背景图。但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念。
nvue 的各组件在安卓端默认是透明的，如果不设置 background-color ，可能会导致出现重影的问题。
文字内容，必须只能在 text 组件下， text 组件不能换行写内容，否则会出现无法去除的周边空白。
只有 text 标签可以设置字体大小，字体颜色。

`nvue` 和 `vue` 相互通讯

`uni.$emit(eventName,OBJECT)`

触发全局的自定事件。附加参数都会传给监听器回调。
eventName类型String 事件名，OBJECT Object 触发事件携带的附加参数。

代码示例

uni.$emit('update',{msg:'页面更新'})

`uni.$on(eventName,callback)`

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

示例：vue对nvue的传值通讯
uniapp页面样式和布局和nvue教程详解
index.vue页面代码

<template><view><button @click="sendMessage">点击修改数据</button></view>
</template><script>export default {data() {return {message: 'Hello from nVue'};},methods: {sendMessage() {uni.navigateTo({url: '../test/test',success: () => {// 确保目标页面已经加载uni.$emit('ceshi', {title: '测试标题',content: '测试内容'});}});}}};
</script>

test.nvue页面代码

<template><view><text>Test Page</text></view>
</template><script>
export default {onLoad() {// 注册事件监听器uni.$on('ceshi', (data) => {console.log('标题：' + data.title);console.log('内容：' + data.content);});},onUnload() {// 页面卸载时移除事件监听器uni.$off('ceshi');},methods: {}
};
</script><style scoped>
/* 可以在这里添加样式 */
</style>

效果：
uniapp页面样式和布局和nvue教程详解

`uni.$once(eventName,callback)`

监听全局的自定义事件。事件可以由uni.$emit触发，但是只触发一次，在第一次触发之后移除监听器。

属性	类型	描述
`eventName`	`String`	事件名
`callback`	`Function`	事件回调函数
示例代码：

onLoad() {uni.$once('update',function(data){console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);})
}

示例：

<template><view><text>Test Page</text></view>
</template><script>export default {onLoad() {uni.$once('ceshi', function(data) {console.log('监听到事件来自 update ，携带参数 msg 为：' + data);})},onUnload() {// 页面卸载时移除事件监听器uni.$off('ceshi');},methods: {}};
</script><style scoped>/* 可以在这里添加样式 */
</style>

效果:
uniapp页面样式和布局和nvue教程详解

`uni.$off([eventName, callback])`

移除全局自定义事件监听器。

属性	类型	描述
`eventName`	`Array[String]`	事件名
`callback`	`Function`	事件回调函数
示例代码

onUnload() {
// 移除 update 监听器
uni.$off('update')
}

上面中已经用到了uni.$off的使用，在每次onUnload页面卸载的时候移除事件监听。

Tips

如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器；
提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

阶段完结~

uniapp页面样式和布局和nvue教程详解

uniapp页面样式和布局和nvue教程尺寸单位 uni-app 支持的通用 css 单位包括 px、rpx px 即屏幕像素。rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大…...

编程日记 2025/7/27 20:07:50

Ubuntu问题 -- 设置ubuntu的IP为静态IP (图形化界面设置) 小白友好

目的为了将ubuntu服务器IP固定, 方便ssh连接人在服务器前使用图形化界面设置设置找到自己的网卡名称, 我的是 eno1, 并进入设置界面查看当前的IP, 网关, 掩码和DNS (注意对应eno1) nmcli dev show掩码可以通过以下命令查看完整的 (注意对应eno1) , 我这里是255.255.255.…...

编程日记 2025/7/26 19:08:52

【Java】期末复习章节未完待续(版)

文章目录【01算法类】1.1 使用冒泡排序算法对数组a{9, 7, 4, 6, 3, 1,10}，按由小到大的规律排序数组中的元素。1.2 从键盘输入一个4位整数n，判断n是否是回文数。（回文数是指，将其数字反转排列的数与其本身相同。例如：…...

编程日记 2025/7/27 19:58:47

C语言数据结构——详细讲解双链表

从单链表到双链表：数据结构的演进与优化前言一、单链表回顾二、单链表的局限性三、什么是双链表四、双链表的优势1.双向遍历2.不带头双链表的用途3.带头双链表的用途五、双链表的操作双链表的插入操作（一）双链表的尾插操作（二&a…...

编程日记 2025/7/27 20:02:30

经验笔记：Git 中的远程仓库链接及上下游关系管理

Git 中的远程仓库链接及上下游关系管理 1. 远程仓库的链接信息当你克隆一个远程仓库时，Git 会在本地仓库中记录远程仓库的信息。这些信息包括远程仓库的 URL、默认的远程名称（通常是 origin），以及远程仓库中的所有分支和标签。…...

编程日记 2025/7/26 12:09:41

Swift闭包的本质

1 闭包的本质其实是一个引用类型：存储在堆空间上，由堆分配空间，且生命周期由ARC（自动引用计数机制）管理 2 捕获值：闭包会捕获上下文使用到的变量（引用类型会保持引用关系）&#xff…...

编程日记 2025/7/24 3:42:09

【SKFramework框架核心模块】3-2、音频管理模块

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群：398291828小红书小破站大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。一、前言【Unity3D框架】SKFramework框架完全教程《全…...

编程日记 2025/7/26 14:00:50

常用Rust日志处理工具教程

在本文中，我想讨论Rust中的日志。通过一些背景信息，我将带您了解两个日志库：env_logger和log4rs。最后，我将分享我的建议和github的片段。 Rust log介绍 log包是Rust中日志API的事实标准，共有五个日志级别&#xff1…...

编程日记 2025/7/27 19:50:56

深入理解索引（二）

1.引言在数据库和数据结构中，索引（Index）是一种用于提高数据检索速度的重要机制。本文将详细深入介绍索引。 2. 为什么要使用索引大家在使用索引之前一定要搞清楚使用索引的目的，因为索引的不当使用可能不但起不到正向作用&a…...

编程日记 2025/7/26 22:04:08

Python 开发工具 -- PyCharm 简介

一、PyCharm 简介 PyCharm 是由 JetBrains 打造的一款 Python IDE。 PyCharm 具备一般 Python IDE 的功能，比如：调试、语法高亮、项目管理、代码跳转、智能提示、自动完成、单元测试、版本控制等。另外，PyCharm 还提供了一些很好的功能用…...

编程日记 2025/7/22 5:27:25

C# 属性学习理解记录

字段和属性左边字段，右边属性拓展，属性安全： 1、设置public private 和protected 等，只读，只写， 2、在get set 方法时，验证，异常时抛出错误...

编程日记 2025/6/29 1:19:51

使用chrome 访问虚拟机Apache2 的默认页面，出现了ERR_ADDRESS_UNREACHABLE这个鸟问题

本地环境主机MacOs Sequoia 15.1虚拟机Parallels Desktop 20 for Mac Pro Edition 版本 20.0.1 (55659)虚拟机-操作系统Ubuntu 22.04 服务器版本最小安装开发环境编辑器编译器调试工具数据库http服务web开发防火墙Vim9Gcc13Gdb14Mysql8Apache2Php8.3Iptables 第一坑数…...

编程日记 2025/7/25 16:22:39

【大数据学习 | Spark-Core】Spark的分区器(HashPartitioner和RangePartitioner)

之前学过的kv类型上面的算子 groupby groupByKey reduceBykey sortBy sortByKey join[cogroup left inner right] shuffle的 mapValues keys values flatMapValues 普通算子，管道形式的算子 shuffle的过程是因为数据产生了打乱重分，分组、排序、join等…...

编程日记 2025/7/8 13:54:49

第六届国际科技创新学术交流大会（IAECST 2024）暨第四届物流系统与交通运输国际学术会议（LSTT 2024）

重要信息会议官网：www.lstt.org 大会时间：2024年12月6-8日大会地点：中国-广州大会简介第六届国际科技创新学术交流大会暨第四届物流系统与交通运输国际学术会议（LSTT 2024）将于2024年12月6-8日在广州举办&…...

编程日记 2025/7/26 19:08:32

看Threejs好玩示例，学习创新与技术(ogl)

本文标题可能看的你莫名奇妙，什么是ogl？ogl是一个新的三维引擎库，可以简单任务是非常简化的ThreeJS。下面图是它的一个示例，可见虽然它是一个麻雀，但五脏还是比较全的。 1、先说OGL OGL的代码非常简单，主要…...

编程日记 2025/7/26 11:11:01

读书笔记_《创华为.任正非传》_精华书摘

人生经历 43岁，开始创建华为爷爷:金华火腿乡间厨师父亲: 1910年生，北平民大经济系读书->职业学校任教->国民党兵工厂会计，组织读书会(读书会后来有很多人在新中国成立后成为高级干部。) 母亲: 高中毕业，乡村教师&#xf…...

编程日记 2025/7/21 9:04:41

4.4 MySQL 触发器（Trigger）

触发器是一种特殊的数据库对象，在特定事件（如INSERT、UPDATE或DELETE）触发时自动执行定义好的操作。它可以帮助我们实现更高效的数据管理和业务规则的约束。 1. 简介 1.1 什么是触发器触发器（Trigger）是由用户定义的…...

编程日记 2025/7/27 0:30:50

遗传算法（Genetic Algorithm, GA）

简介遗传算法（Genetic Algorithm, GA）是一种基于自然选择和遗传机制的优化算法，由 John Holland 于20世纪70年代提出。它是一种模拟生物进化过程的启发式搜索算法，被广泛应用于函数优化、机器学习、调度问题等领域。代码说明 …...

编程日记 2025/7/26 15:32:36

CentOS8.5.2111（7）完整的Apache综合实验

一、实验目标 1.掌握Linux系统中Apache服务器的安装与配置； 2.掌握个人主页、虚拟目录、基于用户和主机的访问控制及虚拟主机的实现方法。二、实验要求练习使用linux系统下WEB服务器的配置方法。三、实验背景重庆工程学院为筹备“重庆工程大学”特申请了c…...

编程日记 2025/7/26 23:12:28

flink学习（3）——方法的使用—对流的处理（map，flatMap，filter）

map 数据 86.149.9.216 10001 17/05/2015:10:05:30 GET /presentations/logstash-monitorama-2013/images/github-contributions.png 83.149.9.216 10002 17/05/2015:10:06:53 GET /presentations/logstash-monitorama-2013/css/print/paper.css 83.149.9.216 10002 17/05/20…...

编程日记 2025/7/25 4:49:43

Feed流系统重构：架构篇

重构对我而言，最大的乐趣在于解决问题。我曾参与一个C#彩票算奖系统的重构，那时系统常因超时引发用户投诉。接手任务时，我既激动又紧张，连续两天几乎废寝忘食地编码。结果令人振奋，算奖时间从一小时大幅缩短至十分钟。…...

编程日记 2025/7/22 21:24:26

YOLOv11融合[NeurlS2022]递归门控卷积gnconv模块及相关改进思路

YOLOv11v10v8使用教程： YOLOv11入门到入土使用教程 YOLOv11改进汇总贴：YOLOv11及自研模型更新汇总《HorNet: Efficient High-Order Spatial Interactions with Recursive Gated Convolutions》一、模块介绍论文链接：https://arxiv.org…...

编程日记 2025/7/26 16:34:54

java: itext 5.5 create pdf

/*** encoding: utf-8* 版权所有 2024 ©涂聚文有限公司* 许可信息查看： https://github.com/itext/itext-publications-examples-java/blob/develop/src/main/java/com/itextpdf/samples/sandbox/fonts/FreeSansBold.java* 描述：https://mvnreposit…...

编程日记 2025/7/22 8:30:30

EF Core学习笔记二

一、新建.net core的控制台项目二、安装Entity Framework Core 我们使用的数据库是Sqlite，所以我们需要的程序包是Microsoft.EntityFrameworkCore.Sqlite。如果想了解更多EF Core NuGet包，请参考：EF Core NuGet 包 | Microsoft Learn Install-Package Microsoft.Entit…...

编程日记 2025/7/21 22:13:41

快速排序【hoare版】

目录介绍算法思路函数实现函数声明确定基准值创建新函数创建循环找数据（right，left） 交换左右数据交换条件设置外部循坏条件设置初步总结代码循环条件完善内层循环的完善外层循环的完善相遇值大于keyi 相遇值等于k…...

编程日记 2025/7/25 12:20:14

day03（单片机高级）RTOS

目录 RTOS(实时操作系统) 裸机开发模式轮询方式前后台（中断方式） 改进（前后台（中断））定时器裸机进一步优化裸机的其他问题 RTOS的概念什么是RTOS 为什么要使用 RTOS RTOS的应用场景 RTOS的…...

编程日记 2025/7/24 18:43:52

vue中v-if和v-show的区别

文章为本菜鸡学习过程中遇到的问题记录，不是专业的，如有问题和不足还请大佬指正 >参考文章文章目录前言1、v-if2、v-show3、v-if和v-show的区别前言问题描述： 在完成表单验证任务的学习过程中，发现在使用v-show隐藏元素后…...

编程日记 2025/7/22 17:15:07

MacOS通过VMware Fusion安装windows 11问题汇总

环境虚拟机，VMware Fusion 13.6.1本地机器，ARM芯片的Mac，系统版本14.5Windows系统镜像，Window11 ARM 64 bit 安装卡在WiFi连接界面适合我本地环境的解决步骤为： 1、系统设置网络共享我开启的是en5，这…...

编程日记 2025/7/25 5:28:03

Stable Diffusion的解读（二）

Stable Diffusion的解读（二） 文章目录 Stable Diffusion的解读（二）摘要Abstract一、机器学习部分1. 算法梳理1.1 LDM采样算法1.2 U-Net结构组成 2. Stable Diffusion 官方 GitHub 仓库2.1 安装2.2 主函数2.3 DDIM采样器2.4 Unet 3…...

编程日记 2025/7/27 17:07:38

十五届蓝桥杯赛题-c/c++ 大学b组

握手问题很简单，相互牵手即可，但是要注意，第一个人只能与其他49个人牵手，所以开头是加上49 #include <iostream> using namespace std; int main() {int cnt0;for(int i49;i>7;i--){cnti;//cout<<i<<&quo…...

编程日记 2025/7/18 22:24:56

NFS搭建

NFS搭建单节点安装配置服务器安装配置启动并使NFS服务开机自启客户端挂载查看是否能发现服务器的共享文件夹创建挂载目录临时挂载自动挂载双节点安装配置服务器安装配置服务端配置NFS服务端配置Keepalived编辑nfs_check.sh监控脚本安装部署RsyncInofity 客户端单节点安装配置…...

编程日记 2025/7/24 18:15:16

【贪心算法第二弹——2208.将数组和减半的最小操作数】

1.题目解析题目来源 2208.将数组和减半的最小操作数——力扣测试用例 2.算法原理(贪心策略) 3.实战代码 class Solution { public:int halveArray(vector<int>& nums) {priority_queue<double> hash;double sum 0.0;for(auto e : nums){hash.push(e);sum …...

编程日记 2025/7/25 19:52:36

ByteBuffer 与 ByteBuf 的对比与优缺点分析

在 Java 网络编程和高性能 I/O 场景中，ByteBuffer 和 ByteBuf 是两种重要的缓冲区处理工具。ByteBuffer 是 Java NIO 标准库的一部分，而 ByteBuf 是由 Netty 框架提供的增强缓冲区工具。在实际开发中，选择哪一种取决于场景需求和性能目标。 …...

编程日记 2025/7/23 13:12:49

SpringBoot 集成 html2Pdf

一、概述： 1. springboot如何生成pdf，接口可以预览可以下载 2. vue下载通过bold如何下载 3. 一些细节：页脚、页眉、水印、每一页得样式添加二、直接上代码【主要是一个记录下次开发更快】模板位置 1. 导入pom包 <dependency><g…...

编程日记 2025/7/26 23:17:39

【IDEA】插件篇

环境：Mac M ，IDEA 2024.2.4 一、汉化 & 汉化后转回英文 1、汉化 IntelliJ IDEA -> Preferences -> Plugins -> MarketPlace，输入 chinese，点击安装，安装完成后重启IDE 2、汉化后转回英文 IntelliJ …...

编程日记 2025/7/26 19:19:20

librdns一个开源DNS解析库

原文地址：librdns一个开源DNS解析库 – 无敌牛欢迎参观我的个人博客：无敌牛 – 技术/著作/典籍/分享等介绍 librdns是一个开源的异步多功能插件式的解析器，用于DNS解析。源代码地址：GitHub - vstakhov/librdns: Asynchrono…...

编程日记 2025/7/23 4:46:41

数据结构【带环单链表】

在单链表中可能会存在一种情况，某一结点在经过几次转移之后回到了自己本身，这种情况就称之为带环链表。对于带环链表，我们不能轻易对其进行遍历，遍历可能会导致产生死循环。带环链表的逻辑图如下所示：（这…...

编程日记 2025/7/26 18:40:20

CodiMD导出pdf失败或无中文

CodiMD导出pdf失败，弹出文件保存窗口，有个pdf文件能下载，但是保存的时候提示“网站出问题了”，实际到服务器上看会发现docker崩溃了。解决办法： 使用最新的CodiMD镜像，如nabo.codimd.dev/hackmdio/hackmd:…...

编程日记 2025/7/17 12:38:10

基于Java Springboot高校教务管理系统

一、作品包含源码数据库设计文档万字PPT全套环境和工具资源部署教程二、项目技术前端技术：Html、Css、Js、Vue、Element-ui 数据库：MySQL 后端技术：Java、Spring Boot、MyBatis 三、运行环境开发工具：IDEA/eclipse 数据…...

编程日记 2025/7/24 12:27:04

大数据调度组件之Apache DolphinScheduler

Apache DolphinScheduler 是一个分布式易扩展的可视化 DAG 工作流任务调度系统。致力于解决数据处理流程中错综复杂的依赖关系，使调度系统在数据处理流程中开箱即用。主要特性易于部署，提供四种部署方式，包括Standalone、Cluster、Docker和…...

编程日记 2025/7/24 20:10:55

Python 快速入门（上篇）❖ Python基础知识

Python 基础知识 Python安装**运行第一个程序：基本数据类型算术运算符变量赋值操作符转义符获取用户输入综合案例：简单计算器实现Python安装** Linux安装： yum install python36 -y或者编译安装指定版本：https://www.python.org/downloads/source/ wget https://www.pyt…...

编程日记 2025/7/21 9:22:38

JAVA实现将PDF转换成word文档

POM.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.…...

编程日记 2025/7/21 1:11:31

Python学习29天

二分查找 # 定义函数冒泡排序法从大到小排列 def bbble_sort(list):# i控制排序次数for i in range(len(list) - 1):# j控制每次排序比较次数for j in range(len(list) - 1 - i):if list[j] < list[j 1]:list[j], list[j 1] list[j 1], list[j] # 定义二分查找函数 def…...

编程日记 2025/7/24 18:22:50

FreeSWITCH 简单图形化界面35 - 使用python脚本

FreeSWITCH 简单图形化界面35 - 使用python脚本测试环境1、mod_python编译2、Python编写拨号规则(dialplan)测试一下不带参数带参数 3、使用Python执行freeSWITCH的API测试一下 4、Python执行session API测试一下 5、Python编写聊天规则(chatplan)测试一下 6、Python执行messa…...

编程日记 2025/7/26 8:36:24

基于AIRTEST和Jmeter、Postman的自动化测试框架

基于目前项目和团队技术升级，采用了UI自动化和接口自动化联动数据，进行相关测试活动，获得更好的测试质量和测试结果。...

编程日记 2025/6/27 21:12:27

web-03

CSS回顾选择器标签选择器标签{}ID选择器标签中定义ID属性。 #ID值{}类选择器标签中使用class属性 .类名{}关于DIV/span div任意的大小的长方形，大小css： width, height控制。—换行 span-- 一行内 CSS常用属性 width/height 宽度/高度定义&…...

编程日记 2025/7/25 5:52:24

MySQL 死锁

一、引言在 MySQL 数据库的使用过程中，死锁问题就像一颗隐藏在暗处的 “定时炸弹”，平时可能感觉不到它的存在，但一旦触发，就可能导致数据库事务无法正常推进，严重影响系统的性能和可用性。对于开发人员和数据库管理员…...

编程日记 2025/7/27 6:38:37

M｜大脑越狱

rating: 7.0 豆瓣: 7.6 上映时间: “2015” 类型: M悬疑导演: 约瑟夫怀特 Joseph White 主演: 亚历山大欧文 Alexander Owen爱德华富兰克林 Edward Franklin 国家/地区: 英国片长/分钟: 20分钟 M｜大脑越狱想法不错，但是逻辑比较一般。属于…...

编程日记 2025/7/26 22:52:23

CSS3_媒体查询（十一）

CSS3_响应式布局 1、媒体样式在不同媒体上显示不同的样式。常用阈值： 小于768px：小屏幕；768px-992px：中等屏幕；992px-1200px：大屏幕；大于1200px：超大屏幕。 <!DOCTYPE html>…...

编程日记 2025/7/23 22:18:28

Spring |（四）IoC/DI配置管理第三方bean

文章目录 📚数据源对象管理🐇环境准备🐇实现Druid管理🐇实现C3P0管理 📚加载properties文件🐇第三方bean属性优化🐇读取单个属性学习来源：黑马程序员SSM框架教程_SpringSpringMVCMa…...

编程日记 2025/7/22 11:44:05

uniapp页面样式和布局和nvue教程

尺寸单位

rpx 详细说明：

全局样式与局部样式

CSS变量

<template/> 和 <block/>

Flex 布局

nvue 教程

nvue开发与vue开发的常见区别

样式

nvue 和 vue 相互通讯

uni.$emit(eventName,OBJECT)

uni.$on(eventName,callback)

uni.$once(eventName,callback)

uni.$off([eventName, callback])

Tips

相关文章：

`rpx` 详细说明：

`<template/>` 和 `<block/>`

`Flex` 布局

`nvue`开发与`vue`开发的常见区别

`nvue` 和 `vue` 相互通讯

`uni.$emit(eventName,OBJECT)`

`uni.$on(eventName,callback)`

`uni.$once(eventName,callback)`

`uni.$off([eventName, callback])`