乐鑫Esp32学习之旅 18 入门京东微联·小京鱼的控制面板H5开发，读懂vue语法，做自己的控制页面。

• 本系列博客学习由非官方人员 半颗心脏 潜心所力所写，仅仅做个人技术交流分享，不做任何商业用途。如有不对之处，请留言，本人及时更改。

文章目录

• 一、前言
• 二、为何 京东微联接入务必写控制面板/li>
• 三、环境搭建开发流程
• • 3.1 开发环境搭建
  • 3.2 下载公用H5面板；
  • 3.3 修改 welinkconfig.json
  • 3.4 如何找到 authenticationTokenKey /li>
  • 3.5 项目启动
• 四、文件夹以及文件说明
• • 4.1 标准模板
  • • • 4.1.1标准参数：
      • 其他参数
  • 组件介绍及使用
• 四、其他
• • 另外，不要把我的博客作为学习标准，我的只是笔记，难有疏忽之处，如果有，请指出来，也欢迎留言哈！

一、前言

     作为一个全栈开发者，不能没一些前端技术，包括热门的 vue 、AngularJS 、react 三大前端框架，好吧！坦白说，我只对第一个熟悉，后面2个也只是了解；

     其中的今天介绍的笔记京东微联·小京鱼的控制面板H5开发的语法框架都是基于vue 的，所以，甚是熟悉，也可以自定义组件，下面，我带大家编译一个公版的前端控制界面；

二、为何 京东微联接入务必写控制面板/h2>

---

     京东微联的 小京鱼app 也是一种跨平台方案，就是部分是原生开发的，而一部分是 页面，官方说了，这种跨平台技术是 vue 框架；

     前端配置是通过H5的方式在小京鱼APP中生成设备控制页面，让用户实现远程控制设备的功能。无论您的产品是空调、净化器、冰箱、洗衣机等等，都可以通过我们提供的JS SDK和前端规范开发相应的界面。

3.3 修改 welinkconfig.json

      在项目根目录中有一个 文件

• 可以配置沙箱或线上地址，默认沙箱地址。

  • 沙箱：https://sbappgw.jd.com
  • 线上：https://gw.smart.jd.com

• 需要在微联开发者中心获得（必填），是 H5 本地调试工具的令牌。虚拟设备或真实设备通过小京鱼 APP 绑定到开发者账 下才会生成 。

• 要调试的HTML5项目目录（必填）。

3.4 如何找到 authenticationTokenKey /h2>

      1. 登录到小京鱼服务平台

      备注： 有效期 24 小时，如果失效，需要从新登陆小京鱼服务平台获取。

3.5 项目启动

      在压缩包根目录下 bash 安装依赖操作。

四、文件夹以及文件说明

     因为我做的是 灯具类产品，下面的全部说明都是基于灯具类阐述！

4.1 标准模板

标准模板包括： 头图、设备开关、亮度设置、色温设置、色彩设置、节能、定时设置；

主页面

标准模板包含如下控件：

设备开启状态

说明：

1. streamId: 表示该组件可控制的stream_id;
2. title: 表示组件的标题;
3. list: 表示组件显示的选项的数据，一个对象代表一个模式类型; (有超过12个类型时需要在pages文件夹下创建二级页面);
4. modeDescription: 当list数组中对象为2时，组件下方出现的说明行文案，该属性只包含两个元素，每个元素字数最长限制为25个中文字符;
5. value: 表示当前选中 id;
6. iconPosition: ‘top’ 表示 模式组件 icon 在 text 上面;
7. PowerOn： 当 Power 为关时隐藏控制字段;

氛围灯开关，无需修改，直接使用。
开启时，氛围灯亮度设置和氛围灯色彩设置功能显示；氛围灯关闭时，氛围灯亮度设置和氛围灯色彩设置功能不显示；

氛围灯亮度设置，组件数据格式为：

说明：

1. streamId: 表示该组件可控制的stream_id;
2. streamName: 表示组件的标题;
3. min: 滑杆最小值；
4. max: 最大值;
5. tooltip: 滑动时，提示;
6. dots: 无极滑杆两端的图标或文字提示;
7. rangDesc: 副标题显示的当前值，如此项为设置则显示滑杆当前值；

氛围灯色彩设置，无需修改，直接使用。

亮度设置，组件数据格式为：

说明：

1. streamId: 表示该组件可控制的stream_id;
2. streamName: 表示组件的标题;
3. min: 滑杆最小值；
4. max: 最大值;
5. tooltip: 滑动时，提示;
6. dots: 无极滑杆两端的图标或文字提示;

色彩设置，无需修改，直接使用。

色温设置，组件使用数据格式为：