小程序插件对接指南

简介

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

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

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

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

• 接入上，开发的工作量要比半屏接入大一点
• 插件的更新需要用户自己升级，不能像半屏小程序一样直接更新，关于小程序插件快速更新的说明，请参见官方文档

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

效果展示

插件申请

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

申请步骤：

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

插件引入

全局 app.json 文件

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

引入插件的页面.json 文件

.json文件
{
    "usingComponents": {
        "device": "plugin://vzPlugin/device"
    }
}

引入插件的页面.wxml 文件

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

四 参数说明

props

注：host、post 和 series 参数需调用臻云远程访问设备网页接口获取。

events

回调函数绑定方法

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'
  })
}