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

本系列博客学习由非官方人员半颗心脏潜心所力所写，仅仅做个人技术交流分享，不做任何商业用途。如有不对之处，请留言，本人及时更改。1、爬坑学习新旅程，虚拟机搭建esp32开发环境，打印 “Hellow World”。2、巧用eclipes编辑器，官方教程在在Windows下搭建esp32开发环境，打印 “Hellow World”。3、认识基本esp32的GPIO接口，开...

半颗心脏

1946人浏览 · 2019-11-25 16:03:20

半颗心脏 · 2019-11-25 16:03:20 发布

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

1、爬坑学习新旅程，虚拟机搭建esp32开发环境，打印 “Hellow World”。
2、巧用eclipes编辑器，官方教程在在Windows下搭建esp32开发环境，打印 “Hellow World”。
3、认识基本esp32的GPIO接口，开始点亮您的第一盏 LED和中断回调实现按键功能。
4、体会esp32的强大的定时器功能，实现定时2s闪烁一盏LED灯。
5、接触实践esp32的pwm宽度脉冲功能，实现呼吸效果闪烁一盏LED灯。
6、smartConfig和微信airKiss在esp32的实现，一键配网轻松快捷连接路由器。
7、利用GPIO中断做一个按键的短按和长按的回调事件，再也无须担心触发源。
8、esp32上实现本地 UDP 客户端和服务端角色，在局域网内实现通讯。
9、esp32上实现本地 TCP 客户端和服务端角色，可断线重连原路返回数据。
10、乐鑫esp32 SDK编程利用rmt驱动ws2812七彩灯，实现彩虹渐变效果。
11、入门乐鑫esp-adf 音频框架开发，esp32造一个蓝牙耳机，实现切换歌曲，获取歌曲信息等功能。
12、开源一个微信公众号airkiss配网esp32以及局域网发现功能的工程，分享一个airkiss配网小工具。
13、esp32 内置 dns 服务器，无需外网访问域名返回指定网页。
14、esp32 sdk编程实现门户强制认证，连接esp32热点之后，自动强制弹出指定的登录界面。
15、认识本地离线语音唤醒识别框架 esp-skainet ，实现较低成本的硬件语音本地识别控制。
16、学习本地语音唤醒离线识别框架 esp-skainet ，如何修改唤醒词? 如何自定义命令词？如何做意图动作？
17、全网首发，乐鑫esp32 sdk直连京东微联·小京鱼 · IoT开放平台，实现叮咚音响语音智能控制。
18、入门京东微联·小京鱼的控制面板H5开发，读懂vue语法，做自己的控制页面。

文章目录

一、前言

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

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

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

接触最多的是类似涂鸦、机智云或alios这种一站式开发，生成固件生成app，直接使用就可以了。其实，他是可以在云端编辑界面，可以为组件做一些美化，比如颜色修改，组件替换，到最后才生成页面；

我觉得我是最早接触这种一站式开发的一批人员了，之前的2017年阿里智能（阿里小智）平台，也是可以自定义控制面板，因为阿里智能app是原生+H5方案构成的，怎么理解？就是里面是个跨平台的框架，可能是 react native框架，具体我没去琢磨；这样，就可以在ios和Android上公用一个代码了，这样大大减少开发周期；之前的公司任职 Android开发的我，就要求学这个开发，但是由于某些原因此项目不做了；但是利用这种云端编辑控制面板，然后无需更新ios和Android端，即可打开此设备的控制面板，这种技术是非常火热的！

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

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

在这里插入图片描述

三、环境搭建开发流程

上面说了，这样的H5通用模版方案是为了功能目标：减少厂商开发H5时间！

当前支持品类：插座，空调，灯，风扇，扫地机器人，取暖器，加湿器，空气净化器，电饭煲，电视，微波炉，电烤箱，多位开关，电水壶，养生壶，净水器，电热水器，洗衣机。

3.1 开发环境搭建

支持系统：macOS，Windows x64，Linux x64

目前的前端三大框架都是依赖Node.js ，所以这是必装软件：安装Node.js 官网，根据操作系统下载，一路傻瓜式安装，之后查看是否安装成功，我的 win10 Node环境是 10.14.1

C:\Users\87018>node -v
v10.14.1

安装IED (推荐VS Code) 根据操作系统下载；至此，环境搭建完毕，是不是非常简单！！

3.2 下载公用H5面板；

这里务必提醒一下，个人开发者只能用公用H5面板，而企业开发者可以根据公用H5面板自行修改页面！

在这里插入图片描述

3.3 修改 welinkconfig.json

在项目根目录中有一个 welinkconfig.json 文件

{
  "jd.nsng.smart.url": "https://sbappgw.jd.com",
  "authenticationTokenKey": "0882741796_91900007_15012345698977754_c0b963d6",
  "staticPath": "project"
}

jd.nsng.smart.url 可以配置沙箱或线上地址，默认沙箱地址。
- 沙箱：https://sbappgw.jd.com
- 线上：https://gw.smart.jd.com
authenticationTokenKey 需要在微联开发者中心获得（必填），是 H5 本地调试工具的令牌。虚拟设备或真实设备通过小京鱼 APP 绑定到开发者账号下才会生成 authenticationTokenKey。
staticPath 要调试的HTML5项目目录（必填）。

