【成长计划挑战赛】OpenHarmony-家庭医生终端系统-空气质量检测 - HarmonyOS技术社区 - 电子技术论坛 - 广受欢迎的专业电子论坛
分享 收藏 返回

韩乐 关注 私信
[文章]

【成长计划挑战赛】OpenHarmony-家庭医生终端系统-空气质量检测

一、项目介绍基于OpenHarmony使用HI3861实现空气质量的检测和上传（具有独立APP）
  • 采集空气温湿度数据
  • 采集空气中PM2.5的数据
  • 具有WEB配网功能
  • 与服务器进行连接并实现数据交互
  • 可使用清洁能源（太阳能板进行供电和充电）
  • 开发基于OpenHarmony的控制APP
  • 具有离线屏幕显示功能（OLED-0.96寸）
  • 2.png

二、WEB配网教程视频：https://www.bilibili.com/video/BV19L411M75o（1）碰一碰配网介绍
11.png


通过一机一码的形式，识别到NFC后云端验证设备，进行弹窗拉起，再由NAN或AP的方式，实现发送配网的SSID和Password。
NAN配网
  • 操作设备上配网键让设备进入配网模式
  • 手机碰一碰设备上的NFC标签，拉起轻应用
  • 选择配网wifi
  • 调用 discoveryByNAN接口code为0
  • 调用connectDevice接口连接设备
  • 调用configDeviceNet接口开始配网
  • 调用disconnectDevice接口断开网络
  • 调用检测设备是否上线接口
  • 检测到设备上线，调用绑定设备接口

AP配网
  • 操作设备上配网键让设备进入配网模式
  • 手机碰一碰设备上的NFC标签，拉起轻应用
  • 选择配网wifi
  • 调用discoveryByNAN接口code不为0
  • 调用discoveryBySoftAp接口搜索当前设备的ap，搜索不到的话尝试直接去连接ap
  • 调用connectDevice接口连接设备
  • 调用configDeviceNet接口开始配网
  • 调用disconnectDevice接口断开网络
  • 调用检测设备是否上线接口
  • 检测到设备上线，调用绑定设备接口

（2）WEB配网
本章主要讲述如何实现web配网，是在STA模式下，模拟为一个网站服务器，当手机或其它设备进行访问时，检测是否为浏览器的协议头（HTTP），返回一个封装好的网页界面，通过网页上输入框的填写实现配网。
12.png
HTTP协议介绍：
  • http协议->超文本传输协议
  • 应用：编写基于http协议的数据传输程序（网站中浏览器端获取网页的过程）
  • http请求作用：将要获取的内容以http协议的格式发送给服务端，服务端根据格式进行解析获取到其真实内容，将结果以http协议的格式回复给客户端

（3）WEB配网界面html源代码如下
  1. tial-scale=1.0">程皖配网
    欢迎使用程皖配网

    WiFi名称：

    WiFi密码：

    服务器IP：

    服务器端口：

13.png

实现的效果如下：
14.png

(4)soft模式下实现网页服务器
该部分步骤分为四步：打开WIFI、进入softap模式，创建tcp服务器，解析HTTP指令。此处可参照
润和开源项目：
https://gitee.com/hihopeorg/HarmonyOS-IoT-Application-Development/tree/master
1）打开WIFI   
  1. ret = hi_wifi_init(APP_INIT_VAP_NUM, APP_INIT_USR_NUM);
  2.     if (ret != HISI_OK) {
  3.         printf("wifi init failed!n");
  4.     } else {
  5.         printf("wifi init success!n");
  6.     }
2）进入softap模式
  1. 在softap.c文件下WifiAPTask函数，注册回调
  2.    //注册wifi事件的回调函数
  3.     g_wifiEventHandler.OnHotspotStaJoin = OnHotspotStaJoinHandler;
  4.     g_wifiEventHandler.OnHotspotStaLeave = OnHotspotStaLeaveHandler;
  5.     g_wifiEventHandler.OnHotspotStateChanged = OnHotspotStateChangedHandler;

  7.     error = RegisterWifiEvent(&g_wifiEventHandler);
