如何在uniapp中使用nvue

　　介绍

如何在uniapp中使用nvue ?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

开始创建第一个nvue页面。

目录结构:

如何在uniapp中使用nvue

索引。nvue代码如下:

& lt; template> 　　& lt; div> 　　,,,,,,,& lt; text>{{文本}}& lt;/text> 　　,,,& lt;/div> 　　& lt;/template> 　　& lt; script> 　　export  default  { 　　数据(),{ 　　return  { 　　文本:& # 39;Hello  & # 39; 　　} 　　} 　　} 　　& lt;/script>

如此真机运行可能遇到如下错误:

如何在uniapp中使用nvue

造成这个问题的原因是uni-app项目里必须有一个vue的页面,新建一个vue页面然后重新运行就不会有问题了。

如何在uniapp中使用nvue

图像设置border - radius

在nvue里面不能给图片设置border - radius,想要将矩形图案变为圆形需要在图像外面包一层div,代码如下:

& lt; div 比; 　　,,,& lt; https://www.yisu.com/zixun/image , src=" https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png "> 　　

设置真实像素

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

但是在实际开发过程中可能不想要这样动态的长度单位,此时可以使用weex 1。x版本里面一个长度单位:wx。这个单位就是实际像素单位,虽然weex文档没有提及,但目前任然是可用的,当然随着weex的更新,天气也可能会不再支持。

引入外部的css

在App.vue里写的公用的样式在nvue里是不生效,多个nvue想要使用公用的样式,需要引入外部的css。

由于weex的限制,不能在风格节点下使用@ import“xxx.css"这样的方式引入外部css,需要使用如下方式引入css:

& lt; https://www.yisu.com/zixun/style  src=" @/共同/test.css "> 　　<时尚> 　　test { 　　颜色:# E96900; 　　} 　　

需要注意的是在& lt;风格src=https://www.yisu.com/zixun/" @/共同/test.css "> 节点里写样式是不生效的。

使用ttf字体文件

在nvue或者weex中是不能直接在css中通过@font-face这样的方式引入字体文件的,需要在js中使用dom模块引入字体文件,可参考weex文档:

const  domModule =, weex.requireModule (& # 39; dom # 39;); 　　domModule.addRule (& # 39; fontFace& # 39;,, { 　　,,,& # 39;fontFamily& # 39;:,“iconfont2" 　　,,,& # 39;src # 39;:,“url (http://at.alicdn.com/t/font_1469606063_76593.ttf& & # 39; # 39;)“; 　　});

vue打开nvue时传递参数

由于vue打开nvue时不能在url后携带参数,只能使用存储的方式进行参数传递。

在vue页面打开nvue

uni.setStorageSync(& # 39;测试# 39;,,& # 39;你好# 39;); 　　uni.navigateTo ({ 　　,,,url:“/页/nvue/nvue" 　　})

在nvue页面获得参数,在创造里调用uni-app的api时需要延时一段时间才能调用成功(最新版uni-app框架已经修复此问题,不用延时也可以调用成功)。

& lt; script> 　　,,,export  default  { 　　,,,,,,,()创建的,{ 　　,,,,,,,console.log (“nvue 创建!“); 　　,,,,,,,,,,,setTimeout((),=祝辞,{ 　　,,,,,,,,,,,,,,,uni.getStorage ({ 　　,,,,,,,,,,,,,,,关键:& # 39;测试# 39; 　　,,,,,,,,,,,,,,,,,,,成功:,(res),=祝辞,{ 　　,,,,,,,,,,,,,,,,,,,console.log(“获得上个页面传递的数据,,+,res.data) 　　,,,,,,,,,,,,,,,,,,,} 　　,,,,,,,,,,,,,,,}) 　　,,,,,,,,,,,},200) 　　,,,,,,,} 　　,,,} 　　& lt;/script>

仿微信朋友圈效果

在开发中,有个页面需要做到如微信朋友圈那样效果:整体列表为从上到下排列,每个列表为左右两列,左边为用户头像,右边消息内容。

在开发的时候,首先想到的是父元素使用flex-direction:行;让头像和内容,分别在左右展示。但是出了问题,内容区域的高度不能根据文字的长度而撑开;如果父元素使用上下排列,内容区域的高度就可以被文字所撑开。

出现问题的代码如下:

& lt; template> 　　,,,& lt; div 比; 　　,,,,,,,& lt; div 类=癷tems"比; 　　,,,,,,,,,,,& lt; div 类=癶eadImg"祝辞& lt;/div> 　　,,,,,,,,,,,& lt; div 类=皉gtBox"比; 　　,,,,,,,,,,,,,,,& lt; text>上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容。;/text> 　　,,,,,,,,,,,& lt;/div> 　　,,,,,,,& lt;/div> 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

如何在uniapp中使用nvue