自定义控件开发说明

使用说明

本地开发（dev环境）

$ npm run dev

执行以上命令会启动一个node服务，端口号为9090（可以自己修改）,
项目以/src/main.js为入口（典型的vue-cli所建项目），
在/src/pagess/index.vue中调用自己开发的Dui控件，可以在页面上看到自己开发的效果

打包上传（product环境）

$ npm run build

项目以/components/index.js为入口，打包开发的Dui控件到lib目录，
可以供DUI平台使用

/components/index.js中需要export开发的控件，例如：

// 把模块导出
export default{
  helloWorld: HelloWorld,
  customContentCard: CustomCard
}

DUI平台会使用开发者export的控件，例如上例的helloWorld和customContentCard。

目录结构

|- build/ ------------------------------- Vue Cli目录
|- config/ ------------------------------ Vue Cli目录
|- lib/ --------------------------------- 自定义控件打包目标文件夹，在DUI平台上传此目录的压缩包
|- src/ --------------------------------- 主要代码目录
    |- components(重要)/ ----------------- 开发的Dui控件在这个目录中
        |- index.js --------------------- 自定义控件资源入口
        |- src/ ------------------------- 自定义控件代码目录
            |- hello-world.vue ---------- 自定义控件hello-world源码
    |- pages ---------------------------- 页面代码
        |- index.vue -------------------- 主页面，开发时可以在页面中看效果
|- package.json ------------------------- 依赖包

DUI控件开发流程

$ git clone 项目代码

$ cd DUI-template/

$ npm install

$ npm run dev

浏览器中访问: http://localhost:9090/

根据实际情况开发自定义控件例如： /components/src/hello-world.vue

$ npm run build

打包/lib目录中的内容为lib.zip并上传至DUI平台

自定义控件资源包上传成功

接收显示数据

DUI平台在调用自定义控件时，会将对话返回Json中的dm.widget通过叫做message的prop传递给自定义控件，所以在开发自定义控件时，需要使用一个叫做message的prop来接受对话返回的数据。开发时可以在/pages/index.vue中写一些测试数据，通过message传递给自定义控件来测试和查看效果。

发送数据给Native

我们在window对象中写入了一个工具对象Dui，自定义控件可以直接调用window.Dui中的方法来给Native发送数据(Web端目前不能测试此功能)。例如：

if (!window.Dui) return
window.Dui.send({
  'event': 'list.item.select',
  'data': {
    'index': 3
  }
})

控件内容

控件名

DUI使用的控件名以export的名字为准，例如在控件中定义名称customCard：

export default{
  name: 'customCard',
  widgetType: 'content'
}

但是export为customContentCard：

import CustomCard from './src/custom-card'
export default{
  customContentCard: CustomCard
}

则实际的控件名为customContentCard。

控件类型

控件中可以定义控件类型widgetType

export default{
  name: 'customCard',
  widgetType: 'content'
}

widgetType可以为下表中的几个有效值，对应几个类型的控件。
其它值都会被认为是Custom类型。

widgetType	控件类型
content	图文卡片
list	列表
web	内嵌网页
media	音乐播放

Demo下载

参考工程下载：点此下载

参考文档

Vue: https://cn.vuejs.org/