博客

weex书写步骤


全局样式规划：将整个页面分割成合适的模块。

flex 布局：排列和对齐页面模块。

定位盒子：定位并设置偏移量。

细节样式处理：增加特定的具体样式。

1.通用样式

/*除此通用样式之外的属性，均不被支持*/
1.单位只支持px和wx（不受屏幕宽度和viewPortWidth影响），不支持相对单位（em、rem）和百分比，vw/vh等；
2. 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。（所以使用padding时应注意，会挤压内容）
3. overflow， 在 Android 平台，Weex 只支持 overflow:hidden。在 iOS 上，Weex 支持 overflow:hidden 和 overflow:visible，默认是 overflow:visible。
4. padding | margin  四个方向都一样可以简写，否则需分别设置
/*		padding {length}: 上、下、左、右四边内边距，默认值 0
		padding-left {length}：左内边距，默认值 0
		padding-right {length}：右内边距，默认值 0
		padding-top {length}：上内边距，默认值 0
		padding-bottom {length}：下内边距，默认值 0*/
5.background | border  |transition 等 不支持简写
/*	 border-style | border-bottom-style:solid ;
	 border-color | border-bottom-color: #E8E8E8;
     border-width | border-bottom-width: 1px;*/
6.Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex，默认值为 column	 

详情见我的

weexNative

或则

css

7.position (这个基本差不多)
	/*	relative 是默认值，指的是相对定位；
		absolute 是绝对定位，以元素的容器作为参考系；
		fixed 保证元素在页面窗口中的对应位置显示；
		sticky 指的是仅当元素滚动到页面之外时，元素会固定在页面窗口的顶部。*/
8.目前仅 iOS 支持 box-shadow 属性，Android 暂不支持，可以使用图片代替。
		每个元素只支持设置一个阴影效果，不支持多个阴影同时作用于一个元素。

2.文本样式

/*文本类组件共享一些通用样式, 这类组件目前包括 <text>、<input>和<richtext>*/
&&&&&weex 文字必须放在text 下，否则无法进行以下文本设置&&&&&
color{color} （如果在不是文本类组件内设置 会不生效） 
/*age:
<style >
.red{
color:red;
}
</style >
<div class="red">文本</div>   此文本 将还是默认的黑色
*/
font-size {number}：文字大小(如果在不是文本类组件内设置 会不生效)
/*age:
<style >
.font{
font-size:28px;
}
</style >
<div class="font">文本</div>   此文本 将还是默认大小 
*/


font-style
font-style {string}：字体类别。可选值 normal | italic，默认为 normal。

font-weight
font-weight {string}：字体粗细程度

可选值: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
normal 等同于 400, bold 等同于 700；
默认值: normal；iOS 支持 9 种 font-weight值；Android 仅支持 400 和 700, 其他值会设为 400 或 700

text-decoration
text-decoration {string}：字体装饰，可选值 none | underline | line-through，默认值为 none。

WARNING WARNING WARNING WARNING 

只支持 <text> 和 <ricthext>  WARNING WARNING

text-align     &&&&(不支持使用在div等组件)&&&&
text-align {string}：对齐方式。可选值 left | center | right，默认值为 left。

font-family
font-family {string}：设置字体。这个设置 不保证 在不同平台，设备间的一致性。如所选设置在平台上不可用，将会降级到平台默认字体。如果需要加载自定义字体，请参考相关dom.addRule。

text-overflow
text-overflow {string}：设置内容超长时的省略样式。可选值 clip | ellipsis

WARNING WARNING  WARNING  

只支持 <text> 和 <ricthext> WARNING  WARNING

lines
lines {number}: 正整数，指定最大文本行数，默认值为0，表示不限制最大行数。如果文本不够长，实际展示行数会小于指定行数。

&&&line-height&&&&
line-height {length}：正整数，每行文字高度。line-height是 top 至 bottom 的距离。line-heightline-height与font-size没有关系，因为line-height被 top 和 bottom 所限制，font-size 被 glyph 所解析。line-height和font-size相等一般会导致文字被截断。

word-wrap
word-wrap:<string> break-word | normal | anywhere. 对 Weex 来说 anywhere 表示在以字符为最小元素做截断换行，其它值或不指定该属性，都以英文单词为单位进行换行。

3.list 回收cell

/*<list> 的子组件只能包括以下四种组件或是 fix 定位的组件，其他形式的组件将不能被正确渲染。

<cell>
用于定义列表中的子列表项，类似于 HTML 中的 ul 之于 li。Weex 会对 <cell> 进行高效的内存回收以达到更好的性能。
<header>
当 <header> 到达屏幕顶部时，吸附在屏幕顶部。
<refresh>
用于给列表添加下拉刷新的功能。
<loading>
<loading> 用法与特性和 <refresh> 类似，用于给列表添加上拉加载更多的功能。*/
如果 cell 太多会导致在屏幕外的cell 初始化时被回收，直到滑动cell再次出现在屏幕中才会显示，

WARNING WARNING  WARNING  
但是像地图显示不出来  ，（解决办法==》将所有东西 放在一个cell ,不用多个cell）