使用Uniapp做了一个App,感觉性能不是很好,了解过Uniapp的Nvue,就想做一个纯Nvue项目,其实基本就是做一个Weex项目,不得不说坑是真的多,但是渲染性能真的是没得比
本项目开发环境为 UNIAPP 的 纯NVUE 项目,与WEEX有不同之处
https://github.com/WindrunnerMax/SW
每个节点自动设置为flex,无需再次显示声明,且flex为唯一布局方式
flex默认方向为纵向,与Web默认不同,需手动声明为横向 flex-direction: row;
使用align-items: center;justify-content: center;/* flex为横向为例 */
进行居中
建议阅读http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
使用 flex: 1;
可以将父容器填充满
<text></text>
中使用color: #aaa;font-size: 15px;
等样式仅在<text></text>
中生效Weex不支持page选择器,也没有page样式,page.json中设置backgroundColor也无效
只能弯道超车设置整体页面颜色,但是效果并不是特别好
注意这是Uniapp的Nvue方式
此外,直接在 .page 设置 flex:1 , 并将 class="page" 赋予根节点,可以将页面扩充至满屏,但也会导致页面无法滚动
官方机器人给予了更好的解决方案
此外一个坑,Nvue不支持全局组件,每个页面需要的组件必须在页面单独引入
Weex 针对长度单位,支持 px 和 wx 作为长度单位,不支持相对单位(em,rem,pt,%)
Uniapp编译模式,rpx是以750宽屏幕为基准的动态单位,px则是固定像素单位
750rpx是Uniapp中Nvue的满屏基准,是需要编译模式为Uniapp,区别于Weex编译模式
除了固定大小的图片等,直接使用 flex 就可以完成布局,注意使用flex:1;
不支持 display 属性
不能使用 display:none; 来控制元素的显隐性
v-show 条件渲染是不生效的,使用 v-if 代替
<web />
是weex支持的webview组件,加载完成后显示HTML<web-view />
是uniapp支持的webview组件,webview-styles属性不支持flex: 1;
来设置填充满屏幕<web />
阻断了下载与打开其他应用事件