uniapp nvue开发爬坑攻略什么是nvue uni-app文件后缀分，vue与 nvue 两种，渲染机制不同 vu

什么是nvue

就是那种我字母，什么鬼？what？

uni-app文件后缀分，vue与 nvue 两种，渲染机制不同

vue页使用webview渲染

nvue页使用weex原生引擎渲染

如果你不开发App，那么不需要使用nvue

前言

当你看到这个文章的时候，相比心里已经无数遍问候nvue，为什么会有这样一个东东。

讲真它在css设置方面有一些很大的差异。

优先推荐使用弹性盒子布局

默认flex布局，并且默认flex-direction:cloumn;
所以如果你想要 row 形式，则需要写明：flex-direction: row;

选择器支持少，只支持class选择器。

不支持媒体查询

不能再style引入字体

不支持 width：100% 这样

不支持背景图可以使用img

文本换行

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

/* text-overflow: ellipsis 显示省略符号来代表被修剪的文本 */
/* text-overflow: clip 修剪文本 */

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

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

通用

<view class="box center main" /> <!- 错误->
<view class="['box', 'center', 'main']" /> <!- 正确->

<!- 只有text标签可以设置字体大小，字体颜色， 文字只能写在text标签里->
<text class="font14 bold">第{{cp.catalogNo}}章 {{cp.title}}</text>

/* Css 命名 不支持这样*/
.box .text .center{
  color: red
}
/* 下面这样*/
.box{
  color: red
}
.text{
  color: red
}
.center{
  color: red
}

/* 不支持复合样式，不支持简写*/
.desc{
　　background: #f2f6fc; /* 这样是不生效的 */
    border： 1px solid red； /* 这样也不行 */
　　border-radius: 8rpx;
　　padding: 16rpx 20rpx;
}

/* 需要这样 */
.desc{
　　background-color: #f2f6fc;
　　border-radius: 8rpx;
　　padding: 16rpx 20rpx;
}

背景图

// background 相关的都不支持
// 用定位实现背景图
position: absolute;
  left: 0;
  top: 0;
// 注意层级控制 不支持 z-index 靠的是节点的前后顺序
// 图在前 文本在后
  <view :class="['swiper-item-box']">
    <image :class="['conponImg']" :src="conponImg" alt="" />
    <view :class="['swiper-item-content']">
      <text>xxx</text>
    </view>
  </view>

文字类文本类需要使用 text标签注意样式直接定义当前节点上不要定义到父级上不生效

    <!--font-size: 12px; color: red; .....-->
 <text :class="['swiper-item-info-bottom-text']">{{ '平台优惠券优惠券' }}</text>

最后附上阿里Weex开发文档链接

还有如果你的需求真的很变态，给你提供一个思路，使用富文本渲染

<rich-text :nodes="richNodes(item)"></rich-text>

兼容

在 Android 平台，Weex 只支持 overflow:hidden。  
在 iOS 上，Weex 支持 overflow:hidden 和 overflow:visible，默认是 overflow:visible。  
不叫裁剪，这叫超出隐藏，IOS默认overflow:visible

uniapp nvue开发爬坑攻略