uniApp 开发nvue页面踩过的坑

• 开发nvue页面踩过的坑

1. nvue页面不能使用背景图片
2. 布局不能使用百分比、没有媒体查询
3. 背景颜色不支持简写，准确写法：background-color: red;
4. nvue中不支持z-index控制层级，越靠后的代码层级越高
5. 不能使用阴影，可以使用模拟阴影
6. 子元素超出父元素大小是不会显示的，可以加大父元素的大小来让子元素显示
7. nvue的css，在选择器方面支持的较少，只支持简单的类名控制class=“classA”
8. 文字内容，必须、只能在text标签下,只有text标签可以设置字体大小，字体颜色，并且不支持text标签嵌套
9. nvue 页面只能使用 flex 布局，不支持其他布局方式，布局排列方向默认为竖排（column），如需改变布局方向可以使用flex-direction: row;改变为横排
10. 边框不支持简写，准确写法：

 	border-width: 1px;
	border-style: solid;
	border-color: red; 

11. 在 nvue 里面不能给 image 设置 border-radius，想要将矩形图案变为圆形需要在 image 外面包一层 div，代码如下：

    <div style="width: 400px;height: 400px;border-radius: 400px;">
   	   <image style="width: 400px;height: 400px;" src="https://uni@2x.png"></image>
    </div>

12. 在 nvue 里面不能在 style 节点下使用 @import “xxx.css” 这样的方式引入外部 css，需要使用如下方式引入 css：

 	<style src="@/common/test.css"></style>

13. 在 nvue 里面不能直接在css中 通过 @font-face 这样的方式引入字体文件的，需要在js中使用 dom 模块引入字体文件,src字段的url的括号内一定要使用单引号

 	const domModule = weex.requireModule('dom');
   	domModule.addRule('fontFace', {
   		'fontFamily': "iconfont",
   		'src': "url('../../static/iconfont.ttf')"
   	});