snUIWeex

概述

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/8