Weex开发初探

1、DSL ： weex文件；

2、Virtual DOM （提升性能） :

简单的说就是：

3、Android RenderEngine 将输入Virtual DOM 转换成输出的android原声控件；

1.Weex和H5对比

2.Weex和RN对比

3.Weex优势

4.Weex劣势

1.使用本地图片

<image class = "setBtn" src= 'xcassets:my_setting'/>

2.list中cell的margin无效

将cell的最外层嵌套一个div，对div进行margin操作

3.Weex和Native的交互

将WXCustomEventModule注册为callNative

实现并注册方法pushNativeVC::

4.元素的显示隐藏

因为weex没有兼容v-show和display:none的属性,所以要实现元素的显示隐藏要使用v-if,其值为bool值

5.类选择器

和vue语法不同，其格式为:class="[loginState?'TopLoginItem':'TopItem']"

6.视图的生命周期 willAppear，willDisAppear

如果考虑三端，可以尝试Weex开发

如果已经有大量实践Vue，也可以尝试Weex开发

对渲染UI的流畅度有较高的期望又想能支持热更新，也可以尝试Weex开发

所有 weex 标签都有以下基本样式规则。

weex 盒模型基于 CSS 盒模型，每个 weex 元素都可视作一个盒子。我们一般在讨论设计或布局时，会提到「盒模型」这个概念。

元素实际的内容（content）、内边距（paddings）、边框（borders）、外边距（margins），形成一层层的盒子包裹起来，这就是盒模型大体上的含义。

注意：目前在 <image>和 <text>组件上尚无法只定义一个或几个角的 border-radius。比如你无法在这两个组件上使用 border-top-left-radius。

weex 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。

示例：

weex 布局模型基于 CSS 的 Flexbox。以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。

Flexbox 包含 flex 容器和 flex 成员项。如果一个 weex 元素可以容纳其他元素，那么它就成为 flex 容器。需要注意的是，flexbox 的老版规范相较新版有些出入，比如是否能支持 wrapping。这些都描述在 W3C 的工作草案中了，你需要注意下新老版本之间的不同。另外，老版本只在安卓 4.4 版以下得到支持。

在 weex 中，Flexbox 是默认且唯一的样式模型，所以你不需要手动为元素添加 display: flex属性。

flex: <number>

flex 属性定义了 flex 成员项在容器中占据的尺寸。如果所有成员项都设置为 flex: 1，那么它们就有相等的宽度（水平排列）或者相等的高度（垂直排列）。如果一共有两个成员项，其中一个 flex: 1，另一个 flex: 2，那么第一个将占据 1/3 的空间，另一个占据 2/3。如果所有 flex 成员项都不设置 flex 属性，它们将根据容器的 justify-content 属性来决定如何排列。

一组平分了容器的图片。

一张固定宽度的图片加上一段流动布局的文本。

复杂的混合布局。

一段文本左对齐，其他内容右对齐。

我们可以使用以下属性来定位一个 weex 元素。

你可以按照以下步骤来规划 weex 页面的样式。

Weex是阿里开源的一套构建跨平台的移动框架，uni-app是一个使用Vue.js开发所有前端应用的框架。

Weex可以类比ReactNative，Weex能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。uin-app和原生开发是有很大差别的至少在性能和需求覆盖度上会差很多uin-app框架使用的其实是cordova的进阶版，也就是把web代码打包到本地，本地实质上还是通过WebView运行，那性能的瓶颈不言而喻。

---