小程序插件对接指南

简介

本插件是将设备运维功能以微信小程序插件的形式提供组件给用户集成，用户只需简单的开发即可将完整的设备运维能力集成到自己的小程序中。

对比传统的开发方案，插件的优势在于：

• 无需申请插件使用资格，无需校验文件
• 丰富的功能，不仅可以取流，还可以画线圈、配置参数、设备升级等
• 突破半屏限制，不显示【臻识运维小助 提供服务】字样

但相对于半屏小程序，插件的劣势在于：

• 接入上，开发的工作量要比半屏接入大一点
• 由于插件的特殊性，部分功能在插件中无法使用，插件和臻识运维小助本身不会同步更新，UI和功能上都有差异
• 插件的更新需要用户自己升级，不能像半屏小程序一样直接更新，关于小程序插件快速更新的说明，请参见官方文档

建议：如果不介意半屏小程序的使用和呈现方式，建议使用半屏小程序方案集成，在功能上会和臻识运维小助一模一样，而且一劳永逸，后续功能更新或问题修复都可以直接同步。

效果展示

插件申请

前置条件：需企业认证的小程序（个人主体不可用）详见小程序插件开放范围及服务类目

申请步骤：

1. 登录微信公众平台，进入“设置-第三方设置-插件管理”页面。
2. 点击“添加插件”，输入插件ID：wx96282f1a0eeb496d。
3. 输入申请说明：需要输入申请方的公司全称和接入小程序的名称。
4. 点击“提交审核”，等待审核通过。
5. 审核通过后，即可在小程序中使用插件。

插件引入

全局 app.json 文件

{
  "plugins": {
    "vzPlugin": {
      "version": "1.1.0",
      "provider": "wx96282f1a0eeb496d"
    }
  }
}

引入插件的页面.json 文件

.json文件
{
    "usingComponents": {
        //臻云设备运维组件
        "device": "plugin://vzPlugin/device",
        //臻云视频播放组件
        "player": "plugin://vzPlugin/player"
    }
}

引入插件的页面.wxml 文件

// 以下传参仅为示例，可根据实际参数传递
<device
  id="device"
  accessKeyId="{{accessKeyId}}"
  accessKeySecret="{{accessKeySecret}}"
  sn="{{sn}}"
  bind:chooseFile="handleChooseFile"
  bind:saveFile="handleSaveFile"
  bind:exit="handleExit"
/>

// 视频组件
<player
  id="player"
  src="{{src}}"
  bind:statechange="handleStateChange"
  bind:netstatus="handleNetStatus"
  bind:fullscreenchange="handleFullscreenChange"
/>

四 参数说明

运维组件props

运维组件events

视频组件props

视频组件events

具体参数详情参见微信小程序媒体组件live-player

回调函数绑定方法

handleChooseFile(e) {
  this.fileType = e.detail
  console.log('handleChooseFile', this.fileType)
  const that = this
  wx.chooseMessageFile({
    count: 1,
    type: 'file',
    success(res) {
      const file = res.tempFiles[0]
      const device = that.selectComponent('#device')
      const data = {
        type: that.fileType,
        file: file
      }
      device.chooseFileSuccess(data)
    },
    fail(err) {
      console.log('chooseMessageFile error', err)
    }
  })
},
handleSaveFile(e) {
  const path = e.detail
  const that = this
  const fs = wx.getFileSystemManager()
  fs.saveFile({
    tempFilePath: path,
    success: function (saveRes) {
      const path = saveRes.savedFilePath
      wx.showModal({
        title: '保存成功',
        content: '请分享给好友导入',
        confirmText: '分享',
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            wx.shareFileMessage({
              filePath: path,
              success() {
                wx.showToast({
                  title: '分享成功',
                  icon: 'success'
                })
              },
              fail(err) {
                console.log('分享失败', err)
                wx.showToast({
                  title: '分享失败',
                  icon: 'none'
                })
              }
            })
          }
        }
      })
    },
    fail: function (err) {
      console.error('保存失败:', err)
      wx.showToast({
        title: '保存失败',
        icon: 'none'
      })
    }
  })
},
handleExit: function(e) {
  wx.reLaunch({
    url: '/pages/index/index'
  })
}