uniapp vue和nvue,uniapp中nvue与vue的区别-简书

uniapp vue和nvue,uniapp中nvue与vue的区别-简书,分析uniapp入门之nvue爬坑记

Uni-App的nvue说白了就是weex的那套东西。uni-app集成了weex的SDK,实现了app的原生渲染能力。本文将介绍uniapp遇到的一些坑,分享给大家。

目录

前言Hello Worldimage设置border-radius设置真实像素引入外部css使用ttf字体文件vue打开时传递参数nvue模仿微信朋友圈效果

前言

Uni-app是DCloud出品的新一代跨终端框架,可以说是目前跨终端数量最多的框架之一。目前支持发布到:App(安卓/iOS)、H5、小程序(微信/支付宝/百度/字节跳动)。目前市面上类似的框架有Taro(JD.COM出品)和Megalo(网易出品)。

weex支持的大部分东西nvue都支持,这里就不详细描述weex的相关组件和api调用了,只说实际开发过程中遇到的一些小问题。

Hello World

开始创建第一个nvue页面。

目录结构:

index.nvue代码如下:

模板

差异

文本{ { text } }/文本

/div

/模板

脚本

导出默认值{

data() {

返回{

文本:“你好,世界”

}

}

}

/脚本

这样的真实机器在运行时可能会遇到以下错误:

出现这个问题的原因是uni-app项目中必须有vue页面。如果创建一个新的vue页面,然后重新运行,将不会有任何问题。

image 设置 border-radius

您不能在nvue中设置图像的边框半径。如果你想把矩形图案变成圆形,你需要在图像外面包裹一个div。代码如下:

div style= width:400 px;高度:400px边框半径:400像素;溢出:隐藏;

image style= width:400 px;高度:400像素;src= https://img-cdn-qiniu . d cloud . net . cn/uni app/images/uni @ 2x . png /image

/div

设置真实像素

weex的规格中,长度单位只有一个:px,屏幕总宽度为750px。设置长度后,weex引擎会根据手机屏幕宽度动态计算实际长度,类似于uni-app的upx。

但是,在实际的开发过程中,你可能并不想要这样的动态长度单位。此时,您可以使用WEEX版本1.x中的一个长度单位:wx。这个单位是实际的像素单位。虽然weex文档中没有提到,但是目前还是有的。当然,随着weex的更新,wx可能不再支持。

引入外部的 css

App.vue中写的public样式在nvue中无效。很多NVUEs想使用public风格,需要引入外部css。

由于weex的限制,不能使用style节点下的@import xxx.css 引入外部css。你需要用下面的方法来介绍css:

style src= @/common/test . CSS /style

风格。测试{

颜色:# E96900

}

/风格

注意,在style src= @/common/test . CSS /style节点中编写样式是无效的。

使用 ttf 字体文件

在nvue或weex中,不能通过@font-face直接导入css中的字体文件。你需要使用dom模块来导入js中的字体文件。请参考weex文档:

const DOM module=weex . require module( DOM );

domModule.addRule(fontFace ,{

fontFamily: iconfont2 ,

src : URL( http://at . alicdn . com/t/font _ 1469606063 _ 76593 . TTF )

});

vue 打开 nvue 时传递参数

由于vue在打开nvue时不能在url后携带参数,所以只能通过存储的方式传递参数。

在vue页面打开nvue。

uni.setStorageSync(test , hello );

uni.navigateTo({

URL:“/pages/nvue/nvue”

})

获取nvue页面上的参数。在created中调用uni-app的api时,需要一段时间才能调用成功(最新版本的uni-app框架已经修复了这个问题,不需要延迟就可以调用成功)。

脚本

导出默认值{

已创建(){

console.log(nvue已创建!);

setTimeout(()={

uni.getStorage({

关键:“测试”,

成功:(res)={

Console.log(获取上一页传递的数据 res.data)

}

})

},200)

}

}

/脚本

仿微信朋友圈效果

在开发中,有一个页面需要像微信朋友圈一样有效:整体列表自上而下排列,每个列表有左右两栏,左边是用户头像,右边是消息内容。

开发时,首先想到的是父元素使用flex-direction:row;让头像和内容分别显示在左边和右边。但是出了问题,内容区域的高度无法按照文字的长度拉伸;如果父元素上下排列,内容区域的高度可以由文本扩展。

问题的代码如下:

模板

div style= background-color:# CCC;

div class=items

div class=headImg/div

div class=rgtBox

文字上下排列,上下排列,上下排列,上下排列,上下排列,上下排列,上下排列,上下排列,上下排列,上下排列,上下排列,上下排列,上下排列,上下排列,上下排列。/text

/div

/div

div class= items style= flex-direction:row;

div class=headImg/div

div class= rgt box style= flex:1;

文字打不开内容,内容,内容,内容,内容,内容,内容,内容,内容,内容,内容,内容,内容,内容,内容,内容,内容,内容/文字

/div

/div

/div

/模板

脚本

导出默认值{

}

/脚本

风格。项目{

背景色:# fff

边距-底部:50px

}。标题{

宽度:100px

高度:100px

背景色:# 555;

}。rgtBox {

背景色:# fff

}

/风格

这个问题应该是weex的bug。设置了左元素的高度后,如果没有设置右元素的高度,其最大高度就是左元素的高度。解决方法是上下排列头像和内容,然后设置内容区域的边距-左侧、边距-顶部和最小高度,达到类似的效果。

代码如下:

模板

div style= background-color:# CCC;伸缩方向:列;

div class=item

div class=headImg/div

div class=rgtBox

短文,短文/短文

/div

/div

div class=item

div class=headImg/div

div class=rgtBox

这里是长文,这里是长文,这里是长文,这里是长文,这里是长文,这里是长文,这里是长文,这里是长文,这里是长文,这里是长文,这里是长文,这里是长文,这里是长文,这里是长文, 这是一篇长文,这是一篇长文,这是一篇长文,这是一篇长文,这是一篇长文,这是一篇长文,这是一篇长文,这是一篇长文,这是一篇长文。

/div

/div

/div

/模板

脚本

导出默认值{}

/脚本

风格。项目{

背景色:# fff

边距-底部:50px

}。标题{

宽度:100px

高度:100px

背景色:# 555;

}。rgtBox {

宽度:600px

最小高度:100px

左边距:130px

边距-顶部:-100px;

背景色:# fff

}

/风格

以上是分析uniapp entry的nvue的爬坑笔记的详细内容。更多关于uniapp entry的nvue的爬坑笔记,请关注我们的其他相关文章!

uniapp vue和nvue,uniapp中nvue与vue的区别-简书