Module 拓展

callback 参数的数据格式

  1. {
  2.   // 状态码。0表示操作成功，-1表示操作失败
  3.   status: 0,
  4.   // 错误描述信息
  5.   error: '错误描述信息',
  6.   // 返回的数据
  7.   data: {}
  8. }

wb-router

页面路由

引用方式

  1. const router = weex.requireModule('wb-router')

API

  • 打开页面

open(object)

  1. router.open({
  2.   // 页面名称。内置"weex"、"web"，"flutter" 其他路由需要原生先注册
  3.   name: 'weex'
  4.   // 下一个weex/web的路径
  5.   url: 'login.js',
  6.   /*
  7.   push: iOS下 从右到左的动画打开页面,
  8.   present: iOS下 从下到上的动画打开页面,
  9.   modalMask: 弹出一个透明层，weex或者flutter需要做弹框可以使用此模式。
  10.   */ 
  11.   type: 'push',
  12.   // 是否隐藏导航栏, 默认显示导航栏
  13.   navBarHidden: false,
  14.   // 导航栏标题
  15.   title: '标题'
  16.   // 禁用返回手势, 默认开启返回手势
  17.   disableGestureBack: false,
  18.   // 需要传到下一个页面的数据，默认为空
  19.   params: {},
  20.   // 指定从哪个页面开始关闭，不传是不会关闭的，0代表当前页面。
  21.   closeFrom: 0
  22.   // 关闭页面的方向，默认是页面数组的顺序。
  23.   closeFromBottomToTop: true
  24.   // 关闭页面的个数,默认是1
  25.   closeCount: 1
  26. })
  28. // 如果A->B->C->D 四个页面，在C页面打开D页面的同时想关闭B和C页面，有以下两种方式。
  29. // closeFromBottomToTop: true（A到C方向） false（C到A方向）
  30. // closeFrom: 0（两种情况：{A到C方向：指的是B(由于A是APP的第一个页面，由于不能直接被杀死，所以从B开始数)}，{C到A方向：指的是C}）
  31. // closeCount: 关闭的个数
  32. router.open({
  33.   name: 'weex',
  34.   url:  'D页面',
  35.   closeFrom: 0,
  36.   closeFromBottomToTop: true, // A到C方向
  37.   closeCount:2
  38. })
  39. router.open(
  40.   name: 'weex',
  41.   url:  'D页面',
  42.   closeFrom: 0,
  43.   closeFromBottomToTop: false, // C到A方向
  44.   closeCount:2
  45. )
  47. // 如果A...Z，N个页面，想在打开下一个页面的同时，只保留当前页面和第一个页面（根页面）
  48. router.open(
  49.   name: 'weex',
  50.   url:  '下一个页面',
  51.   closeFrom: 0
  52.   closeFromBottomToTop: false,
  53.   closeCount:999
  54. )

::: tip url的两种类型 如果url是http开头，将加载网络资源。否则，会通过热更新从本地加载 :::

  • 获取router的params参数

getParams()

  1. const params = router.getParams()
  • 关闭页面

close(number)

  1. // 关闭顶层多个页面，默认1个
  2. router.close(1)
  • 刷新weex页面

refresh()

  1. router.refresh()

wb-network

网络请求

引用方式

  1. const network = weex.requireModule('wb-network')

API

  • 请求接口

request(object, callback)

  1. network.request({
  2.   // 请求的URL
  3.   url: 'https://weexbox.com/api',
  4.   // 请求时使用的方法，默认是 get
  5.   method: 'post',
  6.   // 请求头
  7.   headers: {'X-Requested-With': 'XMLHttpRequest'},
  8.   // 发送的 URL/Body 参数
  9.   params: {
  10.     ID: 12345
  11.   },
  12.   // 响应类型, json 或 text，默认 json
  13.   responseType: 'json'
  14. }, (result) => {
  16. })
  18. // callback参数
  19. result: {
  20.   // 状态码
  21.   status: 200,
  22.   error: '',
  23.   // 服务器返回结果
  24.   data: {}
  25. }

:::warning 网络请求仅支持application/json，我们认为这是最佳实践。 :::

wb-event

应用级别事件通知。相比于实例级别的事件globalEvent, wb-event 能够跨页面传递事件。

::: tip globalEvent 虽然里面包含”global”这个词，但它不是真正的全局事件通知。 globalEvent 只能在当前原生页面和它里面的 weex 通信。 wb-event 不区分原生还是 weex，也不区分是同一个页面还是多个不同页面。 :::

引用方式

  1. const event = weex.requireModule('wb-event')

API

  • 注册事件

register(string, callback)

  1. event.register('name', (result) => {
  2.   // result为传过来的参数
  3. })
  • 发送事件

emit(object)

  1. event.emit({
  2.   // 事件名称
  3.   name: 'eventName',
  4.   // 事件参数，默认为空
  5.   params: {}
  6. })
  • 注销事件

unregister(string)

  1. event.unregister('name')
  • 注销所有事件

