鸿蒙元服务开发实例：桌面卡片上的电动自行车助手E-Bike( 二 ) _鸿蒙

2、主页功能开发主页主要实现的功能包括：连接车辆、获取需要展示的数据（车辆电量、位置、里程数据等）、将数据持久化便于页面展示。
车辆与E-Bike通过Socket TCP协议方式连接。鉴于此部分依赖硬件，这里主要介绍E-Bike应用层如何开发 Socket通信。实现如下：
Index.ets：
// 1. 首先要引入模块，创建TCPSocket对象import socket from '@ohos.net.socket'// 创建一个TCPSocket连接，返回一个TCPSocket对象。let tcp = socket.constructTCPSocketInstance();tcpInit() {// 2. 绑定IP地址和端口。let bindAddress = { address: '192.168.xx.xx',port: 1234, // 绑定端口，如1234family: 1};tcp.bind(bindAddress, err => { if (err) {console.log('bind fail'); return;}console.log('bind success');}// 3.其次是订阅TCPSocket相关的订阅事件，如on message，有数据传入tcp.on('connect', () => {this.tcp_status = '连接ok'prompt.showToast({message:this.tcp_status})});tcp.on('message', value => {this.message_recv = this.resolveArrayBuffer(value.message)prompt.showToast({message:this.message_recv})});tcp.on('close', () => {prompt.showToast({message:"tcp close"})});}// 4.连接到指定的IP地址和端口。tcpConnect() {tcp.getState().then((data) => {if (data.isClose) { this.tcpInit()}// 连接tcp.connect({address: { address: this.GetSetIP, port: this.localAddr.port, family: 1}, timeout: 2000}).then(() => {prompt.showToast({message:" tcp connect successful"})}).catch((error) => { prompt.showToast({message:"tcp connect failed"})})})}// 5.发送数据 tcpSend() {tcp.getState().then((data) =>{ if (data.isConnected) {// 发送消息tcp.send({ data: this.message_send, }).then(() => {prompt.showToast({message:"send message successful"})}).catch((error) => { prompt.showToast({message:"send failed"})})} else {prompt.showToast({message:"tcp not connect"})} })}// 6. TCP连接操作界面通过设置按钮控制，点击设置按钮即可弹出，可输入车辆IP地址，确认连接if(this.show_setting==1){Flex({ direction: FlexDirection.Row}){Row(){Text('车辆IP')TextInput({ placeholder: '192.168.43.164'}).onChange((value: string) => { this.InputIP = value})Button('连接').onClick(()=>{this.GetSetIP=this.InputIP;this.tcpInit()})}}}// 7.点击组件，实现发送指令，并获取对应数据，这里以电量为例： Image($r("app.media.ic_power")).height("80%").objectFit(ImageFit.Contain).onClick(() => {// this.bike_power = 99;this.message_send = MSG_CMD.GET_BIKE_POWER this.tcpSend()this.bike_power = this.message_recv;})/ 8.连接使用完毕后，主动关闭。取消相关事件的订阅。setTimeout(() => { tcp.close((err) => { console.log('close socket.') }); tcp.off('message'); tcp.off('connect'); tcp.off('close');}, 30 * 1000);五、卡片开发1、卡片UI开发开发卡片的目的是将自行车的数据展示在桌面上，让用户一目了然。用默认模板创建工程时，自动创建了一张卡片，在form_config.json文件改动配置为自动刷新，支持2x2.
//form_config.json"colorMode": "auto", "isDefault": true, "updateEnabled": false, "scheduledUpdateTime": "10:30","updateDuration": 1,"defaultDimension": "2*2", "supportDimensions": ["2*2"]为展示电量信息，且布局不同，由此需要创建一张2x4的卡片。操作如下：在main目录下，点击鼠标右键 > New > Service Widget 。
然后选择Hello World卡片模板，点击Next 。
填写卡片名字（如Widget24Card）、开发语言（ArkTS和JS可选）、支持卡片规格（Support dimension 2x4）、关联表单（Ability name）点击Finish完成创建。修改配置为自动刷新，支持2x4 。
创建完卡片后，在ets文件目录下显示卡片目录，然后开发者使用ArkTS开发卡片页面。效果如图所示：

文章插图
为两张卡片开发UI，resource资源共用。使用Flex容器开发卡片，保证不同屏幕大小的显示效果。同时为组件绑定事件，用户可以主动获取数据，具体UI布局代码不再赘述，实现2x2和2x4效果如下

文章插图

2、卡片数据刷新通过message事件刷新卡片内容，在卡片页面中可以通过postCardAction接口触发message事件拉起FormExtensionAbility，然后由FormExtensionAbility刷新卡片内容。下面是这种刷新方式更新电量的简单示例。在卡片页面通过注册电量图标Image组件的onClick点击事件回调，并在回调中调用postCardAction接口触发事件至FormExtensionAbility 。