3.4 如何找到 authenticationTokenKey ?

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

2. 进入控制台
在这里插入图片描述

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

3.5 项目启动

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

# 安装依赖
npm install

# 在loaclhost:8082 启动服务
npm run dev

# 打包并压缩生产环境文件
npm run build

四、文件夹以及文件说明

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

├── dist                  // npm run build 打包后生成的文件
├── src
|   ├── assets            // 存放业务图片资源
|   ├── comppnents        // 存放业务组件
|   ├── pages             // 存放 router 页面
|   ├── router            // 配置 router 跳转路径
|   ├── store             // 存放定义操作数据
|   ├── timer             // 封装的定时组件
|   ├── utils             // 存放工具
|   └── App.vue           // 入口页面

4.1 标准模板

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

主页面 src/pages/index.vue

标准模板包含如下控件：

<template>
    <div>
      <Header />
      <Power />
      <Mode />
      <BrightLED />
      <ColorTemp />
      <Color />
      <Economy />
      <TimeTask />
    </div>
</template>

设备开启状态

4.1.1标准参数：

参数名称	streamId	Value	是否可控
开关	Power	0: 关闭, 1: 开启	可控
模式设置	Mode	0 无模式，1 阅读模式，2 观影模式，4 睡眠模式，11 浪漫模式，12 节能模式，8 休息模式	可控
亮度设置	BrightLED	数值调节，最小值为 0，最大值为 255，用户可调节其中任意整数值	可控
色温设置	ColorTemp	最小值为 3000，最大值为 6500；色温步长为 500	可控
色彩设置	Color	0:红色,1:橙色,2:蓝色,3:紫色,4:绿色	可控
节能	Economy	0: 关闭, 1: 开启	可控
定时设置	TimeTask		可控

其他参数

参数名称	streamId	Value	是否可控
氛围灯	AmbientLight	0: 关, 1: 开	可控
氛围灯亮度	AmbientBright	最小值为 0%，最大值为 100%，用户可调节其中任意整数值。设备端存储亮度为 0 到 255，转换公式为:设备存储值/2.55 等于亮度	可控
氛围灯色彩	HumanSense	0:红色,1:橙色,2:蓝色,3:紫色,4:绿色	可控
夜灯	SleepLight	0: 关, 1: 开	可控

组件介绍及使用

业务组件路径：src/components/

Header

智能灯品类头图，可以直接使用，无需修改

Power

设备开关，无需修改，直接使用。
设备开启时，显示其他控件，关闭状态时，其他控件隐藏；

Mode

该组件是对应模式类组件, 该组件数据格式为：

streamId: 'Mode',
title: '模式设置',
modeDescription: [],
list: [
  {
    text: '自定义',
    icon: 'icon-defined',
    id: 0,
  },
  {
      text: '阅读',
      icon: 'icon-read',
      id: 1,
  },
  {
      text: '观影',
      icon: 'icon-film',
      id: 2,
  },
  ...
],

说明：

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

AmbientLight

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

AmbientBright

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

data() {
  return {
    streamId: 'AmbientBright',
    streamName: '氛围灯亮度',
    rangeDesc: '0%',
    min: 0,
    max: 255,
    tooltip() {
      return null;
    },
    dots: [
      {
        icon: 'light-low',
      },
      {
        icon: 'light-high',
      },
    ],
  };
},

说明：

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

AmbientColor

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

BrightLED

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

data() {
  return {
    streamId: 'BrightLED',
    streamName: '亮度设置',
    min: 0,
    max: 255,
    tooltip() {
      return null;
    },
    dots: [
      {
        icon: 'light-low',
        text: ''
      },
      {
        icon: 'light-high',
        text: ''
      },
    ],
  };
},

说明：

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

Color

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

ColorTemp

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

data() {
  return {
    streamId: 'ColorTemp',
    title: '色温设置',
    minObj: {
      value: 3000,
      text: '3000',
      icon: '',
    },
    maxObj: {
      value: 6500,
      text: '6500',
      icon: '',
    },
    stepLength: 500,
    tooltip: () => '',
  };
},

说明：

streamId: 表示该组件可控制的stream_id;
title: 表示组件的标题;
minDesc: 滑杆最小值时，副标题显示的文字；
minObj: 表示滑杆的最小值
maxObj: 表示滑杆的最大值
stepLength: 表示滑杆的步长值
tooltip: 表示滑动到节点时的提示;。

SleepLight

夜灯开关，无需修改，直接使用。

Economy

节能开关，无需修改，直接使用。

TimeTask

定时设置，无需修改，直接使用。

四、其他

正确编译之后，webpack会开启一个本地服务器，比如下面的提示，根据提示访问提示的链接，之后浏览器开发者模式，便可看到真正的移动端效果；

那么如何在真机看到效果呢？打开小京鱼app，打开设备控制面板即可看到效果啦！

Child html-webpack-plugin for "index.html":
         Asset      Size  Chunks  Chunk Names
    index.html  1.36 MiB       0
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 1.28 KiB {0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Compiled with warnings.
> Listening at http://localhost:8083/index.html