weexNative

样式需要注意的：

1.weex 项目中，将一个元素宽设为 750px，就代表宽占满屏幕宽度，不管是用什么分辨率的屏幕，
weex 会根据基于 750 像素宽自动调整尺寸适应不同分辨率屏幕,只支持px,wx单位，其他%，rem等都不支持

2.Weex 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。
2.1 在 Android 平台，Weex 只支持 overflow:hidden。
  在 iOS 上，Weex 支持 overflow:hidden 和 overflow:visible，默认是 overflow:visible。
2.2 weex不支持属性的多个值简写方式：//eg:backgound:url("**") #555 100% 100% ；
需要分别设置值：
2.3 padding:0 四个方向都一样可以简写，否则需分别设置
	border-style|border-left-style ：可选值为 solid | dashed | dotted  默认值 solid
	border-width|border-left-width
	border-color|border-left-color ：  默认值 #000000
	border-radius|border-top-left-radius
	margin|margin-left
3.Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性
3.1 flex-direction：column|column-reverse|row/row-reverse  默认值为 column
3.2 flex-wrap:nowrap|wrap|wrap-reverse( 行为类似于wrap，排布方向与其相反)  默认值为nowrap
3.3 justify-content:flex-start|flex-end | center | space-between|space-around，默认值为 flex-start。
3.4 align-items：stretch | flex-start | center | flex-end，默认值为 stretch 即拉伸高度至 flex 容器的大小。
3.5 项目属性  flex 成员项可以占用容器中剩余空间的大小   Flex 成员项暂不支持 flex-shrink 和 flex-basis 属性   

4.定位 position：relative | absolute | fixed | sticky，默认值为 relative  
 sticky 指的是仅当元素滚动到页面之外时，元素会固定在页面窗口的顶部
 //正常css position：static	默认值。没有定位，元素出现在正常的流中

5.Transition 
5.1transition-property：设置过渡动画的属性名， width|height|top|bottom|left|right	|background-color|opacity|transform
5.2 transition-duration：指定过渡的持续时间 (单位是毫秒)，默认值是 0，表示没有动画效果
5.3 transition-delay：指定请求过渡操作到执行过渡之间的时间间隔 (单位是毫秒或者秒)，默认值是 0
5.4 transition-timing-function：描述过渡执行的速度曲线，用于使过渡更为平滑。默认值是 ease    ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier(x1, y1, x2, y2)

6.Transform
translateX({<length/percentage>})：X 轴方向平移，支持长度单位或百分比。
translateY({<length/percentage>})：Y 轴方向平移，支持长度单位或百分比。
translate({<length/percentage>} {<length/percentage>})：X 轴和 Y 轴方向同时平移，translateX + translateY 简写。
scaleX(<number>)：X 轴方向缩放，值为数值，表示缩放比例，不支持百分比。
scaleY(<number>)：Y 轴方向缩放，值为数值，表示缩放比例，不支持百分比。
scale(<number>)：X 轴和 Y 轴方向同时缩放，scaleX + scaleY 简写。
rotate(<angle/degree>)：将元素围绕一个定点（由 transform-origin 属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。
rotateX(<angle/degree>)：X 轴方向的旋转。
rotateY(<angle/degree>)：Y 轴方向的旋转。
rotateZ(<angle/degree>)：Z 轴方向的旋转。
transform-origin {length/percentage/关键字(top/left/right/bottom)}:：设置一个元素变形的原点，仅支持 2D 坐标

7.Weex 支持四种伪类：active, focus, disabled, enabled
所有组件都支持 active, 但只有 input 组件和 textarea 组件支持 focus, enabled, disabled。

