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语法

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

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

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

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

一. 基础介绍 1. 创建测试文件 测试文件通常与要测试的代码文件位于同一个包中。测试文件的名称应该以 _test.go 结尾。例如,如果你要测试的文件是 math.go,那么测试文件可以命名为 math_test.go。 2. 编写测试函数 测试函数必须导入 testing 包。每…

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

竞赛需要完成三个阶段的任务,分别完成三个模块,总分共计 1000分。三个模块内容和分值分别是: 1.第一阶段:模块一 网络平台搭建与设备安全防护(180 分钟,300 分)。 2.第二阶段:模块二…

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

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

Transformer 位置编码

✅作者简介:人工智能专业本科在读,喜欢计算机与编程,写博客记录自己的学习历程。 🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心&…

LLM(十)| Tiny-Vicuna-1B:Tiny Models轻量化系列Top One

在过去的一年里,见证了LLM的蓬勃发展,而模型的参数量也不断刷新记录,在2023年下半年,外界传言GPT-4是一个专家混合模型。因此,如果你想用人工智能做点什么,你需要IBM或NASA类似的计算能力:你怎么…

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

一个用c写的黑框框迷宫 适合新手入门学习 也适合大学生小作业 下面附上代码 总体思路 初始化游戏界面:设置迷宫的大小(WIDTH和HEIGH),生成迷宫地图(map),包括墙壁、空地、起点和终点。显示…

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

问题源代码 方法:calculate_circuit_parameter 构造题目: 模板: 已知电阻R1为 10Ω,电阻R2为 5Ω,电压表示数为2.5V,求电源电压U? 给合上面题目,利用Python程序,可以任…

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

本文作者: slience_me 我看的论文地址:MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications 内容 1. 标准卷积 假设输入为DFDFM,输出为输入为DFDFN,卷积核为DKDKM,共有N个卷积核进…

LeetCode刷题---随机链表的复制

解题思路: 使用哈希表来解决该问题 因为题中要求是深拷贝 首先对原链表遍历,将原链表每个节点和新链表每个节点形成对应关系,存入到哈希表中,key为原链表的节点,value为新链表的节点。 之后重置辅助链表指向原链表头节…

墨刀原型-实现轮播图功能

在墨刀中实现轮播图效果,可以按照以下步骤进行操作: 1.添加轮播图组件:在墨刀的组件面板中,找到轮播图组件并将其拖拽到画布上。 2.上传轮播图:在右侧的属性面板中,你可以上传你的轮播图图片。点击“”按钮…

动态pv(nfs方式挂载)

1、定义 发布pvc之后可以生成pv,还可以在共享服务器上直接生成挂载目录 pvc直接绑定和使用pv 2、动态pv依赖两个组件 (1)provisioner卷插件:k8s本身支持的动态pv创建不包括nfs,需要声明和安装一个外部插件provisio…

NET Core发布 HTTP Error 500.31 - Failed to load ASP.NET Core runtime

记录一下踩过的坑: 首先,不论是500.31还是500.30 ,首先确保安装了三个文件 1.NET Core RunTime 2.NET SDK 3.NET Hosting 其次,确保三个文件的版本一致,如下: 要装就统一装同一个大版本,不要东…

Linux第28步_编译“修改正点原子TF-A源码中的Makefile并编译生成新的TF-A 固件”

了解学习内容: 1)、正点原子STM32MP157开发板使用的主控型号是STM32MP157DAA1; 2)、“linux /atk-mp1/atk-mp1/alientek_tf-a/tf-a-stm32mp-2.2.r1”目录下的文件是正点原子STM32MP157D开发板的“TF-A源码”。 3)、“linux /atk-mp1/atk-mp1/alientek…

后台生成随机验证码验证登录

web get请求获取图片 <div class"p2"><img id"imgId" src"/get/code"><a href"#">看不清&#xff0c;换一张</a> </div> 后台代码: /*获取动态验证码*/ ResponseBody RequestMapping(value "/…

【MATLAB源码-第113期】基于matlab的孔雀优化算法(POA)机器人栅格路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 POA&#xff08;孔雀优化算法&#xff09;是一种基于孔雀羽毛开屏行为启发的优化算法。这种算法模仿孔雀通过展开其色彩斑斓的尾羽来吸引雌性的自然行为。在算法中&#xff0c;每个孔雀代表一个潜在的解决方案&#xff0c;而…

人工智能专业必须需要考哪些证书呢?

我们来看看2024年人工智能专业的企业和个人都在紧张报考的两项AI认证证书报考&#xff1a; 为进一步贯彻落实中共中央印发《关于深化人才发展体制机制改革的意见》和国务院印发《关于“十四五”数字经济发展规划》等有关工作的部署要求&#xff0c;深入实施人才强国战略和创新驱…

Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)

专栏系列&#xff1a;Django学习教程 前言 highchart&#xff0c;国外。 echarts&#xff0c;国内。 本项目集成 hightchart和echarts图表库实现数据统计功能。 包括&#xff1a;折线图&#xff0c;柱状图&#xff0c;饼图和数据集图。 效果图 echats Highcharts 源代码…

程序员如何保持竞争力

在程序员的职业生涯中&#xff0c;保持竞争力是非常重要的&#xff0c;因为技术行业不断发展和变化。以下是一些建议&#xff0c;可以帮助程序员保持竞争力&#xff1a; 持续学习新技术和编程语言&#xff1a;技术行业的发展非常快&#xff0c;新的编程语言和技术不断涌现。作为…