unregisterAll()

  1. event.unregisterAll()

globalEvent

扩展了全局事件，新增

  • viewDidAppear 页面显示的时候触发
  • viewDidDisappear 页面隐藏的时候触发

wb-modal

各种弹窗

引用方式

  1. const modal = weex.requireModule('wb-modal')

API

  • 警告弹窗

alert(object, callback)

  1. modal.alert({
  2.   // 标题
  3.   title: '标题',
  4.   // 弹窗内容
  5.   message: '弹窗内容',
  6.   // 是否在view最上面一层打开
  7.   root: false,
  8.   // 确定按钮文字
  9.   okTitle: '确定'
  10. }, (result) => {
  12. })
  14. // callback参数
  15. result: {
  16.   status: 0
  17. }
  • 确定弹窗

confirm(options, callback)

  1. modal.confirm({
  2.   // 标题
  3.   title: '标题',
  4.   // 弹窗内容
  5.   message: '弹窗内容',
  6.   // 是否在view最上面一层打开
  7.   root: false,
  8.   // 取消按钮文字
  9.   cancelTitle: '取消',
  10.   // 确定按钮文字
  11.   okTitle: '确定'
  12. }, (result) => {
  14. })
  16. // callback参数
  17. result: {
  18.   // 确定按钮0，取消按钮-1
  19.   status: 0
  20. }
  • 输入弹窗

prompt(object, callback)

  1. modal.prompt({
  2.   // 标题
  3.   title: '标题',
  4.   // 弹窗内容
  5.   message: '我是一个弹窗',
  6.   // 是否在view最上面一层打开
  7.   root: false,
  8.   // 占位符
  9.   placeholder: '请输入密码',
  10.   // 是否不显示输入，默认否
  11.   isSecure: true,
  12.   // 取消按钮文字
  13.   cancelTitle: '取消',
  14.   // 确定按钮文字
  15.   okTitle: '确定'
  16. }, (result) => {
  18. })
  20. // callback参数
  21. result: {
  22.   // 确定按钮0，取消按钮-1
  23.   status: 0,
  24.   data: {
  25.     // 输入的文字
  26.     text: '输入的文字'
  27.   }
  28. }
  • 操作表弹窗

actionSheet(object, callback)

  1. modal.actionSheet({
  2.   // 标题，默认为空
  3.   title: '标题',
  4.   // 弹窗内容，默认为空
  5.   message: '弹窗内容',
  6.   // 是否在view最上面一层打开
  7.   root: false,
  8.   // action列表
  9.   actions: [{
  10.     // 按钮类型'danger', 'cancel', 'normal'。默认normal
  11.     type: 'danger',
  12.     // 按钮的标题
  13.     title: '删除'
  14.   }]
  15. }, (result) => {
  17. })
  19. // callback参数
  20. result: {
  21.   // 取消按钮-1，其他0
  22.   status: 0,
  23.   data: {
  24.     // 按钮的索引
  25.     index: 0
  26.   }
  27. }
  • 吐司

showToast(object)

  1. modal.showToast({
  2.   // 提示信息
  3.   text: '提示信息',
  4.   // 显示时间，默认2秒
  5.   duration: 2
  6. })
  • 显示菊花

showLoading(string)

  1. // loading 文字，默认为空
  2. modal.showLoading('加载中...')
  • 显示进度

showProgress(object)

  1. modal.showProgress({
  2.   // 进度
  3.   progress: 50
  4.   // loading 文字，默认为空
  5.   text: '加载中...'
  6. })
  • 关闭菊花

dismiss()

  1. modal.dismiss()

wb-navigator

设置原生导航栏

引用方式

  1. const navigator = weex.requireModule('wb-navigator')

API

  • 设置导航栏左边按钮

setLeftItems(array, callback)

  1. navigator.setLeftItems([
  2.   {
  3.     // 展示的文字
  4.     text: '',
  5.     // 文字颜色，16进制
  6.     color: '#ffffff',
  7.     // 展示的图片。如果设置了text，则image不起作用
  8.     image: 'http://weexbox.surge.sh/logo.png' 
  9.   }
  10. ], (result) => {
  12. })
  14. // callback参数
  15. result: {
  16.   status: 0,
  17.   data: {
  18.     // 点击的索引
  19.     index: 0
  20.   }
  21. }
  • 设置导航栏右边按钮

setRightItems(array, callback)

  1. navigator.setRightItems([
  2.   {
  3.     // 展示的文字
  4.     text: '',
  5.     // 文字颜色，16进制
  6.     color: '#ffffff',
  7.     // 展示的图片。如果设置了text，则image不起作用
  8.     image: 'http://weexbox.surge.sh/logo.png' 
  9.   }
  10. ], (result) => {
  12. })
  14. // callback参数
  15. result: {
  16.   status: 0,
  17.   data: {
  18.     // 点击的索引
  19.     index: 0
  20.   }
  21. }
  • 设置导航栏中间的按钮

