weex作为一款新开源的“混合”移动开发框架,尤其自己独特的优势吸引了我的注意。通过前面对weex h5 render源码的阅读,了解了下weex h5状态下的实现原理。但是光说不练假把式,不能仅仅要知其所以然,更要知其然。因此从今天开始我将会从实践者的角度出发构建一个weex程序。
先贴一张官方的图:
如果不熟悉盒模型可以看一下百度百科给的定义:http://baike.baidu.com/link?url=lTgnomTVMdVDuBHGalopXCjbo4qeW1RZ4lUx-4RXLx1irEMhQ2h4R59Cn4tsfrPZq_F_ySshT-mZr-kkiOvkeq。
-
weex在布局上使用了盒模型
具体体现在你可以在style中使用下面的属性:
1.padding ( padding-*:10px)
2.margin (margin-*:10px)
-
使用了弹性盒模型
我认为在html布局里,最好用,功能最丰富的就属弹性盒模型了。不熟悉的话可以参考阮老师的博文.但是呢,在weex代码中,你无须再指定元素的<code>display:flex</code>了。另外改变了部分属性的名称。我将在下篇文章中对比weex的弹性盒模型与html5原生盒模型的区别。 -
使用了apple 6 的屏幕大小作为设计的原型
这意味着,你在设计程序布局时应该按照375*667进行布局,又因为CSS像素值在屏幕上的差异(我的描述有问题),因此我们在布局时按照750*1334进行布局就可以了。
如果你把元素宽度设为了750px,那么不管你在什么手机上看这个元素,宽度都是屏幕宽度的100%
-
编写的网页在浏览器中是可以缩放的
就是你可以在浏览器通过手指进行放大缩小。解决这个问题你可以在inde.html中添加
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
来处理这个问题。
-
元素不能继承父元素的样式
这一点可能与以往的web开发有所区别。