更多页参数文档

# 接入简单示例

import superMoreUtil from '/util/superMoreUtil'
  ...
  methods: {
    gotoSuperMore() {
      const param = {
        deviceId: this.deviceId, // 从getDeviceInfo接口获取
        pluginData: { version: 'x.y.z' },
        routerConfigUrl: weex.config.bundleUrl.split('weex.js')[0] + 'moreMenuItems.js', // 事业部自定义菜单组件路径，若不需要设置为null即可
        isColmo: false, // 是否开启Colmo模式
      }
      superMoreUtil.open(param)
    }
  },
  created() {
      superMoreUtil.reset() // 重置超级菜单
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

TIP

附件：superMoreUtil.js

# param参数详细说明

参数名	说明	示例
deviceId	设备ID	从getDeviceInfo接口获取
pluginData	插件信息对象	详细配置参数见下文
routerConfigUrl	事业部插件菜单JS文件路径，若无自定义的菜单，则传入null即可	weex.config.bundleUrl.split('weex.js')[0] + 'moreMenuItems.js'
isColmo	是否是COLMO品牌插件，若是，则“更多”页面将会采用黑色风格	true/false
bluetoothEnter	是否显示固件升级入口，若是，则显示固件升级入口,默认为不显示	true/false
isWifiOta	是否显示wifi固件升级升级，若是，则显示固件升级入口,默认为不显示，优先级比bluetoothEnter高	true/false
customArea	采用新功能分类布局自定义区	{ supplies: weex.config.bundleUrl.split('weex.js')[0] + 'supplies.js', // 购买类信息：耗材购买等 deviceSys: weex.config.bundleUrl.split('weex.js')[0] + 'deviceSys.js', // 设备系统信息：设备消息管理等 authorization: weex.config.bundleUrl.split('weex.js')[0] + 'authorization.js' // 授权（生态）信息：语音授权、酷狗音乐授权等 }

# pluginData参数详细说明

参数名	说明	示例
version	自定义设备插件版本号	v1.2.0
hideNotificationSettings	强制隐藏消息推送提醒	true/false
showNotificationSettings	强制显示消息推送提醒	true/false
hideCommonQuestion	强制隐藏常见问题	true/false
showCommonQuestion	强制显示常见问题	true/false
hideGuideBook	强制隐藏产品说明书	true/false
showGuideBook	强制显示产品说明书	true/false
hideWarrantyCard	强制隐藏电子包修卡	true/false
showWarrantyCard	强制显示电子包修卡	true/false
hideMaintenance	强制隐藏一键报修	true/false
hideVersion	强制隐藏插件版本	true/false
hideDelete	强制隐藏删除设备	true/false
versionItemConfig	点击"插件版本"菜单时的响应处理	{ times: 5, // 触发“插件版本”菜单通知事件的点击次数 eventKey:'versionMenuItemEvent', // “插件版本”菜单通知事件的关键字，可插件自定义 isKeepEnalbe: true, // 达到点击次数后，是否保存打开状态 hasArrow: true // 版本号菜单是否显示箭头 }
headerConfig	点击“更多”标题时的响应处理	{ times: 5, // 点击“更多”标题通知事件的点击次数 eventKey:'versionMenuItemEvent', // 点击“更多”标题通知事件的关键字，可插件自定义 isKeepEnalbe: true, //达到点击次数后，是否保存打开状态 }
deviceSn	插件可以传入设备SN，应用于一键报修、电子说明书的接口查询。（用于有的设备SN错误，前端可传入修正的SN）
showOnlineService	是否显示在线客服	true/false
isCardUI	是否采用卡片样式	true/false
styleConfig	自定义样式配置项，如采用默认样式不传即可（目前只开放圆角自定义）	{ borderRadius: '0px' // 配置更多页圆角通用样式为直角 }
hotlineNumber	客服热线号码（有则显示客服热线，默认隐藏)	0571-88888888
unbindConfig	点击删除设备按钮自定义配置	{ clickedUnbindEventKey: 'clickedUnbindEventKey', // 点击删除按钮发送通知key值，可自定义点击删除设备按钮的整个逻辑，更多页不做删除处理，如自定义弹窗 afterUnbindEventKey: 'afterUnbindEventKey' // 删除成功后发送通知key值，可自定义删除成功后的逻辑，如自定义跳转 }
showQuestionFeedback	是否显示问题与反馈（仅美居可配置，默认显示）	true/false
showGatewayInfo	是否显示网关连接（仅美居可配置，默认显示）	true/false
showPurchaseConsumable	是否显示耗材购买（默认不显示）	true/false

# 自定义菜单实现步骤

# 1、template编写：

将内容放置在<div ref="body"> *** </div>中。

TIP

如果需要外边距，可以在内容里增加
<div style="height: 16px; background-color: #f9f9f9;"></div>

<template>
  <div>
    <scroller class="wrapper" show-scrollbar="false">
      <div ref="body">
        ......
      </div>
    </scroller>
  </div>
</template>

1
2
3
4
5
6
7
8
9

# 2、自适应高度

在界面更新后，执行超级菜单页面调整接口(在$nextTick中调用superMoreUtil.adjustStyle，此接口会通知菜单页更新自定义菜单高度。若自定义菜单界面有更新后，没有调用，则会导致子菜单不显示或者显示高度不正确)
如果使用routerConfigUrl自定义区，adjustStyle第二参数不传

created() {
  this.$bridge.getDeviceInfo().then(resp => {
    this.deviceInfo = resp.result
    this.$nextTick(() => {
      superMoreUtil.adjustStyle(this.$refs.body)
    })
  })
}

1
2
3
4
5
6
7
8

如果使用customArea自定义区，adjustStyle第二参数需要传自定义区名称 supplies/deviceSys/authorization 中的一个

created() {
  this.$bridge.getDeviceInfo().then(resp => {
    this.deviceInfo = resp.result
    this.$nextTick(() => {
      superMoreUtil.adjustStyle(this.$refs.body, 'supplies')
    })
  })
}

1
2
3
4
5
6
7
8

TIP

有需要自定义菜单可参考 moreMenuItems.vue

# 自定义菜单调用全局UI方法

因为自定义菜单属于整体页面的一个子窗口，类似于H5的iframe，所以部分UI组件的显示范围无法超出子窗口的范围。例如toast、loading等带UI的接口，此类接口可调用代理方法，通过“更多”页面触发相应的接口，达到在“更多”页面中正常显示

接口名	示例
toast	superMoreUtil.toast({ message: '触发了toast' })
showLoading	superMoreUtil.showLoading()
hideLoading	superMoreUtil.hideLoading()
showConfirmView	superMoreUtil.showConfirmView({ title: '标题', content: '内容说明描述', args: [ { confirmText: '取消', index: 10 }, { confirmText: '确定', index: 11 }]}, data => { superMoreUtil.toast({ message: '点击了' + JSON.parse(data).confirmText }) }, () => {} )

← 一键换肤