# H5音乐盒车载

**Repository Path**: li-jinit/h5-music-box-car

## Basic Information

- **Project Name**: H5音乐盒车载
- **Description**:  H5项目：结合鸿蒙Api开发而成，
功能定义：开关
信息展示
模式调节
音源选择
输出音量
声场选择
声场调节
音效选择
EQ调节
混音设置
降噪设置
喇叭设置
固件更新
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-21
- **Last Updated**: 2022-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# H5-HiLink新模板使用说明
## 1 开发前准备

<img src="C:\Users\Administrator\Desktop\product-2FAN\img\音源选择.png" alt="音源选择" style="zoom: 25%;" />

<img src="C:\Users\Administrator\Desktop\product-2FAN\img\EQ调节.png" alt="EQ调节" style="zoom:25%;" />

### 1.1 环境配置
    Node.js   https://nodejs.org/zh-cn/
    Vs code   https://code.visualstudio.com/
    vue       https://cn.vuejs.org/v2/guide/installation.html
### 1.2 拉取代码
首先通过git拉取代码到本地，代码仓地址如下：

http://gitlab.kaihongdigi.com:9010/HarmonyOSConnect/h5-hilink-template
### 1.3 安装依赖包
下载工程后,进入项目根目用cmd打开控制台

![](./img/npm1.png)

在控制台运行命令 npm install。
安装完成后会生成node_modules文件夹

![](./img/npm2.jpg)




### 1.4 文件目录及说明
```
├── pubilc                                           # 自动蓝牙连接配置文件
├── src                 
│   ├── assets                                       # 资源文件夹
│   │   ├── iamges                                   # 图片
│   │   └── style                                    # 样式
│   ├── components                                   # 公共组件    
│   └── pages                        
│       ├── hilink                                   # hilink管理文件
│       │      ├── BlueToothManage                   # 老版蓝牙管理类
│       │      ├── BleManage                         # 套餐4蓝牙管理类
│       │      ├── Config                            # 配置文件
│       │      └── WifiManage                        # wifi管理类
│       ├── i18n                                     # 国际化
│       ├── page                                     # 页面模块
│       │   ├── bleDemo                              # xxx页面
│       │   └── wifiDemo       
│       ├── router                                   # 路由配置  
│       ├── store                                    # vuex配置
│       │   └──modules                               # vuex模块
│       ├── uitls                                    # 工具类
│       ├── App                                      # 工程主入口页面
│       └── main                                     # 工程主入口配置      
```


### 2 BlueToothManage 使用
2.1 config 配置

需要在hilink下的config 文件中配置 serviceId、characteristicId、writeCharacteristicId。

![](./img/blecofig.jpg)

id的获取方式可以直接找对应固件的人,或者使用蓝牙助手连接查看。

![](./img/lanyazhushou.png)

2.2 在需要使用的文件中引入 并且调用init方法初始化。

![](./img/bleinit.jpg)

2.3 初始化后可以使用vconsole查看日志，如果看到 changeStatus 变为2了，就表示蓝牙连接成功。

2.4 蓝牙发送指令

![](./img/blesend.jpg)

2.5 蓝牙数据管理

通过接口查询到的数据建议全部保存在vuex 对应的ble模块下

目录pages/store/modules/ble.js

![](./img/blevuex.jpg)

2.6 更新数据

![](./img/bleupdata.jpg)

2.7 获取及监听数据

![](./img/bleget.jpg)

### 3 WifiManage 使用

3.1 wifi需要通过智慧生活去连接,代码中不需要额外配置,连接成功后可以直接使用。

3.2 使用方法

![](./img/wifiuse.jpg)

3.3 数据管理基本和蓝牙一致只需要替换对应的模块（ble/xxx替换成wifi/xxx）

目录pages/store/modules/wifi.js

3.4 更新数据

![](./img/wifiupdata.jpg)

3.5 获取及监听数据

![](./img/wifiget.jpg)

### 4 BlueToothManage、WifiManage使用demo

![](./img/demo.jpg)


## 5 调试前准备
### 5.1 配置 vconsole
项目根目录下运行npm install vconsole -S
main.js 文件中添加导入vconsole

![](./img/vconsole.png)

### 5.2 智慧生活debug版本下载
android

![](./img/android_debug.png)

ios
https://testflight.apple.com/join/UB1qFo8g

### 5.3 启动项目
在项目根目录下打开控制台运行npm run serve或者在项目目录中选中package.json点击调试，选择启动

![](./img/npmstart.png)

启动之后会在控制台显示地址

![](./img/starturi.jpg)

### 5.4 智慧生活app配置
打开app ── 我的 ── 设置 ── 关于 ── 环境设置 ── 认证沙箱

打开app ── 我的 ── 设置 ── 关于 ── H5地址配置

![](./img/wd.jpg)

![](./img/setting.jpg)

![](./img/about.jpg)

![](./img/enviro.jpg)

![](./img/h5uri.jpg)

注意：

如果是第一次连接蓝牙，需要在地址后面加上/static/connect.html。（http://xxx.xx.x.x:8080/static/connect.html）

再去添加设备扫描，连接成功后需要再次去H5配置中把/static/connect.html 后缀去掉

如果是wifi链接，配置ip就不需要加/static/connect.html。

本地调试需要电脑与手机在同一个网段,不然app无法访问配置的连接。