uniapp的nvue是什么

什么是nvue

uni-app App 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。

在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染。一个 App 中可以同时使用两种页面，比如首页使用 nvue，二级页使用 vue 页面，hello uni-app 示例就是如此。
说人话就是 uniapp 内置了weex,当你的页面以nvue结尾时,在app端,会以这个页面为准保证了高性能
即,在中国是中国人,在美国就是美国人
如下
我在我的项目中有index.nvue与index.vue两个同名文件
在这里插入图片描述
index.vue内页面内容是这个(不用管代码)
在这里插入图片描述

用uniapp运行到浏览器是这个样子,这个大家都知道
在这里插入图片描述

然后我还有uniapp.nvue这个页面,这个页面是当使用安卓渲染的时候,就会使用这个页面
nvue界面长这样,

在这里插入图片描述
当使用安卓模拟器时,就加载nvue界面了

在这里插入图片描述

大致了解了nvue用来干嘛的之后,再来看下面的weex编译模式和uni-app模式的区别

weex编译模式与uniapp编译模式区别

weex 的组件和 JS API，与 uni-app 不同。uni-app 与微信小程序相同。

考虑到 weex 用户的迁移，uni-app 也支持 weex 的代码写法。在 manifest.json 中可以配置使用weex 编译模式或uni-app 编译模式。选择 weex 编译模式时将不支持 uni-app 的组件和 jsapi，需要开发者参考 weex 官方文档的写法来写代码。 比如 weex 编译模式用

。uni-app 编译模式则使用。

一般情况建议使用uni-app模式，除非历史 weex 代码较多，需要逐步过渡。同时注意 weex 编译模式的切换是项目级的，不支持同项目下某个 nvue 页面使用 weex 模式，另一个 nvue 页面使用 uni-app 模式。

\weex 编译模式uni-app 编译模式
平台仅 App所有端，包含小程序和 H5
组件weex 组件如 divuni-app 组件如 view
生命周期只支持 weex 生命周期支持所有 uni-app 生命周期
JS APIweex API、uni API、Plus APIweex API、uni API、Plus API
单位750px 是屏幕宽度，wx 是固定像素单位750rpx 是屏幕宽度，px 是固定像素单位
全局样式手动引入app.vue 的样式即为全局样式
页面滚动必须给页面套或组件默认支持页面滚动

在 manifest.json 中修改 2 种编译模式，manifest.json -> app-plus -> nvueCompiler 切换编译模式。

nvueCompiler 有两个值：

weex
uni-app

// manifest.json
{// ...// App平台特有配置"app-plus": {"nvueCompiler":"uni-app" //是否启用 uni-app 模式}
}

在 manifest.json 配置文件中，HBuilderX2.4 之前版本，默认值为 weex 模式，HBuilderX2.4+版本默认值改为 uni-app 模式。

原生开发没有页面滚动的概念，页面内容高过屏幕高度时，内容并不会自动滚动；只有将页面内容放在list、waterfall、scroll-view/scroller这几个组件下内容才可滚动。这不符合前端开发的习惯，所以在 nvue 编译为 uni-app模式时，uni-app框架会给 nvue 页面外层自动嵌套一个 scroller，从而实现页面内容的自动滚动。

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/627171.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深入解析JavaScript中new Function语法

深入解析JavaScript中new Function语法

🧑‍🎓 个人主页：《爱蹦跶的大A阿》 🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 Function是JavaScript中非常重要的内置构造函数,可以用来动态创建函数…
阅读更多...
WebGIS开发者入门

WebGIS开发者入门

WebGIS开发者入门第一章 前言一、开发技能掌握二、gis开发方向1.桌面gis2.webgis3.移动gis 总结 前言 开发方向 最近，地理信息系统(GIS)的开发与应用越来越多的倾向于Web端，Web端开发确实比以C# ArcGIS Engine为代表的C/S开发更具优势，而且可…
阅读更多...
springboot网关添加swagger

