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的视图文件地址,支持协议如下

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的页面文件地址,支持协议如下

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页面发送事件