DCloud_UNI_HT
DCloud_UNI_HT
  • 发布:2019-06-28 11:53
  • 更新:2019-08-13 13:30
  • 阅读:4323

nvue不同编译模式介绍

分类:uni-app

HBuilderX2.0.3+ Alpha 版本开始,nvue文件同时支持两种编译模式:

  • weex 模式:老模式,使用 weex组件,写法同weex标准写法。只能在 App 端中运行,部分 uni-app Api 不能使用。如果没有配置,默认是weex模式。
  • uni-app 模式:新模式,改用 uni-app 基础组件,写法同uni-app。目前已支持大部分组件;支持app.vue里的全局样式;支持nvue页面编译H5和小程序端;可以使用绝大部分 uni-app Api 。uni-app模式也可以使用weex里的组件,比如list、refresh、recircle-list。目前这些组件只有weex端才有,后续官网会把这些uni-app缺少的组件移植到其他端,比如小程序和H5。

为什么要提供2个模式?

weex模式的组件、渲染机制是weex官方维护的。它的渲染性能其实与react native是一样的,在性能体验方面足以应付一线互联网公司的苛求。但它有4个问题:

  1. 内置组件较少,或不完善。与小程序的组件相比,weex缺少太多内置组件,比如picker、map。而video等weex已内置的组件,也不够强大
  2. API缺失严重。因为weex只是个渲染器,它调用设备能力或push等三方sdk,都需要原生开发。
  3. 周边生态不完善。weex生态没有什么好的组件和模板。而uni-app的插件市场里众多优秀的组件和模板又无法用于nvue。
  4. nvue无法多端开发,只能用于app。开发者在多端需要维护多套代码。
  5. weex的排版思路和uni-app的vue差异有点多。比如weex不支持upx。我们希望使用原生渲染,但尽可能多的兼容开发者的习惯。

weex的第二个问题,即能力问题,uni-app通过给nvue补充uni API和plus API,得到了解决。
但剩下的几个问题,需要uni-app的新编译模式才能解决。
我们要把小程序的所有组件,在weex的原生渲染机制上,重新实现一遍,让小程序的组件可以直接用原生来渲染。然后包括uni ui等扩展组件也都将兼容nvue。
现在插件市场的新闻模板,已经支持nvue新编译模式,它可以一套代码编译到App、小程序、H5全端。并且在App上是原生渲染的高性能体验。

之所以仍然存在weex模式,一是为了向下兼容,之前已经使用nvue的weex模式开发的app,不会因为HBuilderX的升级而导致页面错乱;二是为了方便weex的老用户迁移。

但后续,uni-app的发展方向是强化和改进nvue的uni-app编译模式。

注意nvue的uni-app编译模式,仍然是要求写nvue文件。

配置方式--uni-app编译模式或weex编译模式

manifest.json 的源码视图里配置是切换模式, manifest.json -> app-plus -> nvueCompiler 切换编译模式。

nvueCompiler 有两个值:

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

差异说明

组件差异

在老的 weex 模式中,我们使用的是 weex组件 遵循的是 weex规范,如果使用 nvue 页面将不能跨端开发,仅能在 App 端运行。如果跨端那么意味着要实现vue 页面和 .nvue 页面两套代码。

代码示例

<template>  
    <div>  
        <text>测试页面</text>  
    </div>  
</template>  

而在 uni-app 模式中,我们将可以在 weex 组件的基础上使用 uni-app 的基础组件,目前已支持部分组件,并支持 .nvue 页面编译到 H5 和小程序端。

代码示例

<template>  
    <div>  
        <text>测试页面</text>  
    </div>  
</template>  

nvue的uni-app编译模式组件使用注意

nvue新模式的组件支持是一个分期分批的过程,目前还未支持的组件清单是:多列picker、canvas、movable-view、editor、navigator、label。
在需要这些组件时,请使用vue页面。

已支持组件的使用注意事项: 组件 注意事项
view
text 文字尽量写在text节点,非text节点的文字无法自动更新
rich-text nodes 属性只支持节点列表不支持 HTML String
web-view 必须指定高度,不支持页面通讯和网页内使用Plus API 。但在nvue里可以使用plus.webview.create来创建webview。这样的webview能力上更强大,但注意和原页面会有层级问题
barcode 这是一个nvue独有的新增组件,用于自定义扫码,示例代码见下
<template>  
    <view>  
        <barcode id='1' class="barcode" autostart="true" ref="barcode" background="rgb(0,0,0)" frameColor="#1C86EE" scanbarColor="#1C86EE" :filters="fil" @marked="success1" @error="fail1"></barcode>  
        <button class="btn" @click="toStart">开始扫码识别</button>  
        <button class="btn" @click="tocancel">取消扫码识别</button>  
        <button class="btn" @click="toFlash">开启闪光灯</button>  
        <button class="btn" @click="toscan">预览</button>  
    </view>  
