Apache License
                      Version 2.0, January 2004
                   http://www.apache.org/licenses/

<script type="text/javascript">

    var publish_topic="PilotWeb";
    ....
    var getAddressCount = 4990 // 每次逆編碼數(shù)值+1，到5000停止地址逆編碼
    ....
</script>

build() {
    Column(){
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {...}
        .tabBar(this.TabBuilder(0,'首頁'))

        TabContent() {...}
        .tabBar(this.TabBuilder(1,'地圖'))

        TabContent() {...}
        .tabBar(this.TabBuilder(2,'我的'))
      }
      .vertical(false)
      .barHeight(100)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width('100%')
      .height('100%')

    }
    .height('100%')
    .backgroundImage($r('app.media.background_lite'))
    .backgroundImageSize({ width: '100%', height: '100%' })
  }

@Builder TabBuilder(index: number ,name:string) {
    Column() {
      Image(this.currentIndex === index ? $r("app.media.bar_on") : $r("app.media.bar_off"))
        .width(50)
        .height(50)
        .margin({ bottom: 8 })
        .objectFit(ImageFit.Contain)
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(this.my_font_size)
        .lineHeight(this.my_font_size+2)
    }.width('100%')
  }

import common from '@ohos.app.ability.common'
import { KvStoreModel } from '../model/KvStoreModel'
let kvStoreModel: KvStoreModel = new KvStoreModel() 

aboutToAppear() {
    let context = getContext(this) as common.UIAbilityContext
    // 獲取數(shù)據(jù)庫對(duì)象
    kvStoreModel.createKvStore(globalThis.context,(value)=>{
      console.info('KVStore:kvStoreModel.createKvStore Callback'+value)
    })
    ...
  }

