跳至主要內容

4. 插件更多页开发指引

插件更多页区域介绍

本节主要介绍如何实现插件更多页的菜单入口配置，以及更多页中自定义菜单的实现方式。可根据业务诉求自定义开发或使用标准能力为用户提供设备管理或售后相关的服务。

概念说明：

插件更多页基础能力共分为四种类型，用于对设备“信息展示、相关服务、管理”，

所支持的能力如下：设备信息类、设备服务类、设备管理类、自定义能力（支持功能自定义开发，需要符合美居插件页UI规范）；

p1

完整示例

  1. 插件调用更多页demo示例

https://iot.midea.com/v1/resfile/download/weex

  1. 插件更多页包含自定义区demo示例

https://iot.midea.com/v1/resfile/download/moreMenultems

菜单入口实现步骤

  1. 将以下文件导入项目

https://iot.midea.com/v1/resfile/download/superMoreUitls

  1. 插件首页引入JS文件，具体引入路径根据导入的位置调整

    import superMoreUtil from '@/widgets/T0x99/util/superMoreUtil'  //具体引入路径根据导入的位置调整

  2. 在created生命周期中，调用菜单重置方法

    created() {
// 重置超级菜单
superMoreUtil.reset()

}

  3. 点击页面菜单事件，调用open方法并传入相应参数

    参数名描述示例
    deviceId设备ID从nativeService.getDeviceInfo接口获取
    pluginData插件信息，JSON对象，包含version字段version: 'v1.2.0' // 事业部自定义设备插件版本号，统一使用vX.Y.Z格式，X为大版本，Y为中版本，Z为小版本
    //下面为可选参数hideNotificationSettings: true, //强制隐藏消息推送提醒
    showNotificationSettings: true, //固定显示消息推送提醒，避免接口有延时导致页面闪烁，如果确认设备一定有此菜单项，可以传入此参数
    hideCommonQuestion: true, //强制隐藏常见问题
    showCommonQuestion: true, //固定显示常见问题，避免接口有延时导致页面闪烁，如果确认设备一定有此菜单项，可以传入此参数
    hideGuideBook: true, //强制隐藏产品说明书
    showGuideBook: true, //固定显示产品说明书，避免接口有延时导致页面闪烁，如果确认设备一定有此菜单项，可以传入此参数
    hideWarrantyCard: true,//强制隐藏电子包修卡
    showWarrantyCard: true,//强制显示电子包修卡，避免接口有延时导致页面闪烁，如果确认设备一定有此菜单项，可以传入此参数
    hideMaintenance: true, //强制隐藏一键报修
    hideVersion: true, //强制隐藏插件版本
    hideDelete: true //强制隐藏删除设备
    // 7.2增加如下配置项（versionItemConfig，headerConfig）versionItemConfig: { //点击"插件版本"菜单时的响应处理
    times: 5, // 触发“插件版本”菜单通知事件的点击次数
    eventKey:'versionMenuItemEvent', // “插件版本”菜单通知事件的关键字，可插件自定义
    isKeepEnalbe: true, // 达到点击次数后，是否保存打开状态
    hasArrow: true // 版本号菜单是否显示箭头
    },
    headerConfig: { //点击“更多”标题时的响应处理（调试用）
    times: 10, // 点击“更多”标题通知事件的点击次数
    eventKey: 'headerEvent', // 点击“更多”标题通知事件的关键字，可插件自定义
    isKeepEnalbe: true // 达到点击次数后，是否保存打开状态
    },
    deviceSn: xxxx, //^7.3.0，插件可以传入设备SN，应用于一键报修、电子说明书的接口查询。（用于有的设备SN错误，前端可传入修正的SN）
    // 8.17新增 showOnlineService--在线客服 配置项，默认不显示showOnlineService: true, // 显示在线客服
    // 8.17新增 isCardUI–是否采用新样式，建议传true（注：新样式标准，列表背景色#1A1A1C， 圆角32px）isCardUI: true, // 采用卡片样式
    // 8.17新增 styleConfig--自定义样式 配置项，如采用wi默认样式不传即可（目前只开放圆角自定义）styleConfig: {
    borderRadius: '0px' // 配置更多页圆角通用样式为直角
    },
    // 8.22新增客服热线hotlineNumber: '' // 客服热线号码（有则显示客服热线，默认隐藏)
    // 8.23删除设备自定义unbindConfig: { // 点击删除设备按钮自定义配置
    // 点击删除按钮发送通知key值，可自定义点击删除设备按钮的整个逻辑，更多页不做删除处理，如自定义弹窗
    clickedUnbindEventKey: 'clickedUnbindEventKey'
    // 删除成功后发送通知key值，可自定义删除成功后的逻辑，如自定义跳转
    afterUnbindEventKey: 'afterUnbindEventKey' }
    // 9.2 新增问题与反馈showQuestionFeedback: true // 显示问题与反馈（仅美居可配置，默认显示）
    // 10.0 新增可配置显示网关连接showGatewayInfo: true // 显示网关连接（仅美居可配置，默认显示）
    // 10.0 新增beacon设备配置最大升级电量otaMaxCharge: 电量 // 电量百分比，范围0-100
    // 10.0 新增配置连接蓝牙设备引导图otaGuideImg: 图片地址 // 图片服务器地址图片
    // 10.1 设备信息自定义headerConfig: { // 点击设备信息自定义配置
    // 点击设备信息发送通知key值，可自定义点击设备信息的整个逻辑；插件页通过onmessage监听到该key值后自行做逻辑处理
    clickedHeaderEventKey: 'clickedHeaderEventKey'
    }
    // 10.2 新增可配置显示耗材购买showPurchaseConsumable: true // 显示耗材购买（默认不显示）
    // 11.0 新增语音技能入口showVoiceSkill: true // 显示语音技能入口（默认不显示）
    // 11.0 新增更换-WiFi入口showChangeWiFi: true // 显示更换-WiFi入口（默认不显示）changeDeviceWifiMode: '' // 更换-WiFi mode参数（默认''）
    routerConfigUrl事业部插件菜单JS文件路径，若无自定义的菜单，则传入null即可
    （旧自定义区配置，建议8.17后采用customArea配置自定义区）    		weex.config.bundleUrl.split('weex.js')[0] + 'moreMenuItems.js'
    isColmo（// 7.3.0）是否是COLMO品牌插件，若是，则“更多”页面将会采用黑色风格true/false
    bluetoothEnter（蓝牙ota）（// 7.11）是否显示固件升级入口，若是，则显示固件升级入口,默认为不显示true/false
    isWifiOta（wifi Ota）（// 9.3）是否显示wifi固件升级升级，若是，则显示固件升级入口,默认为不显示，优先级比bluetoothEnter高true/false
    customArea(// 8.17) 采用新功能分类布局自定义区{
    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' // 授权（生态）信息：语音授权、酷狗音乐授权等
    }
     data() {
    return {
      // deviceInfo：设备信息
      deviceInfo: {},
      // pluginData：插件信息
      pluginData: {
        version: 'v1.2.0' // 事业部自定义设备插件版本号，统一使用vX.Y.Z格式，X为大版本，Y为中版本，Z为小版本
      },


      // customArea：(^8.17) 采用新功能分类布局自定义区，若不需要传null即可

      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'  // 授权（生态）信息：语音授权、酷狗音乐授权等
      }


    }
  }