3)创建socket通道后进入判断接受内容循环
  1. while (1)
  2.         {
  3.             if ((ret = recv(new_fd, recvbuf, sizeof(recvbuf), 0)) == -1)
  4.             {
  5.                 printf("recv error rn");
  6.             }else
  7.             {
  8.             //printf("recv :%srn", recvbuf);
  9.             //返回s1中包含s2所有字符的最大起始段长度
  10.             //size_t strspn(const char *s1, const char *s2);
  11.             char* p= strstr(recvbuf,TEST);
  12.             uint16_t DIR_buff = p - recvbuf;
  13.             printf("rnThe GET HTTP num:%drn",DIR_buff);
  14.             if(DIR_buff<10)
  15.             {
  16.               Set_clint_flag = 1;

  18.             }else if(DIR_buff>40)
  19.             {
  20.               Set_clint_flag = 2;

  22.               char *p1, *p2;
  23.               p1 = strstr(recvbuf, "ssid=");
  24.               p2 = strstr(recvbuf, "&password");
  25.                if(p1!=0 && p2!=0 && p1
  26.                {
  27.                    p1 += strlen("ssid=");
  28.                    memcpy(get_ssid, p1, p2 - p1);
  29.                    printf("rnget the ssid = %srn", get_ssid);  
  30.                }
  31.               p1 = strstr(recvbuf, "password=");
  32.               p2 = strstr(recvbuf, "&tcp_ip");
  33.                if(p1!=0 && p2!=0 && p1
  34.                {
  35.                    p1 += strlen("password=");
  36.                    memcpy(get_pwd, p1, p2 - p1);
  37.                    printf("get the ssid = %srn", get_pwd);  
  38.                }
  39.               WifiConnect(get_ssid,get_pwd);

  41.             }else
  42.             {
  43.                 Set_clint_flag = 3;
  44.             }
  45.             
  46.             bzero(recvbuf, sizeof(recvbuf));
  47.             //close(new_fd);
  48.             }

  50.             sleep(2);

  52.             if(Set_clint_flag==1)
  53.             {

  55.         
  56.             if ((ret = send(new_fd, httphard1, strlen(httphard1), 0)) == -1)
  57.             {
  58.                 perror("send : ");
  59.                
  60.             }
  61.             if ((ret = send(new_fd, webtr, strlen(webtr), 0)) == -1)
  62.             {
  63.                 perror("send : ");
  64.                
  65.             }
  66.                
  67.                 Set_clint_flag = 0;
  68.                 new_fd = -1;
  69.                 break;            
  70.             }else if(Set_clint_flag==2)
  71.             {
  72.                 Set_clint_flag = 0;
  73.                 new_fd = -1;
  74.                 WifiConnect(get_ssid,get_pwd);
  75.                 break;   
  76.             }else if(Set_clint_flag==3)
  77.             {
  78.                 Set_clint_flag = 0;
  79.                 new_fd = -1;
  80.                 break;      
  81.             }
  82.             sleep(2);
  83.         }
在这个循环中实现了判断当前是否为HTTP指令，如果接收到访问信号就回发网页具体内容，实现手机显示网页。
在填写SSID和PWD后点击提交，此时手机再向HI3861发出HTTP指令，中间携带填入的信息，该部分由以下程序读取：
  1.                              p1 = strstr(recvbuf, "ssid=");
  2.               p2 = strstr(recvbuf, "&password");
  3.                if(p1!=0 && p2!=0 && p1
  4.                {
  5.                    p1 += strlen("ssid=");
  6.                    memcpy(get_ssid, p1, p2 - p1);
  7.                    printf("rnget the ssid = %srn", get_ssid);  
  8.                }
此时得到帐号密码后尝试连接，即实现网页配网
  1. WifiConnect(get_ssid,get_pwd);
三、外设驱动本系统使用到usart（PM2.5传感器）、IIC（OLED显示屏）、单总线（DHT11）三个部分和TCP（双线程收发）几个部分Winodows下HI3861开发：https://www.bilibili.com/video/BV1PY41147z8HI3861：鸿蒙网页显示传感器数据：https://www.bilibili.com/video/BV1L34y1k7im（1）打开外设使能
在usr_config.mk文件中去掉注释
  1. CONFIG_I2C_SUPPORT=y
  2. CONFIG_UART0_SUPPORT=y
(2)OLED显示屏驱动
18.png


OLED，即有机发光二极管（Organic Light-Emitting Diode），又称为有机电激光显示（Organic Electroluminesence Display）。OLED由于同时具备自发光，不需背光源、对比度高、厚度薄、视角广、反应速度快、可用于挠曲性面板、使用温度范围广、构造及制程较简单等优异之特性，被认为是下一代的平面显示器新兴应用技术。
该传感器使用的IIC协议，经过IIC使能后初始化OLED就可以使用了：
  1.           hi_io_set_func(HI_IO_NAME_GPIO_13,         HI_IO_FUNC_GPIO_13_I2C0_SDA);
  2.     hi_io_set_func(HI_IO_NAME_GPIO_14,         HI_IO_FUNC_GPIO_14_I2C0_SCL);
  3.     ret = hi_i2c_deinit(HI_I2C_IDX_0);
  4.     ret |= hi_i2c_init(HI_I2C_IDX_0, 100000);
  5.     if (ret != HI_ERR_SUCCESS) {
  6.         printf("IIC errorn");
  7.     }else
  8.     {
  9.         printf("IIC suceseffuln");
  10.     }
  11.     OLED_ColorTurn(0);//0正常显示，1 反色显示
  12.     OLED_DisplayTurn(0);//0正常显示 1 屏幕翻转显示
其中主要用到的函数是void OLED_ShowChar(u8 x,u8 y,u8 chr,u8 size1)：

  2. //在指定位置显示一个字符,包括部分字符
  3. //x:0~127
  4. //y:0~63
  5. //size:选择字体 12/16/24
  6. //取模方式 逐列式
  7. void OLED_ShowChar(u8 x,u8 y,u8 chr,u8 size1)
  8. {
  9.         u8 i,m,temp,size2,chr1;
  10.         u8 y0=y;
  11.         size2=(size1/8+((size1%8)?1:0))*(size1/2);  //得到字体一个字符对应点阵集所占的字节数
  12.         chr1=chr-' ';  //计算偏移后的值
  13.         for(i=0;i
  14.         {
  15.                 //temp=asc2_1206[chr1][i];
  16.                 if(size1==12)
  17.         {temp=asc2_1206[chr1][i];} //调用1206字体
  18.                 else if(size1==16)
  19.         {temp=asc2_1608[chr1][i];} //调用1608字体
  20.                 else return;

  22.         for(m=0;m<8;m++)           //写入数据
  23.         {
  24.             if(temp&0x80)OLED_DrawPoint(x,y);
  25.             else OLED_ClearPoint(x,y);
  26.             temp<<=1;
  27.             y++;
  28.             if((y-y0)==size1)
  29.             {
  30.                 y=y0;
  31.                 x++;
  32.                 break;
  33.             }
  34.                 }
  35.   }
  36. }
(3)PM2.5传感器驱动
17.png


经过选型，选择使用ZPH02粉尘传感器，该传感器使用USART即可驱动，其协议如下：

16.png

我们只需要读取低脉冲的整数部分和小数部分即可，首先初始化USART，读取每次传来的第4和第五个数据即可，整合下进行显示


  2. /*****************************************************************************
  3.    宏定义
  4. *****************************************************************************/
  5. #define WRITE_BY_INT
  6. #define UART_DEMO_TASK_STAK_SIZE 2048
  7. #define UART_DEMO_TASK_PRIORITY  25
  8. #define DEMO_UART_NUM            HI_UART_IDX_2
  9. #define UART_BUFF_SIZE           108
  10. /*****************************************************************************
  11.    函数声明
  12. *****************************************************************************/
  13. static hi_void *uart_demo_task(hi_void *param);
  14. hi_void uart_demo(hi_void);
  15. hi_u8 GET_PM25;
  16. static hi_void *uart_demo_task(hi_void *param)
  17. {
  18.     hi_u8 uart_buff[UART_BUFF_SIZE] = {0};
  19.     hi_u8 *uart_buff_ptr = uart_buff;
  20.     hi_unref_param(param);
  21.     printf("Initialize uart demo successfully, please enter some datas via DEMO_UART_NUM port...n");

  23.     for (;;) {
  24.         hi_s32 len = hi_uart_read(DEMO_UART_NUM, uart_buff_ptr, UART_BUFF_SIZE);
  25.         if (len > 0) {
  26. #ifdef WRITE_BY_INT
  27.         
  28.             OLED_ShowChar(50,0,(unsigned char)(uart_buff_ptr[3]  / 10 % 10 + '0'),16);
  29.             OLED_ShowChar(58,0,(unsigned char)(uart_buff_ptr[3]  % 10 + '0'),16);
  30.         OLED_ShowChar(66,0,(unsigned char)(uart_buff_ptr[4]  / 10 % 10 + '0'),16);
  31.             OLED_ShowChar(74,0,(unsigned char)(uart_buff_ptr[4]  % 10 + '0'),16);
  32.         GET_PM25 = uart_buff_ptr[3]*100 + uart_buff_ptr[4];
  33.         OLED_ShowChar(40,40,(unsigned char)(GET_H  / 10 % 10 + '0'),16);
  34.             OLED_ShowChar(48,40,(unsigned char)(GET_H  % 10 + '0'),16);

  36.         OLED_ShowChar(40,20,(unsigned char)(GET_T / 10 % 10 + '0'),16);
  37.             OLED_ShowChar(48,20,(unsigned char)(GET_T  % 10 + '0'),16);
  38.             OLED_Refresh();

  40. #else
  41.             hi_uart_write_immediately(DEMO_UART_NUM, uart_buff_ptr, len);
  42. #endif
  43.         } else {
  44.             printf("Read nothing!n");
  45.             hi_sleep(1000); /* sleep 1000ms */
  46.         }
  47.     }

  49.     hi_task_delete(g_uart_demo_task_id);
  50.     g_uart_demo_task_id = 0;

  52.     return HI_NULL;
  53. }

  55. hi_void uart_demo(hi_void)
  56. {
  57.     hi_u32 ret;
  58.     hi_uart_attribute uart_attr = {
  59.         .baud_rate = 38400, /* baud_rate: 115200 */
  60.         .data_bits = 8,      /* data_bits: 8bits */
  61.         .stop_bits = 1,
  62.         .parity = 0,
  63.     };

  65.     /* Initialize uart driver */
  66.     ret = hi_uart_init(DEMO_UART_NUM, &uart_attr, HI_NULL);
  67.     if (ret != HI_ERR_SUCCESS) {
  68.         printf("Failed to init uart! Err code = %dn", ret);
  69.         return;
  70.     }
  71.    
  72.     /* Create a task to handle uart communication */
  73.     hi_task_attr attr = {0};
  74.     attr.stack_size = UART_DEMO_TASK_STAK_SIZE;
  75.     attr.task_prio = UART_DEMO_TASK_PRIORITY;
  76.     attr.task_name = (hi_char*)"uart_demo";
  77.     ret = hi_task_create(&g_uart_demo_task_id, &attr, uart_demo_task, HI_NULL);
  78.     if (ret != HI_ERR_SUCCESS) {
  79.         printf("Falied to create uart demo task!n");
  80.     }
  81. }
(4)DHT11传感器驱动
19.png

DHT11 数字温湿度传感器是一款含有已校准数字信号输出的温湿度复合传感器，内部由一个 8 位单片机控制一个电阻式感湿元件和一个 NTC 测温元件。DHT11 虽然也是采用单总线协议，但是该协议与 DS18B20 的单总线协议稍微有些不同之处。
相比于 DS18B20 只能测量温度，DHT11 既能检测温度又能检测湿度，不过 DHT11 的精度和测量范围都要低于 DS18B20，其温度测量范围为 0~50℃，误差在±2℃；湿度的测量范围为 20%~90%RH（Relative Humidity 相对湿度—指空气中水汽压与饱和水汽压的百分比），误差在±5%RH。DHT11 电路很简单，只需要将 Dout 引脚连接单片机的一个 I/O 即可，不过该引脚需要上拉一个 5K 的电阻，DHT11 的供电电压为 3~5.5V。
因为使用的是单总线协议，其驱动程序如下：
  1. /****************************************
  2. 设置端口为输出
  3. *****************************************/
  4. void DHT11_IO_OUT(void)
  5. {
  6.     //设置GPIO_11为输出模式
  7.     GpioSetDir(DHT11_GPIO, HI_GPIO_DIR_OUT);
  8. }


  11. //等待DHT11的回应
  12. //返回1:未检测到DHT11的存在
  13. //返回0:存在
  14. u8 DHT11_Check(void)            
  15. {   
  16.         hi_gpio_value gpio_val;
  17.         u8 retry=0;
  18.         GpioSetDir(DHT11_GPIO, HI_GPIO_DIR_IN);//配置为输入模式
  19.         hi_gpio_get_input_val(HI_IO_NAME_GPIO_0, &gpio_val);
  20.     while (gpio_val&&retry<100)//DHT11会拉低40~80us
  21.         {
  22.                 hi_gpio_get_input_val(HI_IO_NAME_GPIO_0, &gpio_val);
  23.                 retry++;
  24.                 hi_udelay(1);
  25.         };         
  26.         if(retry>=100)return 1;
  27.         else retry=0;
  28.     hi_gpio_get_input_val(HI_IO_NAME_GPIO_0, &gpio_val);
  29.     while ((!gpio_val)&&retry<100)//DHT11拉低后会再次拉高40~80us
  30.         {
  31.                 hi_gpio_get_input_val(HI_IO_NAME_GPIO_0, &gpio_val);
  32.                 retry++;
  33.                 hi_udelay(1);
  34.         };
  35.         if(retry>=100)return 1;           
  36.         return 0;
  37. }

  39. //初始化DHT11的IO口 DQ 同时检测DHT11的存在
  40. //返回1:不存在
  41. //返回0:存在            
  42. u8 DHT11_Init(void)
  43. {         
  44.     //设置GPIO_11的复用功能为普通GPIO
  45.          IoSetFunc(DHT11_GPIO, HI_IO_FUNC_GPIO_0_GPIO);
  46.     //设置GPIO_11为输出模式
  47.     GpioSetDir(DHT11_GPIO, HI_GPIO_DIR_OUT);
  48.                  //设置GPIO_11输出高电平
  49.     GpioSetOutputVal(DHT11_GPIO, 1);                    
  50.                 DHT11_Rst();  //复位DHT11
  51.                  return DHT11_Check();//等待DHT11的回应
  52. }




  57. //复位DHT11
  58. void DHT11_Rst(void)           
  59. {               
  60.         DHT11_IO_OUT();         //SET OUTPUT
  61.    DHT11_DQ_OUT_Low;         //拉低DQ
  62.     hi_udelay(20000);//拉低至少18ms
  63.    DHT11_DQ_OUT_High;         //DQ=1
  64.         hi_udelay(35);             //主机拉高20~40us
  65. }




  70. //从DHT11读取一个位
  71. //返回值：1/0
  72. u8 DHT11_Read_Bit(void)                          
  73. {
  74.         hi_gpio_value gpio_val;
  75.          u8 retry=0;
  76.         hi_gpio_get_input_val(HI_IO_NAME_GPIO_0, &gpio_val);
  77.   while(gpio_val&&retry<100){//等待变为低电平
  78.   hi_gpio_get_input_val(HI_IO_NAME_GPIO_0, &gpio_val);
  79.         retry++;
  80.         hi_udelay(1);
  81.     }
  82.     retry=0;
  83.     while((!gpio_val)&&retry<100){//等待变高电平
  84.         hi_gpio_get_input_val(HI_IO_NAME_GPIO_0, &gpio_val);
  85.         retry++;
  86.         hi_udelay(1);
  87.     }
  88.     hi_udelay(40);//等待40us        //用于判断高低电平，即数据1或0
  89.         hi_gpio_get_input_val(HI_IO_NAME_GPIO_0, &gpio_val);
  90.     if(gpio_val)return 1; else return 0;
  91. }
  92. //从DHT11读取一个字节
  93. //返回值：读到的数据
  94. u8 DHT11_Read_Byte(void)   
  95. {        
  96.     u8 i,dat;
  97.     dat=0;
  98.         for (i=0;i<8;i++)
  99.         {
  100.                    dat<<=1;
  101.             dat|=DHT11_Read_Bit();
  102.     }                                                   
  103.     return dat;
  104. }
  105. //从DHT11读取一次数据
  106. //temp:温度值(范围:0~50°)
  107. //humi:湿度值(范围:20%~90%)
  108. //返回值：0,正常;1,读取失败
  109. u8 DHT11_Read_Data()   
  110. {        
  111.          u8 buf[5]={ 0 };
  112.         u8 i;
  113.         DHT11_Rst();
  114.         if(DHT11_Check()==0)
  115.         {
  116.                 for(i=0;i<5;i++)//读取40位数据
  117.                 {
  118.                         buf[i]=DHT11_Read_Byte();
  119.                 }
  120.                 if((buf[0]+buf[1]+buf[2]+buf[3])==buf[4])//数据校验
  121.                 {
  122.                         GET_H = buf[0];
  123.                         GET_T = buf[2];
  124.                 }
  125.         }else return 1;
  126.         return 0;            
  127. }
(4)数据发送和接收
因为HI3861的线程限制，这边使用双线程，一个实现TCP数据的发送，另一个实现TCP数据的接收
发送线程：
  1. void TcpClientTest(const char* host, unsigned short port)
  2. {
  3.     ssize_t retval = 0;
  4.     int sockfd = socket(AF_INET, SOCK_STREAM, 0); // TCP socket
  5.     SET_SOCKET_ID = sockfd;
  6.     struct sockaddr_in serverAddr = {0};
  7.     serverAddr.sin_family = AF_INET;  // AF_INET表示IPv4协议
  8.     serverAddr.sin_port = htons(port);  // 端口号，从主机字节序转为网络字节序
  9.     if (inet_pton(AF_INET, host, &serverAddr.sin_addr) <= 0) {  // 将主机IP地址从“点分十进制”字符串 转化为 标准格式（32位整数）
  10.         printf("inet_pton failed!rn");
  11.         goto do_cleanup;
  12.     }

  14.     // 尝试和目标主机建立连接，连接成功会返回0 ，失败返回 -1
  15.     if (connect(sockfd, (struct sockaddr *)&serverAddr, sizeof(serverAddr)) < 0) {
  16.         printf("connect failed!rn");
  17.         goto do_cleanup;
  18.     }
  19.     printf("connect to server %s success!rn", host);
  20.     Wifi_SOCKET_GET();

  22. while (1)
  23. {
  24.     osDelay(500);
  25.     /////////////////////////////////////////////////////////上传函数
  26.     retval = send(sockfd, buff, 6,0);//其中buff为数据
  27. }

  29.     do_cleanup:
  30.     printf("do_cleanup...rn");
  31.     closesocket(sockfd);
  32. }
接收处理线程：
  1. static BOOL Wifi_SOCKET_RUN(void)
  2. {
  3.     ssize_t retval = 0;

  5.     while(1)
  6.     {

  8.     retval = recv(SET_SOCKET_ID, &response, sizeof(response), 0);
  9.         if(retval>0)
  10.     {
  11.         response[retval] = '\0';
  12.         if(response[0] == 'o')
  13.         {
  14.             printf("send open!rn");//此处对接收到的数据进行处理，并执行对应内容
  15.         }
  16.     }
  17.     }
  18.     do_cleanup:
  19.     printf("do_cleanup...rn");
  20.     closesocket(SET_SOCKET_ID);
  21. }

  23. void Wifi_SOCKET_GET(void)
  24. {
  25.     osThreadAttr_t attr;

  27.     attr.name = "Wifi_SOCKET_RUN";
  28.     attr.attr_bits = 0U;
  29.     attr.cb_mem = NULL;
  30.     attr.cb_size = 0U;
  31.     attr.stack_mem = NULL;
  32.     attr.stack_size = 2048;
  33.     attr.priority = 25;

  35.     if (osThreadNew((osThreadFunc_t)Wifi_SOCKET_RUN, NULL, &attr) == NULL)
  36.     {
  37.         printf("Falied to create WifiAPTask!rn");
  38.     }
  39. }
四、APP开发（1）环境搭建
21.png

我这边用的是今年三月份的版本，不过不影响，界面没什么变化
（2）TCP数据交互
  1. import socket from '@ohos.net.socket';
  2. let tcp = socket.constructTCPSocketInstance();

  4. tcp.bind({address: '0.0.0.0', port: 12121, family: 1}, err => {
  5.   if (err) {
  6.     console.log('bind fail');
  7.     return;
  8.   }
  9.   console.log('bind success');
  10. })

  12. tcp.on('message', value => {
  13.   console.log("on message, message:" + value.message + ", remoteInfo:" + value.remoteInfo)
  14.   let da = resolveArrayBuffer(value.message);
  15.   let dat_buff = String(da);
  16. //此处对接受到的数据进行处理



  20. });
  21. //将接受到的数据转化为文本型           
  22. function resolveArrayBuffer(message){

  24.   if (message instanceof ArrayBuffer) {
  25.     let dataView = new DataView(message)
  26.     let str = ""
  27.     for (let i = 0;i < dataView.byteLength; ++i) {
  28.       let c = String.fromCharCode(dataView.getUint8(i))
  29.       if (c !== "n") {
  30.         str += c
  31.       }
  32.     }
  33.     return str;
  34.   }
  35. }
  36. //数据的发送函数
  37. function send_once(Con_buff) {
  38.   if (flag == false) {

  40.     let promise = tcp.connect({ address: { address: 'xxx.xxx.xxx.xxx', port: xxxx, family: 1 }, timeout: 2000 });
  41.     promise.then(() => {
  42.       console.log('connect success');
  43.       flag = true;
  44.       tcp.send({
  45.         data: Con_buff
  46.       }, err => {
  47.         if (err) {
  48.           console.log('send fail');
  49.           return;
  50.         }
  51.         console.log('send success');
  52.       })
  53.     }).catch(err => {
  54.       console.log('connect fail');
  55.     });

  57.   } else if (flag == true) {
  58.     tcp.send({
  59.       data: Con_buff
  60.     }, err => {
  61.       if (err) {
  62.         console.log('send fail');
  63.         return;
  64.       }
  65.       console.log('send success');
  66.     })
  67.   }
  68. }
（3）界面设计OpenHarmony（eTs）界面设计（简单）教程：https://www.bilibili.com/video/BV1zV4y1H7fY
本APP共用到了按钮、图片、标签三个部分，其对应的官网连接如下
竖向排列（Column）：
https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md/
其中强制位移（translate）：
22.png
（4）参数动态更新
  1. xxxxxxxxxx  @State srtText: string = "测试变量"; Text(this.srtText) //动态        .fontSize(60)        .fontWeight(FontWeight.Bold)        .fontColor("#e94674")      Button() {    //按钮控件        Text('点击')          .fontSize(50)          .fontWeight(FontWeight.Bold)      }.type(ButtonType.Capsule)      .margin({        top: 200      })      .width('50%')      .height('10%')      .backgroundColor('#0D9FFB')      .onClick(() => {    //点击事件          this.srtText = "更改内容"         //更改数据      })
在使用 @State变量对组件进行刷新时，发现只能在build中实现动态刷新，在外部创建全局变量或者外部函数的方式都不能实现，查阅资料后得到如下部分：
AppStorage与组件同步
在管理组件拥有的状态中，已经定义了如何将组件的状态变量与父组件或祖先组件中的@State装饰的状态变量同步，主要包括@Prop、@Link、@Consume。
本章节定义如何将组件变量与AppStorage同步，主要提供@StorageLink和@StorageProp装饰器。
@StorageLink装饰器
组件通过使用@StorageLink(key)装饰的状态变量，与AppStorage建立双向数据绑定，key为AppStorage中的属性键值。当创建包含@StorageLink的状态变量的组件时，该状态变量的值将使用AppStorage中的值进行初始化。在UI组件中对@StorageLink的状态变量所做的更改将同步到AppStorage，并从AppStorage同步到任何其他绑定实例中，如PersistentStorage或其他绑定的UI组件。
@StorageProp装饰器
组件通过使用@StorageProp(key)装饰的状态变量，将与AppStorage建立单向数据绑定，key标识AppStorage中的属性键值。当创建包含@StoageProp的状态变量的组件时，该状态变量的值将使用AppStorage中的值进行初始化。AppStorage中的属性值的更改会导致绑定的UI组件进行状态更新。
  1. let varA = AppStorage.Link('varA')
  2. let envLang = AppStorage.Prop('languageCode')
  3. @Entry
  4. @Component
  5. struct ComponentA {
  6.   @StorageLink('varA') varA: number = 2
  7.   @StorageProp('languageCode') lang: string = 'en'
  8.   private label: string = 'count'

  10.   private aboutToAppear() {
  11.     this.label = (this.lang === 'zh') ? '数' : 'Count'
  12.   }

  14.   build() {
  15.     Row({ space: 20 }) {

  17.       Button(`${this.label}: ${this.varA}`)
  18.         .onClick(() => {
  19.           AppStorage.Set('varA', AppStorage.Get('varA') + 1)
  20.         })
  21.       Button(`lang: ${this.lang}`)
  22.         .onClick(() => {
  23.           if (this.lang === 'zh') {
  24.             AppStorage.Set('languageCode', 'en')
  25.           } else {
  26.             AppStorage.Set('languageCode', 'zh')
  27.           }
  28.           this.label = (this.lang === 'zh') ? '数' : 'Count'
  29.         })
  30.     }
  31.   }
  32. }
即通过AppStorage.Link和 @StorageLink的方式，可实现外部动态刷新Text组件和image组件（等等之类都可以），方便我们在全局调用时更新数据。




更多回帖

我也要说两句 回帖

相关经验

×
发帖