// 手動(dòng)刷新數(shù)據(jù)(位置+電量+續(xù)航估算)
  Column() {
   ...
    Text("刷新數(shù)據(jù)")
      .fontSize(this.my_font_size)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .fontColor("black")
      .maxLines(this.MAX_LINES)
      .height("40%")
  }.width('48%').height("100%")
  .backgroundColor("#FFFFFF")
  .borderRadius(15)
  .alignItems(HorizontalAlign.Center)
  .justifyContent(FlexAlign.Center)
  .onClick(()=>
  {
    kvStoreModel.get(Const.PILOT_POWER_KEY,(value)=>
    {
      this.bike_power = value
    })
    kvStoreModel.get(Const.PILOT_LOCATION_KEY,(value)=>
    {
      this.bike_location = value
    })
  }

// KvStore存放車輛電量
  static readonly PILOT_POWER_KEY: string = 'PILOT_POWER';
  // KvStore存放車輛位置
  static readonly PILOT_LOCATION_KEY:string = 'PILOT_LOCATION';
  // KvStore存放車輛固定IP
  static readonly PILOT_IP_KEY:string= 'PILOT_IP';
  // KvStore存放車輛滿電續(xù)航，默認(rèn)520+999 = 1519Km,用戶可根據(jù)經(jīng)驗(yàn)設(shè)定
  static readonly PILOT_MAX_DURATION_KEY:string= 'PILOT_DURATION';

創(chuàng)建一個(gè)TCPSocket對(duì)象-->提供連接-發(fā)送-接收的接口-->根據(jù)設(shè)定的IP地址連接目標(biāo)-->發(fā)送/接收數(shù)據(jù)

import socket from '@ohos.net.socket'
// 創(chuàng)建一個(gè)TCPSocket連接，返回一個(gè)TCPSocket對(duì)象。
let tcp = socket.constructTCPSocketInstance();
  tcpInit() {
    // 訂閱TCPSocket相關(guān)的訂閱事件
    tcp.on('message', value => {
      console.log("tcp on message")
      let buffer = value.message
      let dataView = new DataView(buffer)
      let str = ""
      for (let i = 0; i < dataView.byteLength; ++i) {
        str += String.fromCharCode(dataView.getUint8(i))
      }
      //接收到車輛一幀數(shù)據(jù)
      this.recv_rider_msg = str 
      //刷新電量
      this.bike_power = this.recv_rider_msg.substring(19,21).toString()
      console.log("tcp on connect received:" + str)
      // 電量做持久化保存
      kvStoreModel.put(Const.PILOT_POWER_KEY,this.bike_power)
    });
  }

  tcpSend() {
    tcp.getState().then((data) => {
      if (data.isConnected) {
        //發(fā)送消息
        tcp.send(
          { data: this.message_send, }
        ).then(() => {
          promptAction.showToast({message:"send message successful"})
        }).catch((error) => {
          promptAction.showToast({message:"send failed"})
        })
      } else {
        promptAction.showToast({message:"tcp not connect"})
      }
    })
  }

@CustomDialog
struct CustomDialogSetIP{
    @State inputValue: string = ''
   @Link InputIP: string // 獲取的IP
  controller: CustomDialogController

  cancel: () => void
  confirm: () => void
  ....
      TextInput({ placeholder: '不做存儲(chǔ),隨連隨用192.168.43.164'}).width('85%').height('70%').fontSize(30)
            .placeholderColor("rgb(0,0,225)")
            .placeholderFont({ size: 16, weight: 100, family: 'cursive', style: FontStyle.Italic })
            .onChange((value: string) => {
              this.inputValue = value
            })
  ....
}

①用戶ArkUI頁面,消息通信<-->②APP本地web頁面,發(fā)布或者訂閱消息<-->③云端服務(wù)器<-->④設(shè)備發(fā)布或者訂閱消息; // 數(shù)據(jù)通道是雙向的

// 注冊(cè)與H5通信的通道接口與回調(diào)
    try {
      // 1、創(chuàng)建兩個(gè)消息端口。
      this.ports = this.webController.createWebMessagePorts();
      // 2、在應(yīng)用側(cè)的消息端口(如端口1)上注冊(cè)回調(diào)事件。
      this.ports[1].onMessageEvent((result: web_view.WebMessage) => {
        let msg = 'Got msg from HTML:';
        if (typeof(result) === 'string') {
          console.info(`received string message from html5, string is: ${result}`);
          msg = result;
        } else if (typeof(result) === 'object') {
          if (result instanceof ArrayBuffer) {
            console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
            msg = msg + 'lenght is ' + result.byteLength;
          } else {
            console.info('not support');
          }
        } else {
          console.info('not support');
        }
        this.receivedFromHtml = msg;
        console.info('Callback when the first button is clicked')
        kvStoreModel.put('APP','Pilot')
        kvStoreModel.put(Const.PILOT_POWER_KEY,this.receivedFromHtml.substring(0,2))  //電量
        kvStoreModel.put(Const.PILOT_LOCATION_KEY,this.receivedFromHtml.substring(2,8)) //位置
        this.bike_power = this.receivedFromHtml.substring(0,2)
        this.bike_location = this.receivedFromHtml.substring(2,8)
        kvStoreModel.get(Const.PILOT_POWER_KEY,(value)=>
        {
          this.bike_power = value
        })
        kvStoreModel.get(Const.PILOT_LOCATION_KEY,(value)=>
        {
          this.bike_location = value
        })
      })
      // 3、將另一個(gè)消息端口(如端口0)發(fā)送到HTML側(cè)，由HTML側(cè)保存并使用。
      this.webController.postMessage('__init_port__', [this.ports[0]], '*');
    } catch (error) {
      console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
    }

// 頁面
var h5Port;
var output = document.querySelector('.output');
window.addEventListener('message', function (event) {
    if (event.data === '__init_port__') {
        if (event.ports[0] !== null) {
            h5Port = event.ports[0]; // 1. 保存從ets側(cè)發(fā)送過來的端口
            h5Port.onmessage = function (event) {
              // 2. 接收ets側(cè)發(fā)送過來的消息.
              var msg = 'Got message from ets:';
              var result = event.data;
              if (typeof(result) === 'string') {
                console.info(`received string message from html5, string is: ${result}`);
                msg = result;
              } else if (typeof(result) === 'object') {
                if (result instanceof ArrayBuffer) {
                  console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
                  msg = msg + 'lenght is ' + result.byteLength;
                } else {
                  console.info('not support');
                }
              } else {
                console.info('not support');
              }
              // this.PositionName  = msg.toString();
              // document.getElementById("getMsg").innerText =  msg;
              send(msg.toString(),"PilotWeb"); //將收到的數(shù)據(jù)通過mqtt發(fā)送到設(shè)備。ets可直接調(diào)用H5函數(shù)，該接口備用
            }
        }
    }
})

// 響鈴找車
Column()
{
  if(this.ring_icon_flag)
  {
    Image($r("app.media.ic_ring_on_filled"))
      .onClick(() => {
          ...
        // 調(diào)用H5函數(shù)，發(fā)送關(guān)閉響鈴的mqtt數(shù)據(jù)到設(shè)備
          this.webController.runJavaScript('RingOff()');
        })
  }
}

const options={
        connectTimeout:4000,
        keepalice:20,
        clean:true,
        clientId:'mqttjsks',
        username:'hellokun',
        password:'123456',
    }
    const client=mqtt.connect('ws://MQTT服務(wù)器的ip地址:8083/mqtt',options)

    client.on('reconnect', (error) => {
     // document.getElementById("status").innerText = '正在重連';
     console.log('正在重連:', error)
     })

    client.on('error',(error)=>{
        // document.getElementById("status").innerText='Faild';
        console.log('connect faild:',error)
    })

// 車輛關(guān)鈴
function RingOff()
{
    this.send('ring_off',"PilotWeb"); // 通過MQTT發(fā)送數(shù)據(jù)
}

// 使用h5Port往ets側(cè)發(fā)送消息.
function PostMsgToEts(data) {
    console.info('H5 to Ets data:'+data);
    if (h5Port) {
      h5Port.postMessage(data);
    } else {
      console.error('h5Port is null, Please initialize first');
    }
}
// 調(diào)用接口發(fā)送數(shù)據(jù)到ets用戶頁面,便于存儲(chǔ)和展示
this.PostMsgToEts(PilotPower.toString()+PositionName); // 電量+位置

// Web component loading H5.
 Web({ src: $rawfile('index.html'), controller: this.webController })

//訂閱話題
 function subscribe() {
     if (client.connected) {
         client.subscribe(this.subscribe_topic);
        // document.getElementById("status").innerText = '開始訂閱';
     }
 }
 //取消訂閱話題
 function unsubscribe() {
     if (client.connected) {
         client.unsubscribe(this.subscribe_topic, (error) => {
             console.log(error || '取消訂閱')
            // document.getElementById("status").innerText = '取消訂閱';
         })
    }
}

this.tcpSend()
this.webController.runJavaScript('RingOff()')
this.webController.runJavaScript('RingOn()')
this.webController.runJavaScript('Lock()')
this.webController.runJavaScript('UnLock()')

剩余電量/總電量 = 預(yù)計(jì)續(xù)航/用戶設(shè)定最大續(xù)航
this.max_duration = value
// 使用電量預(yù)估續(xù)航,公式: 剩余電量/總電量 = 預(yù)計(jì)續(xù)航/用戶設(shè)定最大續(xù)航 數(shù)值取整
this.bike_duration = (parseInt(this.max_duration)*parseInt(this.bike_power)/100).toFixed(0)
// 累計(jì)騎行 = 最大續(xù)航-預(yù)計(jì)續(xù)航
this.bike_distance = (parseInt(this.max_duration) - parseInt(this.bike_duration)).toFixed(0)

// 獲取定位
Column() {
  Image($r("app.media.ic_statusbar_gps"))
    ...
  Text(this.location)
    ...
}
.onClick(() => {
  console.info('KVStore postCardAction(this')
  postCardAction(this, {
    'action': 'message',
    'params': {
      'msgTest': 'messageEvent'
    }
  });
})
}