</template>  
<script>  
    export default {  
        onLoad() {  

        },  
        data: {  
            fil: [0, 2, 1]  
        },  
        methods: {  
            success1(e) {  
                console.log("success1:" + JSON.stringify(e));  
            },  
            fail1(e) {  
                console.log("fail1:" + JSON.stringify(e));  
            },  
            toStart: function() {  
                this.$refs.barcode.start({  
                    conserve: true,  
                    filename: '_doc/barcode/'  
                });  
            },  
            tocancel:function(){  
                this.$refs.barcode.cancel();  
            },  
            toFlash: function() {  
                this.$refs.barcode.setFlash(true);  
            },  
            toscan: function() {  
                console.log("scan:");                 
                const barcodeModule = uni.requireNativePlugin('barcodeScan');  
                barcodeModule.scan("/static/barcode1.png"  
                ,(e)=>{  
                    console.log("scan_error:"+JSON.stringify(e));  
                });  
            }  
        }  
    }  
</script>  
<style>  
    .barcode {  
        width: 750rpx;  
        height: 700rpx;  
        background-color: #808080;  
    }  
    .btn {  
        top: 20rpx;  
        width: 730rpx;  
        margin-left: 10rpx;  
        margin-top: 10rpx;  
        background-color: #458B00;  
        border-radius: 10rpx;  
    }  
</style>  

默认页面滚动差异

weex 模式中,我们需要页面滚动,必须使用 <list> 组件或者 <scroller> 组件,这与我们开发小程序或者 web 的习惯并不符合。而在 uni-app 模式中,则可以像 vue 页面一样方便开发,不需要去声明额外的组件进行滚动,只要页面内容高度高于屏幕,就会自动滚动。实际上,在新模式里自动给每个nvue页面的根下套了一个scroller。

单位差异

weex的px是动态单位,并且不支持upx。这与uni-app的设计不符。
在新模式中,upx和px分别是动态单位和静态单位,与vue的设计一样。

Tips

注意事项

API 注意事项

.nvue 支持大部分 uni-app API详情

css 注意事项

.nvue 中,有些 css 样式需要注意,与 web 开发中样式写法会有区别。

1、只有text标签可以设置字体大小,字体颜色
2、布局不能使用百分比
3、只能使用 class 选择器


/* 错误 */  
#id {}  
.a .b .c {}  
.a > .b {}  

/* 正确 */  
.class {}  

4、border 不支持简写


/* 错误 */  
.class {  
    border: 1px red solid;  
}  

/* 正确 */  
.class {  
    border-width: 1px;  
    border-style: solid;  
    border-color: red;  
}  

5、background 不支持简写

/* 错误 */  
.class {  
    background: red;  
}  

/* 正确 */  
.class {  
    background-color: red;  
}  

6、.nvue 页面的布局排列方向默认为竖排(column),如需改变布局方向,可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改,仅在 uni-app 模式下生效。 详情
7、nvue的uni-app编译模式下,App.vue 中的样式,会编译到每个 nvue文件。非uni-app编译模式不会。对于共享样式,如果有不合法属性控制台会给出警告,可以通过条件编译屏蔽 App 中的警告。

/* 错误 */  
/*  控制台警告:WARNING: `border` is not a standard property name (may not be supported)  */  
.class {  
    border: 1px red solid;  
}  

/* 正确 */  
.class {  
    border-width: 1px;  
    border-style: solid;  
    border-color: red;  
}  

默认逻辑

manifest.json 配置文件中,未明确指定编译模式(即未配置app-plus -> nvueCompiler),则默认为 weex 模式。这是为了向下兼容。

nvue编译为H5、小程序时注意

nvue页面编译为H5、小程序时,会做一件css默认值对齐的工作。
因为weex布局只支持flex,并且默认flex方向是垂直。而H5和小程序端,使用web渲染,web默认不是flex,并且设置display:flex后,它的flex方向默认是水平的。
所以nvue编译为H5、小程序时,会自动把页面默认布局设为flex、方向为垂直。当然开发者手动设置后会覆盖默认设置。