springboot网关添加swagger

添加依赖 <dependency><groupId>com.spring4all</groupId><artifactId>swagger-spring-boot-starter</artifactId><version>2.0.2</version></dependency>添加配置类&#xff0c;与服务启动类同一个层级 地址&#xff1a;http…
阅读更多...
基于云平台技术如何降低整车的能耗浅谈

基于云平台技术如何降低整车的能耗浅谈

云平台技术可以通过多种方式降低整车的能耗&#xff1a; 智能监测&#xff1a;通过物联网技术&#xff0c;实时监测车辆的运行状态和设备状况&#xff0c;如电池电量、发动机性能、车速等。这种实时的数据反馈可以帮助驾驶员或系统更有效地管理车辆的运行&#xff0c;避免不必…
阅读更多...
十大必备功能：打造高效知识库的关键因素

十大必备功能：打造高效知识库的关键因素

一个好的产品知识库应该成为客户了解产品功能、解决故障和满足产品相关查询的重要资源。但如果没有合理地维护和更新&#xff0c;其可能就失去了存在的价值。 知识库的有效性取决于其包含的信息是否全面、准确和实用。而要实现这一点&#xff0c;需要关注一些关键功能。 以人…
阅读更多...
JAVA代码学习(上)

JAVA代码学习(上)

2023年将会持续于B站、CSDN等各大平台更新&#xff0c;可加入粉丝群与博主交流:838681355&#xff0c;为了老板大G共同努力。 【商务合作请私信或进群联系群主】 二、JAVA基本程序设计结构 2.1 需要学习 1.一个简单的JAVA应用程序了解 2.注释 3.数据类型 4.变量与常量 5.运算…
阅读更多...
go中如何进行单元测试案例

go中如何进行单元测试案例

一. 基础介绍 1. 创建测试文件 测试文件通常与要测试的代码文件位于同一个包中。测试文件的名称应该以 _test.go 结尾。例如&#xff0c;如果你要测试的文件是 math.go&#xff0c;那么测试文件可以命名为 math_test.go。 2. 编写测试函数 测试函数必须导入 testing 包。每…
阅读更多...
大模型LORA微调总结

大模型LORA微调总结

大模型LORA微调总结 大模型微调总结模型加载使用deepspeed不使用deepspeed使用lora加载分词器 数据加载构建source和target构建input_ids和labels标签补齐构建训练器LORA模型推理模型加载多batch推理构建lora微调推理合并模型权重 大模型微调总结 模型加载 使用deepspeed mod…
阅读更多...
2024年甘肃省职业院校技能大赛信息安全管理与评估 样题一 理论题

2024年甘肃省职业院校技能大赛信息安全管理与评估 样题一 理论题

竞赛需要完成三个阶段的任务&#xff0c;分别完成三个模块&#xff0c;总分共计 1000分。三个模块内容和分值分别是&#xff1a; 1.第一阶段&#xff1a;模块一 网络平台搭建与设备安全防护&#xff08;180 分钟&#xff0c;300 分&#xff09;。 2.第二阶段&#xff1a;模块二…
阅读更多...
一文让你对mysql索引底层实现明明白白

一文让你对mysql索引底层实现明明白白

开篇&#xff1a; 图片是本人随笔画的&#xff0c;有点粗糙&#xff0c;望大家谅解&#xff0c;如有不对的地方&#xff0c;请联系我们&#xff0c;感谢 一、索引到底是什么 .索引是帮助mysql高效获取数据的排好序的数据结构 .索引是存储在文件里的 .数据结构&#xff1a; 二…
阅读更多...
微信小程序怎么引入webview的url是本地的路径

微信小程序怎么引入webview的url是本地的路径

当微信小程序访问类似http://10.27.0.15:8065/#/my这样的地址的时候会出问题。但是我们也不能每次把写的H5的代码发布在看效果啊&#xff1f; 只需要修改一个地方就可以啦。
阅读更多...
Transformer 位置编码

