Weex入门（4）样式

读取本地资源问题

Weex SDK 提供 local scheme 来访问打包在应用程序中的资源，此scheme 无法在H5 环境下使用。目前，开发者可以在 image 组件和字体文件中使用本地资源。

·      在iOS 中，Weex 会在 bundle resources 中查找。例如，image 组件的 src 属性为 local:///app_icon'，Weex 会加载 bundle resouce 中名为 app_icon 的图像资源，而字体文件也以相同的方式工作。

·      在Android 中，image 组件将从 drawable 资源文件夹加载，如  res/drawable-xxx。但加载字体文件是不同的，Android 框架无法从 res 加载字体文件，因此SDK 将从 asserts 文件夹加载它。

跟着官网这句话去尝试，在iOS端，你会发现并没有显示出本地图片（起码我验证是这么一个结果），最终发现可能是个平台的差异性，在iOS上需要加上图片后缀，如app_icon.png。但是iOS内部图片都是由@2x或者@3x后缀，需要实现本地读取图片，估计还要耗费一些精力封装兼容方法。。。

WEEX样式

Weex 对于长度值目前只支持像素值，不支持相对单位（em、rem等）

<template>

</template>结构中只能包括一个块元素

每个样式只支持单一写法，不支持组合写法，如：border: 1 solid #ff0000;

你可以通过 background-image 属性创建线性渐变。

background-image: linear-gradient(to top,#a80077,#66ff00);

目前暂不支持 radial-gradient（径向渐变）。

Weex 目前只支持两种颜色的渐变，渐变方向如下：

to right

从左向右渐变

to left

从右向左渐变

to bottom

从上到下渐变

to top

从下到上渐变

to bottom right

从左上角到右下角

to top left

从右下角到左上角

表示百分比值，如“50％”，“66.7％”等。

它是CSS 标准的一部分，但Weex 暂不支持。Weex默认屏幕宽度为750px,根据输入的像素，自动scale到对应的大小。

假设您需要显示固定为88 px 的导航栏，该导航栏的高度将是：

var height = 88 * 750 / env.deviceWidth

Weex 在0.13 版本SDK 里实现了事件冒泡机制。注意事件冒泡默认是不开启的，你需要在模板根元素上加上属性 bubble=true 才能开启冒泡。

{

  handleClick (event) {

// 阻止继续冒泡.

    event.stopPropagation()

  }

}

WEEX环境变量

Weex 提供了 weex.config.env 和全局的 WXEnvironment 变量（它们是等价的）来获取当前执行环境的信息。

weex.config.env === WXEnvironment

Weex 环境变量中的字段:

字段名类型描述

platform String Current running platform, could be “Android”, “iOS” or “Web”.

weexVersion String The version of Weex SDK.

appName String Mobile app name or browser name.

appVersion String The version of current app.

osName String The OS name, could be “Android” or “iOS”.

osVersion String The version of current OS.

deviceModel String Mobile phone device model. (native only)

deviceWidth  Number Screen resolution width.

deviceHeight  Number Screen resolution height.