8 关注 分享
DCloud_HB_WDL MixR SimpleJalon asdadad啊的 1606726660@qq.com GUNDAM 303891863@qq.com sonicsunsky@qq.com

要回复文章请先登录注册

chenghaiqi@vip.qq.com

chenghaiqi@vip.qq.com

回复 GUNDAM:
我的也乱
2019-08-13 13:30
xiaoxem

xiaoxem

使用nvueCompiler:uni-app 模式时,ios 离线打包出现问题。打包时并无报错,可以安装启动,但是启动后首页一片空白。查看xcode日志,并无缺少依赖包的提示等错误信息。
而android版本正常。
nvueCompiler退回使用weex后,ios恢复正常。
请问可能是啥原因,怎么排查?
2019-08-08 21:55
630033903@qq.com

630033903@qq.com

nvue的uniapp模式input居然不支持 v-model
2019-08-02 18:20
540721116@qq.com

540721116@qq.com

回复 540721116@qq.com:
安卓7版本不会闪退,安卓9版本闪退
2019-07-31 17:14
540721116@qq.com

540721116@qq.com

更新hbuliderX到2.1.3之后 真机调试uni-app闪退,但是1.9.9版本不会闪退,请问下是什么情况
2019-07-31 17:14
指尖上的代码

指尖上的代码

新闻/资讯类App模板。 这个模板有bug,我是一加6手机 运行这个dome的时候第一次运行打开底部有一个白块遮挡,滚动条也不会通过这个地方。代码上不需要做任何修改,Ctrl+s保存一下,重新编译之后就好了,那个地方的大小感觉刚刚和上拉加载更多的动画提示区域一样大。。。
2019-07-20 23:57
1603233489@qq.com

1603233489@qq.com

新闻/资讯类App模板中的多标签拖拽,在安卓上下拉加载超过150条数据左右就开始变得非常卡
2019-07-19 14:12
dongxs@hisen.com

dongxs@hisen.com

nvue实现列表窗口时,列表中<text>的高度不会随内容自动增长,内容会被切掉
2019-07-17 15:07
GUNDAM

GUNDAM

Hbuilder alpha 2.0.4 nvue父子页面 父向子页面传值无效 为undefined
2019-07-09 16:19
GUNDAM

GUNDAM

回复 DCloud_UNI_HT:
Error: [JS Framework] Failed to receiveTasks, instance (2) is not available.最新hbuilderx alpha2.0.4版 nvue写了input报错
2019-07-09 13:38
GUNDAM

GUNDAM

Error: [JS Framework] Failed to receiveTasks, instance (2) is not available.最新hbuilderx alpha版 nvue写了input报错
2019-07-09 13:38
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 GUNDAM:
注意文章中的 css 注意事项,nvue 的样式 遵循weex 的样式规范,与正常 web 开发样式还是有区别的,注意一下hx控制台的警告,不支持的样式会警告。
2019-07-09 09:09
GUNDAM

GUNDAM

今天试了下nvue样式和小程序端差距很大 按照weex要求写的样式 编译到小程序没啥问题 但编译到app样式就都乱了!weex编译模式为uniapp
2019-07-08 19:50
DCloud_heavensoft

DCloud_heavensoft

回复 GUNDAM:
支持globalData
2019-07-08 17:07
GUNDAM

GUNDAM

还想个问题 界面现在能做到nvue编译到小程序或h5 那挂载在vue原型链上的方法 nvue是否能访问到 或者官方会支持类似原生小程序的全局变量类似的东西 能打通js层的作用域 访问到 因为商业开发一般会对官方uni类似的原生api进行js层的二次封装 统一调用
2019-07-07 10:56
710529585@qq.com

710529585@qq.com

如果可能,建议你们和weex合作开发
2019-07-07 00:24
710529585@qq.com

710529585@qq.com

这个方向完全正确,坚决支持,既兼顾了app的性能也兼顾了其他端兼容性!辛苦啦
2019-07-07 00:22
1606726660@qq.com

1606726660@qq.com

回复 asdadad啊的:
牛批!牛批!
2019-07-04 10:03
1606726660@qq.com

1606726660@qq.com

非常nice 如果能把css在提取出来用postcss编译一下那就更完美了。就完全没有这么多限制了
2019-07-04 10:02
asdadad啊的

asdadad啊的

我说一句牛逼,大家没意见吧
2019-07-04 09:44
934520217@qq.com

934520217@qq.com

啥都不说。。牛逼。顶下
2019-07-01 15:24