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的爬坑笔记，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。