......

    gotoSuperMore() {
           // 打开超级菜单，若不支持则执行调用函数
          let param = {
          pluginData: this.pluginData,
          customArea: this.customArea
    }
    if (this.isColmo) {
         param.isColmo = this.isColmo
    }
    superMoreUtil.open(param, () => {
          // 插件菜单原逻辑
          nativeService.toast('按原来逻辑处理')
    })
}

自定义菜单实现步骤

  1. template编写：将内容放置在

    <div ref="body"> *** </div>

    注：body里的第一行

    <div style="height: 16px; background-color: #f9f9f9;"></div>

    如果是使用旧的自定义区routerConfigUrl固定需要的，用来和菜单页的头部信息间隔开
    用customArea的自定义区不需要加此间隔

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

  2. 在界面更新后，执行超级菜单页面调整接口(在$nextTick中调用superMoreUtil.adjustStyle，此接口会通知菜单页更新自定义菜单高度。若自定义菜单界面有更新后，没有调用，则会导致子菜单不显示或者显示高度不正确)
    老自定义区第二个参数不传（routerConfigUrl），adjustStyle第二个参数传递自定义区的类别：
    supplies: 购买类信息：耗材购买等
    deviceSys: 设备系统信息：设备消息管理等
    authorization: 授权（生态）信息：语音授权、酷狗音乐授权等

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

  3. 自定义菜单调用全局UI方法：

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

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