8.渐变 background-image: linear-gradient(to top, #a80077, #66ff00);
	to right|to left|to bottom|to top|to bottom right|to top left：从右下角到左上角
background-image 优先级高于 background-color，这意味着同时设置 background-image 和 background-color，background-color 被覆盖。
background 不支持简写

9.目前仅 iOS 支持 box-shadow 属性，Android 暂不支持，可以使用图片代替。
box-shadow : inset offset-x	offset-y blur  color;

10其他
font-style： normal | italic
font-weight : normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
//normal 等同于 400, bold 等同于 700；
text-decoration ：none | underline | line-through，默认值为 none。
text-overflow ： clip | ellipsis
word-wrap: break-word | normal | anywhere

weex内置模块

1.clipboard
//该模块提供的接口可以用于获取、设置剪切板内容，目前只支持字符串类型。
 const clipboard = weex.requireModule('clipboard')
 clipboard.setString(要设置的文本)
 clipboard.getString(ret => {
 	 let message = 'text from clipboard:' + ret.data
  })
  
2.globalEvent
//用于监听持久性事件，例如定位信息，陀螺仪等的变化
var globalEvent = weex.requireModule('globalEvent');
//WXApplicationDidBecomeActiveEvent，应用被前台的时候触发
//WXApplicationWillResignActiveEvent，应用即将被后台时候触发
globalEvent.addEventListener('WXApplicationDidBecomeActiveEvent', function(e) {
  console.log('WXApplicationDidBecomeActiveEvent');
});

3.modal
//模块提供了以下展示消息框的 API：toast、alert、confirm 和 prompt。
var modal = weex.requireModule('modal')
modal.toast({
    message: 'This is a toast',
    duration: 0.3
})
modal.alert({
  message: 'This is a alert',
  okTitle: '确认'
}, function () {
  	console.log('alert callback')
})
modal.confirm({
	message: 'message',
	okTitle :'确定',
	cancelTitle: '取消',
	duration: 0.3
}, function (value) {
	if(value==="确定"){
	callback();
	}else if (value==="取消"){
	callbackCancel();
	}
})

4.navigator
//把一个weex页面URL压入导航堆栈中，可指定在页面跳转时是否需要动画，以及操作完成后需要执行的回调函数
var navigator = weex.requireModule('navigator')
navigator.push({
  url: 'http://dotwe.org/raw/dist/519962541fcf6acd911986357ad9c2ed.js',
  animated: "true"
}, event => {
  console.log('callback: ', event)
})

5.storage
//storage 是一个在前端比较常用的模块，可以对本地数据进行存储、修改、删除，并且该数据是永久保存的，除非手动清除或者代码清除
//storage 模块有一个限制就是浏览器端（H5）只能存储小于5M的数据，而 Android 和 iOS 这块是没什么限制的
// storage 常用在一些被用户经常查询，但是又不频繁更新的数据，比如搜索历史、用户的订单列表等。搜索历史一般情况都是作为本地数据存储的，因此使用 storage 比较合适
const storage = weex.requireModule('storage')
storage.setItem('name', 'Hanks', event => {
    this.state = 'set success'
    console.log('set success')
}) 
storage.getItem('name', event => {
  console.log('get value:', event.data)
   this.state = 'value: ' + event.data
})
storage.removeItem('name', event => {
   console.log('delete value:', event.data)
    this.state = 'deleted'
})

6.stream
//stream 模块提供了基本的网络请求能力，例如 GET 请求、POST 请求等
const stream = weex.requireModule("stream");
stream.fetch(
 {
   method,
   url,
   type: "json",//响应类型：json，text 或是 jsonp(在 native 原生实现中其实与 json 相同)
   headers,
   body
 },
 (response) => {
   if (response.status === 200) {
       callback();
   }
 },
 () => {}
)

需要注意的：

1.nvue 页面控制显隐只可以使用v-if不可以使用v-show
2.nvue 页面只能使用flex布局，不支持其他布局方式。页面开发前，首先想清楚这个页面的纵向内容有什么，
哪些是要滚动的，然后每个纵向内容的横轴排布有什么，按 flex 布局设计好界面。
3.nvue 页面的布局排列方向默认为竖排（column），如需改变布局方向，
可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改，仅在 uni-app 模式下生效。
4.nvue页面编译为H5、小程序时，会做一件css默认值对齐的工作。因为weex渲染引擎只支持flex，并且默认flex方向是垂直。
而H5和小程序端，使用web渲染，默认不是flex，并且设置display:flex后，它的flex方向默认是水平而不是垂直的。
所以nvue编译为H5、小程序时，会自动把页面默认布局设为flex、方向为垂直。当然开发者手动设置后会覆盖默认设置。
5.文字内容，必须、只能在<text>组件下。不能在<div>、<view>的text区域里直接写文字。
否则即使渲染了，也无法绑定js里的变量。
只有text标签可以设置字体大小，字体颜色。
布局不能使用百分比、没有媒体查询。
nvue 切换横竖屏时可能导致样式出现问题，建议有 nvue 的页面锁定手机方向。
6.不支持背景图。但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念。
css选择器支持的比较少，只能使用 class 选择器。
nvue 的各组件在安卓端默认是透明的，如果不设置background-color，可能会导致出现重影的问题。
7.class 进行绑定时只支持数组语法。
Android端在一个页面内使用大量圆角边框会造成性能问题，尤其是多个角的样式还不一样的话更耗费性能。
应避免这类使用。
nvue页面没有bounce回弹效果，只有几个列表组件有bounce效果，包括 list、recycle-list、waterfall。
8.原生开发没有页面滚动的概念，页面内容高过屏幕高度并不会自动滚动，只有部分组件可滚动（list、waterfall、scroll-view/scroller），要滚得内容需要套在可滚动组件下。
这不符合前端开发的习惯，所以在 nvue 编译为 uni-app模式时，给页面外层自动套了一个 scroller，页面内容过高会自动滚动。
（组件不会套，页面有recycle-list时也不会套）。后续会提供配置，可以设置不自动套。
在 App.vue 中定义的全局js变量不会在 nvue 页面生效。globalData和vuex是生效的。
9.App.vue 中定义的全局css，对nvue和vue页面同时生效。如果全局css中有些css在nvue下不支持，编译时控制台会报警，
建议把这些不支持的css包裹在条件编译里，APP-PLUS-NVUE
不能在 style 中引入字体文件，nvue 中字体图标的使用参考：加载自定义字体。
如果是本地字体，可以用plus.io的API转换路径。
目前不支持在 nvue 页面使用 typescript/ts。
10.nvue 页面关闭原生导航栏时，想要模拟状态栏，可以参考文章。但是，仍然强烈建议在nvue页面使用原生导航栏。
nvue的渲染速度再快，也没有原生导航栏快。原生排版引擎解析json绘制原生导航栏耗时很少，而解析nvue的js绘制整个页面的耗时要大的多，
尤其在新页面进入动画期间，对于复杂页面，没有原生导航栏会在动画期间产生整个屏幕的白屏或闪屏。