鸿蒙开发小程序语音聊UI天开发全攻略

鸿蒙小程序开发环境搭建

安装DevEco Studio 下载最新版DevEco Studio（需HarmonyOS官网注册账号），支持Windows/Mac平台。安装时勾选SDK Tools和Node.js组件，安装完成后启动IDE会自动下载SDK。

配置开发环境 在Preferences中设置HarmonyOS SDK路径，确保API Version≥3.0。创建项目时选择"Application→Empty Ability"，设备类型选择Phone，语言支持JS/eTS。

模拟器配置 在Device Manager中下载Phone模拟器镜像（建议选择API 6+版本），启动后需保持模拟器运行状态。真机调试需在开发者选项中开启USB调试模式。

语音聊天工具UI实现

主界面布局（JS示例）

// pages/index/index.js
export default {
  data: {
    messages: [
      {text: "你好！", isMe: false},
      {text: "Hi!", isMe: true}
    ],
    recording: false
  }
}

<!-- pages/index/index.hml -->
<div class="container">
  <list class="chat-list">
    <list-item for="{{messages}}" type="message">
      <div class="{{$item.isMe ? 'my-msg' : 'other-msg'}}">
        <text>{{$item.text}}</text>
      </div>
    </list-item>
  </list>

  <div class="input-area">
    <input type="button" value="按住说话" 
           @touchstart="startRecord" 
           @touchend="stopRecord"
           show="{{!recording}}">
    <input type="button" value="录音中..." 
           show="{{recording}}">
  </div>
</div>

/* pages/index/index.css */
.container {
  flex-direction: column;
  justify-content: space-between;
}
.chat-list {
  width: 100%;
  height: 80%;
}
.my-msg {
  background-color: #95ec69;
  align-self: flex-end;
}
.other-msg {
  background-color: #ffffff;
}
.input-area {
  height: 15%;
}

语音录制功能实现

// pages/index/index.js
import media from '@ohos.multimedia.media';
import fileIO from '@ohos.fileio';

startRecord() {
  this.recording = true;
  let options = {
    uri: 'internal://app/messages/audio.mp3',
    audioSampleRate: 44100,
    numberOfChannels: 2
  };
  media.createAudioRecorder(options).then((recorder) => {
    this.recorder = recorder;
    recorder.start();
  });
}

stopRecord() {
  this.recorder.stop().then(() => {
    this.recording = false;
    this.$emit('newAudio', {path: 'internal://app/messages/audio.mp3'});
  });
}

网络通信模块

WebSocket连接管理

// utils/websocket.js
export default class WsClient {
  constructor(url) {
    this.socket = new WebSocket(url);
    this.socket.onopen = this.handleOpen;
    this.socket.onmessage = this.handleMessage;
  }

  handleOpen() {
    console.info('WebSocket connected');
  }

  handleMessage(event) {
    const msg = JSON.parse(event.data);
    postMessage(msg); // 通过事件总线传递消息
  }

  sendAudio(data) {
    const blob = new Blob([data], {type: 'audio/mp3'});
    this.socket.send(blob);
  }
}

音频消息组件

<!-- components/audio-message.hml -->
<div class="audio-msg" onclick="playAudio">
  <image src="{{isMe ? 'play_blue.png' : 'play_green.png'}}"></image>
  <text>{{duration}}''</text>
</div>

// components/audio-message.js
export default {
  props: ['src', 'isMe'],
  playAudio() {
    const audio = new Audio(this.src);
    audio.play();
  }
}

关键注意事项

权限配置 在config.json中添加必要权限：

"reqPermissions": [
  {
    "name": "ohos.permission.MICROPHONE"
  },
  {
    "name": "ohos.permission.READ_MEDIA"
  },
  {
    "name": "ohos.permission.WRITE_MEDIA"
  }
]

性能优化建议

• 使用ListView的cachedCount属性优化长列表
• 音频文件采用分片上传策略
• WebSocket添加心跳检测机制
• 敏感操作添加权限动态申请逻辑

调试技巧

• 使用HiLog输出调试日志
• 利用DevEco Profiler分析内存泄漏
• 真机调试时开启"调试模式"获取完整日志
• 使用分布式调试跨设备测试功能