Transformer 位置编码

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…
阅读更多...
LLM（十）| Tiny-Vicuna-1B：Tiny Models轻量化系列Top One

LLM（十）| Tiny-Vicuna-1B：Tiny Models轻量化系列Top One

在过去的一年里&#xff0c;见证了LLM的蓬勃发展&#xff0c;而模型的参数量也不断刷新记录&#xff0c;在2023年下半年&#xff0c;外界传言GPT-4是一个专家混合模型。因此&#xff0c;如果你想用人工智能做点什么&#xff0c;你需要IBM或NASA类似的计算能力&#xff1a;你怎么…
阅读更多...
JAVA进化史: JDK16特性及说明

JAVA进化史: JDK16特性及说明

JDK 16于2021年3月发布。这个版本引入了一些新特性和改进&#xff0c;以下是其中一些主要特性 JEP 338: 引入了向量API&#xff08;Vector API&#xff09; 引入了向量API&#xff08;Vector API&#xff09;&#xff0c;这是一个孵化器特性&#xff0c;用于提供更好地利用硬…
阅读更多...
openharmony 编译LLVM编译器基础架构

openharmony 编译LLVM编译器基础架构

1. 编译库地址 third_party_llvm-project: 管理员 liwentao_uiw dhy308 huanghuijin 2. 编译方法 git clone https://gitee.com/openharmony/third_party_llvm-project.gitcd third_party_llvm-projectmkdir buildcd buildcmake -G Ninja -DCMAKE_BUILD_TYPERelease ../llvm …
阅读更多...
纯c++简易的迷宫小游戏

纯c++简易的迷宫小游戏

一个用c写的黑框框迷宫 适合新手入门学习 也适合大学生小作业 下面附上代码 总体思路 初始化游戏界面&#xff1a;设置迷宫的大小&#xff08;WIDTH和HEIGH&#xff09;&#xff0c;生成迷宫地图&#xff08;map&#xff09;&#xff0c;包括墙壁、空地、起点和终点。显示…
阅读更多...
3、python布尔类型和条件表达式

3、python布尔类型和条件表达式

使用布尔值进行分支逻辑！ 文章目录 1.布尔类型1.1比较运算1.2组合布尔值2.条件语句2.1布尔转换1.布尔类型 Python有一种称为bool的变量类型。它有两个可能的值：True和False。 In [1]: x = True print(x) print(type(x)) True <class bool>除了直接在代码中使用True或…
阅读更多...
【K12】Python写串联电阻问题的求解思路解析

【K12】Python写串联电阻问题的求解思路解析

问题源代码 方法&#xff1a;calculate_circuit_parameter 构造题目&#xff1a; 模板&#xff1a; 已知电阻R1为 10Ω&#xff0c;电阻R2为 5Ω&#xff0c;电压表示数为2.5V&#xff0c;求电源电压U&#xff1f; 给合上面题目&#xff0c;利用Python程序&#xff0c;可以任…
阅读更多...
LeetCode 76.最小覆盖子串Java

LeetCode 76.最小覆盖子串Java

题目链接 这个是滑动窗口问题比较难的了&#xff0c;不太好想。 我借鉴了这个大佬的思想&#xff0c;用更容易理解的方式实现了一下&#xff0c;可能时间复杂度有点提高。 代码搭配详解使用&#xff1a;题解 这个是我的题解 class Solution {public String minWindow(String …
阅读更多...
【论文笔记合集】卷积神经网络之深度可分离卷积（Depthwise Separable Convolution）

【论文笔记合集】卷积神经网络之深度可分离卷积（Depthwise Separable Convolution）

本文作者&#xff1a; slience_me 我看的论文地址&#xff1a;MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications 内容 1. 标准卷积 假设输入为DFDFM&#xff0c;输出为输入为DFDFN&#xff0c;卷积核为DKDKM&#xff0c;共有N个卷积核进…
阅读更多...
最新文章

Copyright @ 2022~2023