onUpdateForm(formId) {
    // 每30min自動(dòng)刷新一次
    let formData = {
      'power': 'power', // 和卡片布局中-電量對(duì)應(yīng)
      'location': 'location', // 和卡片布局中-位置對(duì)應(yīng)
      'distance': 'distance', // 和卡片布局中-里程對(duì)應(yīng)
      'duration': 'duration', // 和卡片布局中-預(yù)計(jì)續(xù)航對(duì)應(yīng)
      'beep': 'beep.', // 和卡片布局中-響鈴找車對(duì)應(yīng)
      'lock': 'lock', // 和卡片布局中-開鎖對(duì)應(yīng)
    };
    let formInfo = formBindingData.createFormBindingData(formData)
    formProvider.updateForm(formId, formInfo).then((data) => {
      console.info('FormAbility updateForm success.' + JSON.stringify(data));
    }).catch((error) => {
      console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
    })

  }

// 里程數(shù)據(jù)
 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
    Column() .width('47%').height("100%")
   ...
    .onClick(() => {
     ....
      postCardAction(this, {
        'action': 'router',
        'abilityName': 'EntryAbility', // 只能跳轉(zhuǎn)到當(dāng)前應(yīng)用下的UIAbility
        'params': {
          'detail': 'RouterFromCard'
        }
      });
    })

// 卡片中車輛圖標(biāo)
.onClick(()=>
{
  postCardAction(this, {
    'action': 'call',
    'bundleName': 'com.example.obike',
    'abilityName': 'EntryAbility', // 只能拉起當(dāng)前應(yīng)用下的UIAbility
    'params': {
      'method': 'funA',
      'formId': this.formId,
      'detail': 'CallFromCard'
    }
  });
})

while (1) {
    memset_s(recvbuf, sizeof(recvbuf), 0, sizeof(recvbuf));
    if ((ret = recv(new_fd, recvbuf, sizeof(recvbuf), 0)) == -1) {
        printf("recv error \r\n");
    }
    printf("recv :%s\r\n", recvbuf);

    if(!strncmp(recvbuf,UNLOCK,6))
    {
        IoTGpioSetOutputVal(LockCtr_GPIO, 0);
        sleep(TASK_DELAY_1S);
        IoTGpioSetOutputVal(LockCtr_GPIO, 1);
    }
    if(!strncmp(recvbuf,LOCK,5))
    {
        IoTGpioSetOutputVal(LockCtr_GPIO, 1);
        sleep(TASK_DELAY_1S);
        IoTGpioSetOutputVal(LockCtr_GPIO, 0);
    }
    if(!strncmp(recvbuf,RING_ON,7))
    {
        IoTGpioSetOutputVal(LockCtr_GPIO, 1);
    }
    if(!strncmp(recvbuf,RING_OFF,8))
    {
        IoTGpioSetOutputVal(LockCtr_GPIO, 0);
    }
    // sleep(TASK_DELAY_1S);
    osDelay(10); // 100ms
    if ((ret = send(new_fd, buf, strlen(buf) + 1, 0)) == -1) {
        perror("send : ");
    }
    // sleep(TASK_DELAY_1S);
}