完整示例项目需包含以上核心模块，配合鸿蒙的分布式能力，可进一步实现跨设备语音接力等高级功能。实际开发中需根据API版本差异调整部分接口调用方式。

鸿蒙微信小程序开发基础例程

项目结构

微信小程序在鸿蒙系统的开发结构与标准微信小程序基本一致，主要包含以下目录：

project/
├── pages/               // 页面目录
│   ├── index/           // 首页
│   │   ├── index.js     // 逻辑层
│   │   ├── index.json   // 配置
│   │   ├── index.wxml   // 视图层
│   │   └── index.wxss   // 样式
├── app.js               // 全局逻辑
├── app.json             // 全局配置
└── app.wxss             // 全局样式

全局配置（app.json）

{
  "pages": ["pages/index/index"],
  "window": {
    "navigationBarTitleText": "鸿蒙小程序示例",
    "enablePullDownRefresh": true
  },
  "networkTimeout": {
    "request": 10000
  }
}

页面逻辑（index.js）

// 页面初始数据
Page({
  data: {
    message: 'Hello 鸿蒙',
    list: []
  },

  // 生命周期函数
  onLoad() {
    this.loadData();
  },

  // 自定义方法
  loadData() {
    wx.request({
      url: 'https://api.example.com/data',
      success: (res) => {
        this.setData({ list: res.data });
      }
    });
  },

  // 事件处理
  handleTap() {
    wx.showToast({
      title: '按钮点击',
      icon: 'success'
    });
  }
});

页面视图（index.wxml）

<view class="container">
  <text>{{message}}</text>
  <button bindtap="handleTap">点击交互</button>
  <view wx:for="{{list}}" wx:key="id">
    {{item.name}}
  </view>
</view>

页面样式（index.wxss）

.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
button {
  margin-top: 15px;
}

核心功能实现

网络请求封装

const request = (url, method = 'GET', data = {}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      method,
      data,
      success: (res) => resolve(res.data),
      fail: (err) => reject(err)
    });
  });
};

