一、weex 的实例属性和方法

官方文档地址:

使用 weex 开发的页面,存在 weex 的全局变量,这个全局变量是隔离且 只读的

weex 变量带的属性和方法,对于获取一些有用的信息来说非常的方便。

目前存在的属性和方法如下:

属性/方法名称类型
configWeexConfigAPI
documentWeexDocument
requireModule(name: string) => Object => void
supports(condition: string) => boolean => void;

二、 weex.config

weex.confg 中包含了当前页面的所有环境信息,三个属性如下。

|属性名|类型|说明|
|bundleUrl|string|当前页面 js bundle 的 URL 地址|
|bundleType|string|当前页面的 DSL,可能会是 vue 或者是 rax或者扩展的框架|
|env|WeexEnviroment|环境变量|

我觉得 weex.config.env 是最有用的,对于平台的判断或者是不同环境下的逻辑处理有很大的帮助。

打印之后,信息如下 console.log("weex.config: ",weex.config.env);

1、web 平台运行的信息:

appName:"Chrome"
appVersion:"67.0.3396.99"
deviceHeight:1250
deviceModel:"unknown"
deviceWidth:750
dpr:1
osName:"unknown"
osVersion:"0.0.0"
platform:"Web"
rem:75
rootValue:75
scale:1
userAgent:"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36"
weexVersion:"1.0.26"

2、在 IOS 上的 playground 信息:

1.jpg

3、在 android 的 playground 信息:

我的安卓机坏掉了,之后补上

4、WXEnvironment 全局变量

WXEnvironment 是一个和 weex.config.env 等价的变量。

console.log(weex.config.env === WXEnvironment);  // true

5、属性值描述:

不同的环境,存在的属性值也可能不同,一般来说,下面这些是比较常用的:

字段名类型描述
platformString当前平台:iOSAndroidWeb (注意大小写)
weexVersionStringweex SDK 的版本
appNameString移动APP或者是浏览器的名称
appVersionString当前应用的版本
osNameString运行的系统名称,AndroidiOS(浏览器环境没有意义)
osVersionString系统版本
deviceModelString设备的型号(浏览器环境没有意义)
deviceWitdhString设备屏幕宽度
deviceHeightString设备屏幕高度

6、util:判断平台类型

platform(){
  const pName = weex.config.env.platform.toLowerCase();
  const platform = {
    isWeb:true,
    isIOS:false,
    isAndroid:false
  };
  switch (pName){
    case 'ios': platform.isIOS = true;break;
    case 'android': platform.isAndroid =  true;break;
  }
  return platform;
}   

之后直接通过 platform().isIOS 的方式去判断环境,进行不同的操作即可。

三、weex.document

关于 weex.document 的官方说明如下:

weex.document 是当前页面的文档模型对象,可以用来创建和操作 DOM 树中元素。它是 Weex DOM API 规范的一部分,但是它和 W3C 的 DOM 规范中的 document 对象是不同的。

而且,在使用了现代化的前端框架(如 Vue 和 Rax)的情况下,直接操作 DOM 并不是最佳实践。更何况在 Weex 平台里并不一定有真实的 DOM,在 Android 和 iOS 端上都是模拟出来的。

这个接口主要是用在 Vue 和 Rax 框架内部,用于将 virtual-dom 转换成渲染执行,并且发送给 Weex 客户端的渲染引擎。不建议在开发页面时使用。

四、weex-requireModule

官方文档如下:

如果要使用原生的模块,可以通过这个 API 将模块引入,对于开发来讲可能是透明的。

使用方式,其实相当于使用 js 引入了一个功能模块(而不是 UI 组件)。

引入后,可以直接调用这个原生的组件。

<template>
  <div><text>Toast</text></div>
</template>
<script>
  const modal = weex.requireModule('modal')
  modal.toast({
    message: 'I am a toast.',
    duration: 3
  })
</script>

五、weex-support

官方文档如下:

通过 weex.support运行期检测某个功能在当前环境中是否可用。

weex.supports(condition: string): boolean | void;

参数 condition 是有要求的,基本的格式是:@{type}/{name}

  • type: 待检测类型(支持 componentmodule
  • name: 待检测的名称

如果要检测是否支持某个模块中的方法,使用 . 分开,如 navigator.jumptoPage

官方给的示例:

//检测某个组件是否可用:
weex.supports('@component/slider') // true
weex.supports('@component/my-tab') // false

//检测某个模块是否可用:
weex.supports('@module/stream')  // true
weex.supports('@module/abcdef')  // false

//检测某个模块是否包含某个方法:
weex.supports('@module/dom.getComponentRect') // true
weex.supports('@module/navigator.jumpToPage') // false

//无效的输入:
weex.supports('div') // null
weex.supports('module/*') // null
weex.supports('@stream/fetch') // null
weex.supports('getComponentRect') // null

六、weex.isRegisteredModuleweex.isRegisteredComponent

官方没有说明这两个 API 和 weex.supports 的区别。

但是使用上来看,没感觉出具体的区别在哪里,只不过这个两个 API 更加细分了一下。

weex.isRegisteredModule 只能检测模块的可用性,而 weex.isRegisteredComponent 只能检测组件的可用性。

而且因为功能特定性,因此不需要通过 type 来区分判断的类型。

1、weex.isRegisteredModule

weex.isRegisteredModule(moduleName: string, methodName: string): boolean

如果要检测 module 的方法,则需要传入到第二个参数中,和 weex.support 不同

示例:

weex.isRegisteredModule('stream') // true
weex.isRegisteredModule('stream', 'fetch') // true
weex.isRegisteredModule('whatever', '- unknown -') // false
weex.isRegisteredModule('div') // false, not support components

2、weex.isRegisteredComponent

weex.isRegisteredComponent(componentName: string): boolean

示例:

weex.isRegisteredComponent('div') // true
weex.isRegisteredComponent('- unknown -') // false
weex.isRegisteredComponent('navigator') // false, not support modules