uniapp nvue开发注意事项

摘要:
uni-appApp具有基于Weex改进的内置原生渲染引擎,提供原生渲染功能。应用程序中可以同时使用两种页面。例如,第一个页面使用nvue,第二个页面使用vue页面。hellone应用程序示例就是这样。虽然nvue也可以在多个端编译和输出H5和小程序,但nvue的css编写方法是有限的,因此如果不开发应用程序,就不需要使用nvue。Nvue解决了这个问题,使前端工程师能够直接开发完整的应用程序,并提供丰富的插件生态系统和云打包。同时,uni-app扩展了Weex原生渲染引擎的许多排版功能,并修复了许多错误。

  主要参考官方文档:https://uniapp.dcloud.io/nvue-outline,但是一些常见的问题,自己遇到了,记录下先。

一、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,并提供丰富的插件生态和云打包。这些组合方案,帮助开发者切实的提高效率、降低成本。

  同时uni-app扩展了weex原生渲染引擎的很多排版能力,修复了很多bug。

二、NVUE的一些常见问题

1、字体设置不生效

  发现字体怎么设置都不生效,后来在文档里这样一句话:

只有text标签可以设置字体大小,字体颜色

  所以只能改为这样即可:

<view class="mb12">
  <text class="font14 bold">第{{cp.catalogNo}}章 {{cp.title}}</text>
</view>

  将view里的文字用text包一层即可。突然想起来之前看weex的时候,好像就说了,文字只能写在text标签里

2、背景颜色设置不生效

  设置 background: #f2f6fc; 但是发现怎么都不生效;其实在编译阶段就会有提示 background 不支持之类的

不支持复合样式,不支持简写

  所以改为这样即可:border等之类的样式也是一样的问题

.desc{
  background-color: #f2f6fc;
  border-radius: 8rpx;
  padding: 16rpx 20rpx;
}

3、默认flex布局,并且默认flex-direction:cloumn;

  所以如果你想要 row 形式,则需要写明:flex-direction: row;

4、选择器支持少,只支持class选择器。

  放一张官网注意事项吧:

uniapp nvue开发注意事项第1张

5、文本溢出及多行溢出的问题

  nvue不支持white-space,所以H5端的文本溢出不好使。nvue提供了自己的写法

text-overflow

  text-overflow {string}:设置内容超长时的省略样式。

可选值描述
clip修剪文本
ellipsis显示省略符号来代表被修剪的文本

只支持 textricthext

lines

  lines {number}: 正整数,指定最大文本行数,默认lines值为0,表示不限制最大行数lines。如果文本不够长,实际展示行数会小于指定行数。

  所以这样写即可:

    /* #ifdef APP-PLUS-NVUE */
    .n-nowrap{
        text-overflow: ellipsis;
        lines: 1;
         280px;
    }
    /* #endif */

 

免责声明:文章转载自《uniapp nvue开发注意事项》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇实战IM(即时通讯系统)开发——剖析.NET网络通信、音频、移动平台IM及服务器端编程关于在html 当中,换行的css样式总结下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Linux 软件安装之apt+dpkg工具

Linux软件安装方式 Linux 上的软件安装主要有四种方式: 在线安装 从磁盘安装 deb 软件包 从二进制软件包安装 从源代码编译安装 apt APT 是 Advance Packaging Tool(高级包装工具)的缩写,是 Debian 及其派生发行版的软件包管理器,APT 可以自动下载,配置,安装二进制或者源代码格式的软件包,因此简化了 U...

三款优秀的替代Xshell的SSH软件

在之前的文章介绍个, 由于公司禁止使用xshell, 让我很是难受了一阵, 因为一直无法找到好的工具来替代xshell, 前面文章中提到的那些对我来时功能还是太单一了, 界面也不够友好, 但是经过我不懈的努力和大家的提点, 最终我还是发现了这三款同样优秀的终端工具来替代xshell. 这三款软件就是: terminus, electerm和windter...

开机自启:bat实现一次性打开win7中的常用软件和文件夹

需求说明: 我们电脑(windows)办公,经常上班前一开机,就要手动打开很多文件夹和程序。 想节省时间,一键打开常用的文件夹和程序,研究了一下bat命令,于是mystart.bat产生了。 mystart.bat的本质就是打开各种自定义的Windows应用程序的命令的集合,只要启动mystart.bat,就可以连续打开多个程序。 (一)操作 1、新建文件...

[转]C# 获取硬盘序列号 Volume Serial Number

在做软件注册时,通常用硬盘号(建议用散列后的硬盘号)作为本地电脑特征码,加上用户名以及公司名等其他信息,通过一定的算法,得到软件序列号。这样做的好处的显而易见的。它可以防止一个序列号N多人用的现象。现在有些软件就是一个注册码,在网上公开,全世界人都在用。但是也有相应的缺陷。客户只能在一台电脑上用你写的软件。下面的方法通过Windows API获得硬盘号。...

基于windows server216自带的备份服务windows server backup

Windows Server Backup是系统自带的备份和恢复组件,和Windows Server 2003中的NTbackup类似。相对于其他第三方备份软件,Windows Server Backup由于是系统自带组件,不需要额外购买授权,从而减少IT开支。注意:Windows Server Backup不支持备份到磁带。 Windows Server...

vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题

vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题 vue用hbuilderX打包app就可以了,不过有兼容性问题,转换rem的用不了,嵌入到app的webview里面变得很小了,另外还有返回键监听的问题需要处理,否则按手机上的返回键不起作用,另外缓存问题,加载页跳转白屏问题也需要优化。======================安卓本地打...