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
})

tabbar

可用性

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

属性 | 是否支持 | 备注 | -|-|-|- appId | √ | wgtRootDir | √ | pageParam | √ | safeArea | √ | statusBarAppearance | √ |

Event

属性 | 是否支持 | 备注 | -|-|-|- keyback | √ | pause | √ | resume | √ |

Method

方法 | 是否支持 | 备注 | -|-|-|- openWin | √ | 仅支持url addEventListener | √ | 不支持extra，只能通过该插件的sendGlobalEvent发送 | removeEventListener | √ | | sendEvent | √ | 给apicloud页面发送事件

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24