// 使用示例
const fetchData = async () => {
  try {
    const data = await request('https://api.example.com/data');
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

本地存储管理

const storage = {
  set: (key, value) => {
    wx.setStorageSync(key, JSON.stringify(value));
  },
  get: (key) => {
    const data = wx.getStorageSync(key);
    return data ? JSON.parse(data) : null;
  },
  remove: (key) => {
    wx.removeStorageSync(key);
  }
};

设备能力调用

// 获取地理位置
wx.getLocation({
  type: 'gcj02',
  success: (res) => {
    console.log(res.latitude, res.longitude);
  }
});

// 调用摄像头
wx.chooseImage({
  count: 1,
  success: (res) => {
    const tempFilePaths = res.tempFilePaths;
    wx.previewImage({ urls: tempFilePaths });
  }
});

鸿蒙特性适配

分布式能力调用

// 检查分布式能力
if (wx.canIUse('getDistributedStorage')) {
  wx.getDistributedStorage({
    success: (res) => {
      console.log('跨设备数据:', res.data);
    }
  });
}

// 设备发现
wx.startBluetoothDevicesDiscovery({
  success: (res) => {
    wx.onBluetoothDeviceFound((res) => {
      console.log('发现设备:', res.devices);
    });
  }
});

原子化服务封装

// 服务卡片配置
Page({
  data: {
    cardData: {
      title: '服务卡片',
      content: '鸿蒙原子化服务示例'
    }
  },

  onShareAppMessage() {
    return {
      title: this.data.cardData.title,
      path: '/pages/index/index',
      imageUrl: '/assets/card.png'
    };
  }
});

注意事项

1. 鸿蒙系统的微信小程序需要确保使用最新版基础库（建议2.15.0+）
2. 分布式API需要真机调试，模拟器可能不支持
3. 原子化服务需要单独申请权限
4. 网络请求域名需在微信后台配置白名单

微信小程序语言聊天UI开发

页面结构（WXML）

<view class="chat-container">
  <scroll-view scroll-y class="message-list">
    <block wx:for="{{messages}}" wx:key="id">
      <view class="message-item {{item.direction}}">
        <text>{{item.content}}</text>
      </view>
    </block>
  </scroll-view>
  
  <view class="input-area">
    <input type="text" placeholder="输入消息" bindinput="onInput" value="{{inputValue}}"/>
    <button bindtap="sendMessage">发送</button>
  </view>
</view>

样式（WXSS）

.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.message-list {
  flex: 1;
  padding: 20rpx;
}
.message-item {
  margin: 10rpx 0;
  padding: 15rpx;
  border-radius: 8rpx;
  max-width: 70%;
}
.right {
  background-color: #07C160;
  color: white;
  margin-left: auto;
}
.left {
  background-color: #F7F7F7;
  margin-right: auto;
}
.input-area {
  display: flex;
  padding: 20rpx;
  border-top: 1rpx solid #eee;
}

逻辑（JS）

Page({
  data: {
    messages: [],
    inputValue: ''
  },
  
  onInput(e) {
    this.setData({ inputValue: e.detail.value });
  },
  
  sendMessage() {
    const newMsg = {
      id: Date.now(),
      content: this.data.inputValue,
      direction: 'right'
    };
    
    this.setData({
      messages: [...this.data.messages, newMsg],
      inputValue: ''
    });
    
    // 这里调用NB-IoT通信接口
    this.sendToNBiot(newMsg.content);
  },
  
  receiveMessage(content) {
    const newMsg = {
      id: Date.now(),
      content: content,
      direction: 'left'
    };
    this.setData({ messages: [...this.data.messages, newMsg] });
  }
});

NB-IoT通信实现

硬件端代码（C语言示例）

#include <stdio.h>
#include <string.h>
#include "nbiot_module.h"

void send_to_server(const char* message) {
    nbiot_init();
    nbiot_connect("your_server_ip", 5683);
    nbiot_send(message, strlen(message));
    nbiot_close();
}

void receive_callback(char* data) {
    printf("Received: %s\n", data);
    // 这里可以添加处理逻辑
}

int main() {
    nbiot_set_receive_callback(receive_callback);
    while(1) {
        // 保持连接监听
    }
    return 0;
}

小程序端WebSocket实现

const socket = wx.connectSocket({
  url: 'wss://your_server_address',
  success() {
    console.log('连接成功');
  }
});

socket.onMessage(res => {
  this.receiveMessage(res.data);
});

// 修改之前的sendMessage方法
sendToNBiot(message) {
  socket.send({
    data: message,
    success() {
      console.log('消息已发送');
    }
  });
}

通信协议设计

消息格式（JSON）

{
  "deviceId": "NB123456",
  "timestamp": 1630000000,
  "messageType": "text",
  "content": "Hello World"
}

服务器转发逻辑（Node.js示例）

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  ws.on('message', message => {
    // 解析消息
    const msgObj = JSON.parse(message);
    
    // 根据deviceId转发到对应的小程序客户端
    broadcastToClients(msgObj);
  });
});

function broadcastToClients(msgObj) {
  wss.clients.forEach(client => {
    if(client.deviceId === msgObj.targetDevice) {
      client.send(JSON.stringify(msgObj));
    }
  });
}

安全实现

消息加密（AES示例）

const CryptoJS = require('crypto-js');

function encryptMessage(message, key) {
  return CryptoJS.AES.encrypt(message, key).toString();
}

function decryptMessage(ciphertext, key) {
  const bytes = CryptoJS.AES.decrypt(ciphertext, key);
  return bytes.toString(CryptoJS.enc.Utf8);
}

小程序端调用加密

sendToNBiot(message) {
  const encrypted = encryptMessage(message, 'your_secret_key');
  socket.send({
    data: encrypted,
    success() {
      console.log('加密消息已发送');
    }
  });
}

性能优化

消息分块处理

function sendLargeMessage(content) {
  const chunkSize = 1024;
  for (let i = 0; i < content.length; i += chunkSize) {
    const chunk = content.slice(i, i + chunkSize);
    socket.send({
      data: chunk,
      success() {
        console.log(`发送分块 ${i/chunkSize + 1}`);
      }
    });
  }
}

心跳检测

setInterval(() => {
  socket.send({
    data: 'HEARTBEAT',
    success() {
      console.log('心跳发送成功');
    }
  });
}, 30000);