setCenterItem(object, callback)

  1. navigator.setCenterItem({
  2.   // 展示的文字
  3.   text: '',
  4.   // 文字颜色，16进制
  5.   color: '#ffffff',
  6.   // 展示的图片。如果设置了text，则image不起作用
  7.   image: 'http://weexbox.surge.sh/logo.png' 
  8. }, (result) => {
  10. })
  12. // callback参数
  13. result: {
  14.   status: 0
  15. }
  • 设置导航栏颜色

setNavColor(string)

  1. navigator.setNavColor('#00ff00')
  • 物理返回键

onBackPressed(callback)

  1. navigator.onBackPressed(() => {
  2. })
  • 获取导航栏原始高度。多用于隐藏原生导航栏之后，用weex来实现导航栏。

getHeight()

  1. const navHeight = navigator.getHeight()

wb-external

打开外部功能

引用方式

  1. const external = weex.requireModule('wb-external')

API

  • 打开浏览器:

openBrowser(string)

  1. external.openBrowser('https://aygtech.github.io/weexbox')
  • 打电话:

callPhone(string)

  1. external.callPhone('114')
  3. // callback参数
  4. result: {
  5.   status: 0,
  6.   error: '',
  7. }
  • 拍照:

openCamera(object, callback)

  1. external.openCamera({
  2.   // 能否剪裁
  3.   enableCrop: true,
  4.   // 是否矩形剪裁，true为圆形剪裁
  5.   isCircle: true,
  6.   // 是否在view最上面一层打开
  7.   root: false,
  8.   // 宽度
  9.   width: 100,
  10.   // 高度
  11.   height:100
  12. }, (result) => {
  14. })
  16. // callback参数
  17. result: {
  18.   status: 0,
  19.   error: '',
  20.   data: {
  21.     // 图片的存储路径
  22.     url: '/docment/123.png'
  23.   }
  24. }
  • 打开相册:

openPhoto(object, callback)

  1. external.openPhoto({
  2.   // 最大选取张数
  3.   count: 9,
  4.   // 能否剪裁
  5.   enableCrop: true,
  6.   // 是否矩形剪裁，true为圆形剪裁
  7.   isCircle: true,
  8.   // 是否在view最上面一层打开
  9.   root: false,
  10.   // 宽度
  11.   width: 100,
  12.   // 高度
  13.   height:100
  14. }, (result) => {
  16. })
  18. // callback参数
  19. result: {
  20.   status: 0,
  21.   error: '',
  22.   data: {
  23.     // 图片的存储路径
  24.     urls: ['url0', 'url1']
  25.   }
  26. }

webSocket

webSockets 是一种创建持久性的连接，并进行双向数据传输的 HTTP 通信协议。WeexBox 提供了 webSockets 模块方便用户在 H5/iOS/Android 环境下与服务端创建 webSockets 链接进行通信。

引用方式

  1. const websocket = weex.requireModule('webSocket')

API

  • 创建 WebSockets，并连接服务器。

WebSocket(url, protocol)

  1. // @url, string, 表示要连接的 URL
  2. // @protocol, string, WebSockets 协议名字字符串
  3. websocket.WebSocket('ws://echo.websocket.org', '')
  • 通过 WebSockets 连接向服务器发送数据。

send(data)

  1. // @data, string, 要发送到服务器的数据
  2. websocket.send('发送一条消息')
  • 关闭 WebSockets 的链接。

close(code, reason)

  1. // @code, number, 关闭连接的状态号
  2. // @reason, string, 关闭的原因
  3. websocket.close()
  • onopen

连接打开事件的事件监听器，该事件表明这个连接已经准备好接受和发送数据。onopen 接受一个函数作为 EventListener，这个监听器会接受一个 type 为 “open” 的事件对象。

onopen(options)

  1. websocket.onopen(() => {
  2.   // websocket连接成功
  3. })
  • onmessage

消息事件的事件监听器，当有消息到达的时触发。onmessage 接受一个函数作为 EventListener，这个监听器会接受一个 type 为 “message” 的事件对象

onmessage(options)

  1. websocket.onmessage((e) => {
  2.   // e.data, string, 监听器接收的到的消息
  3. })
  • onclose

连接关闭事件的事件监听器，当连接关闭时触发。onclose 接受一个函数作为 EventListener，这个监听器会接受一个 type 为 “close” 的事件对象。

onclose(options)

  1. websocket.onclose((e) => {
  2.   // e.code, number, 服务器返回关闭的状态码
  3.   // e.reason, string, 服务器返回的关闭原因
  4.   // e.wasClean, boolen, 是否完全关闭
  5. })

  • onerror

    error 事件的事件监听器，当错误发生时触发。onerror 接受一个函数作为 EventListener，这个监听器会接受一个 type 为 “error” 的事件对象

onerror(options)

  1. websocket.onerror((e) => {
  2.   // e.data, string, 监听器接收的到的消息
  3. })