#星计划# 丸骑行-OpenHarmony骑行助手 原创 精华

<script type="text/javascript">

    var publish_topic="PilotWeb";
    ....
    var getAddressCount = 4990 // 每次逆编码数值+1，到5000停止地址逆编码
    ....
</script>  
1.
2.
3.
4.
5.
6.
7.

  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%' })
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

 @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%')
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

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
    // 获取数据库对象
    kvStoreModel.createKvStore(globalThis.context,(value)=>{
      console.info('KVStore:kvStoreModel.createKvStore Callback'+value)
    })
    ...
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

// 手动刷新数据(位置+电量+续航估算)
  Column() {
   ...
    Text("刷新数据")
      .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
    })
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

  // 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存放车辆满电续航，默认520+999 = 1519Km,用户可根据经验设定
  static readonly PILOT_MAX_DURATION_KEY:string= 'PILOT_DURATION';
1.
2.
3.
4.
5.
6.
7.
8.

创建一个TCPSocket对象-->提供连接-发送-接收的接口-->根据设定的IP地址连接目标-->发送/接收数据
1.

import socket from '@ohos.net.socket'
// 创建一个TCPSocket连接，返回一个TCPSocket对象。
let tcp = socket.constructTCPSocketInstance();
  tcpInit() {
    // 订阅TCPSocket相关的订阅事件
    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))
      }
      //接收到车辆一帧数据
      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) {
        //发送消息
        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"})
      }
    })
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

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

  cancel: () => void
  confirm: () => void
  ....
      TextInput({ placeholder: '不做存储,随连随用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
            })
  ....
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

①用户ArkUI页面,消息通信<-->②APP本地web页面,发布或者订阅消息<-->③云端服务器<-->④设备发布或者订阅消息; // 数据通道是双向的
1.

   // 注册与H5通信的通道接口与回调
    try {
      // 1、创建两个消息端口。
      this.ports = this.webController.createWebMessagePorts();
      // 2、在应用侧的消息端口(如端口1)上注册回调事件。
      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、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。
      this.webController.postMessage('__init_port__', [this.ports[0]], '*');
    } catch (error) {
      console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

// 页面
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侧发送过来的端口
            h5Port.onmessage = function (event) {
              // 2. 接收ets侧发送过来的消息.
              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"); //将收到的数据通过mqtt发送到设备。ets可直接调用H5函数，该接口备用
            }
        }
    }
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

// 响铃找车
Column()
{
  if(this.ring_icon_flag)
  {
    Image($r("app.media.ic_ring_on_filled"))
      .onClick(() => {
          ...
        // 调用H5函数，发送关闭响铃的mqtt数据到设备
          this.webController.runJavaScript('RingOff()');
        })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

     const options={
        connectTimeout:4000,
        keepalice:20,
        clean:true,
        clientId:'mqttjsks',
        username:'hellokun',
        password:'123456',
    }
    const client=mqtt.connect('ws://MQTT服务器的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)
    })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

// 车辆关铃
function RingOff()
{
    this.send('ring_off',"PilotWeb"); // 通过MQTT发送数据
}
1.
2.
3.
4.
5.

// 使用h5Port往ets侧发送消息.
function PostMsgToEts(data) {
    console.info('H5 to Ets data:'+data);
    if (h5Port) {
      h5Port.postMessage(data);
    } else {
      console.error('h5Port is null, Please initialize first');
    }
}
// 调用接口发送数据到ets用户页面,便于存储和展示
this.PostMsgToEts(PilotPower.toString()+PositionName); // 电量+位置
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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

 //订阅话题
 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 = '取消订阅';
         })
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

this.tcpSend()
this.webController.runJavaScript('RingOff()')
this.webController.runJavaScript('RingOn()')
this.webController.runJavaScript('Lock()')
this.webController.runJavaScript('UnLock()')
1.
2.
3.
4.
5.

 剩余电量/总电量 = 预计续航/用户设定最大续航
this.max_duration = value
// 使用电量预估续航,公式: 剩余电量/总电量 = 预计续航/用户设定最大续航 数值取整
this.bike_duration = (parseInt(this.max_duration)*parseInt(this.bike_power)/100).toFixed(0)
// 累计骑行 = 最大续航-预计续航
this.bike_distance = (parseInt(this.max_duration) - parseInt(this.bike_duration)).toFixed(0)
1.
2.
3.
4.
5.
6.

 // 获取定位
Column() {
  Image($r("app.media.ic_statusbar_gps"))
    ...
  Text(this.location)
    ...
}
.onClick(() => {
  console.info('KVStore postCardAction(this')
  postCardAction(this, {
    'action': 'message',
    'params': {
      'msgTest': 'messageEvent'
    }
  });
})
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

  onUpdateForm(formId) {
    // 每30min自动刷新一次
    let formData = {
      'power': 'power', // 和卡片布局中-电量对应
      'location': 'location', // 和卡片布局中-位置对应
      'distance': 'distance', // 和卡片布局中-里程对应
      'duration': 'duration', // 和卡片布局中-预计续航对应
      'beep': 'beep.', // 和卡片布局中-响铃找车对应
      'lock': 'lock', // 和卡片布局中-开锁对应
    };
    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));
    })

  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

// 里程数据
 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
    Column() .width('47%').height("100%")
   ...
    .onClick(() => {
     ....
      postCardAction(this, {
        'action': 'router',
        'abilityName': 'EntryAbility', // 只能跳转到当前应用下的UIAbility
        'params': {
          'detail': 'RouterFromCard'
        }
      });
    })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

// 卡片中车辆图标
.onClick(()=>
{
  postCardAction(this, {
    'action': 'call',
    'bundleName': 'com.example.obike',
    'abilityName': 'EntryAbility', // 只能拉起当前应用下的UIAbility
    'params': {
      'method': 'funA',
      'formId': this.formId,
      'detail': 'CallFromCard'
    }
  });
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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);
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.