snUIWeex

立即使用

open close show hide openWeex sendGlobalvent

概述

Weex简介

Weex是淘宝开源并捐给Apache的孵化项目，是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。

snUIWeex模块概述

snUIWeex 模块将Weex的能力带到了apicloud平台，补充了apicloud原生渲染能力。

模块使用攻略

Weex全局配置，config文件的Feature，方法如下：

• 名称：weex
• 参数：debug、statusBarAppearance

• 配置示例：

    <feature name="weex">
        <param name="debug" value="false" />
        <param name="statusBarAppearance" value="true" />
    </feature>

• 字段描述:

  debug： 是否weex开启debug，主要是log查看，暂时不支持devtools statusBarAppearance： 同apicloud的statusBarAppearance

注意事项

• 系统限制：android最小 4.1.2（api 16），ios 最小 9.0

• android abi支持：weex支持armeabi-v7a、arm64-v8a、x86，由于apicloud默认是armeabi，所以以下配置必须添加，值根据需求而定，比如64位arm

    <preference name="android_abi" value="arm64-v8a"/>

• 云打包加密：由于云打包加密会将widget中的文件加密，也就是说如果是widget中放入weex的js文件被加密，导致weex无法使用，因此如果需要支持请修改.js为.njs（避免被加密即可）

• weex横竖屏切换支持不是很完美，请以测试结果为准

• weex页面采用vue或rax开发，其尺寸仅支持wx或px（其实都指weex的长度单位）。请参考

  如果weex页面和apicloud页面保持同样的尺寸，那就需要weex的长度单位和设备的长度单位进行转化，因此提供api.px2wx方法。 比如以下代码计算了weex的header高度（由于需要和apicloud的高度一样）

    var headerH = api.px2wx(44) + api.safeArea.top
    // api.safeArea已经转化为wx

模块接口

open

打开weex视图

open({params}, callback(ret))

params

url:

• 类型：字符串
• 描述：指定weex的视图文件地址，支持协议如下
  • widget://
  • http://、https://
  • file://

pageParam:

• 类型：JSON 对象
• 默认值：无
• 描述：（可选项）视图参数，可以通过 api.pageParam 获取

rect:

• 类型：JSON 对象
• 默认值：充满整个父页面
• 描述：（可选项）设置页面的位置和大小。如果要固定宽高则使用x、y、w、h等参数；如果要自适应状态栏高度变化、横竖屏切换等，则需要使用margin相关参数，不能使用w、h固定宽高。推荐使用margin相关参数来布局。
• 内部字段：

{
    x:,             //左上角x坐标，数字类型
    y:,             //左上角y坐标，数字类型
    w:,             //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度，数字或固定值'auto'， 单位：weex的长度单位
    h:,             //高度，若传'auto'，页面从y位置开始自动充满父页面高度，数字或固定值'auto'， 单位：weex的长度单位
    marginLeft:,    //相对父页面左外边距的距离，数字类型
    marginTop:,     //相对父页面上外边距的距离，数字类型
    marginBottom:,  //相对父页面下外边距的距离，数字类型
    marginRight:    //相对父页面右外边距的距离，数字类型
}

fixedOn:

• 类型：字符串类型
• 描述：（可选项）模块视图添加到指定 frame 的名字（只指 frame，传 window 无效）
• 默认：模块依附于当前 window

fixed:

• 类型：布尔
• 描述：（可选项）模块是否随所属 window 或 frame 滚动
• 默认值：true（不随之滚动）

callback(ret)

ret:

• 类型：JSON 对象
• 内部字段：

{
    id: 1  //数字类型；weex视图id
}

示例代码

var weex = api.require('snUIWeex');
weex.open({
    url: 'widget://res/weex/components/tabbar.js',
    rect: {
        h: 100, // weex的长度单位
        marginBottom: 0
    }
},function(ret) {
    weexId = ret.id
})

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭weex视图

close({params})

params

id：

• 类型：数字类型
• 描述：需要关闭的weex视图id

示例代码

var weex = api.require('snUIWeex');
weex.close({
    id: 1
})

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示weex视图

show({params})

params

id：

• 类型：数字类型
• 描述：需要显示的weex视图id

示例代码

var weex = api.require('snUIWeex');
weex.show({
    id: 1
})

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏weex视图

hide({params})

params

id：

• 类型：数字类型
• 描述：需要隐藏的weex视图id

示例代码

var weex = api.require('snUIWeex');
weex.hide({
    id: 1
})

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

openWeex

打开weex页面

openWeex({parmas},callback(ret, err))

params

url:

• 类型：字符串
• 描述：指定weex的页面文件地址，支持协议如下
  • widget://
  • http://、https://
  • file://

statusBarAppearance:

• 类型：布尔
• 描述：是否沉浸式状态栏，覆盖全局配置
• 默认：true

pageParam:

• 类型：JSON 对象
• 默认值：无
• 描述：（可选项）页面参数，新页面中可以通过 api.pageParam 获取

callback(ret, err)

ret:

• 类型：JSON 对象
• 内部字段：

{
    status: true           //布尔类型；操作成功状态值
}

err:

• 类型：JSON 对象
• 内部字段：

{
    msg:''                  //字符串类型；错误描述
}

示例代码

var weex = api.require('snUIWeex');
weex.openWeex({
    url: 'https://snice.oss-cn-hangzhou.aliyuncs.com/dist/weex/js/index.js'
}, function(ret, err) {
    if (ret.status) {
        api.alert({ msg: '打开成功' });
    } else {
        api.alert({ msg: err.msg });
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

sendGlobalEvent

发送全局事件，即通过weex的globalEvent模块添加的监听事件，参考

params

name

• 类型：字符串
• 默认值：无
• 描述：任意自定义事件的名称。

extra

• 类型：字符串或 JSON 对象
• 默认值：无
• 描述：（可选项）附带的参数。

示例代码

weex 监听

api.addEventListener({
    name: "myEvent"
}, function (e) {
  console.log(e)
});

html 发送

var weex = api.require('snUIWeex');
weex.sendGlobalEvent({
    name: 'myEvent',
    extra: {
        key1: 'value1',
        key2: 'value2'
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

weex扩展

module扩展

api

该模块主要是实现apicloud的部分api，使得在weex中能够使用api接口

Attribute

Event

Method