12306小卡片-鸿蒙智慧出行

在没有鸿蒙之前，我大喵相信很多人座高铁是这样的：
1.买了高铁票，打车去高铁站
2.进入高铁站大门然后安检
3.在候车室等车和等检票
4.到了站台等高铁
5.上车
我大喵怕乘错车和晚上车经常会在3,4步骤的时候打开12306，然后打开车票，查看车票信息和发车时间，保证我是准点去检票座车，并且没有乘错车。像我这种经常去出差的人，一到高铁站会一直重复的去打开12306去查看车票信息，我觉得是一件非常非常麻烦的事情。还有现在的12306不会把车票信息以短信的方式发给我们，情景智能都不能用。那如何解决这个问题呢，答案就是鸿蒙小卡片。

下面我们来看一个视频

https://harmonyos.51cto.com/show/7339

https://www.bilibili.com/video/BV1Cb4y1k78E/

12306小卡片效果展示

可以看到车票的所有重要信息都展示了出来，这样在出发去高铁站之前，我们只需要长按选择这个12306小卡片，添加到桌面上，然后长按小卡片出现编辑页面

在小卡片编辑页面添加车票相关信息，点击查询后会查询到相关列车信息，然后点就确认就会把数据放到小卡片上去了

12306小卡片开发准备

1.创建工程

详见鸿蒙官网

2.工程中添加小卡片

详见鸿蒙官网

3.目录结构

4.添加12306域名

"deviceConfig": {"default": {"network": {"securityConfig": {"domainSettings": {"cleartextPermitted": true,"domains": [{"name": "search.12306.cn"},{"name": "kyfw.12306.cn"}]}}}}},

小卡片页面开发

index.hml

小卡片主要分成两大模块：车票基本信息和车次列表

车票基本信息里面有：开始地址、开始时间、车次号、日期、座位号、结束地址和结束时间

车次列表里面有：到达时间，发车时间，所需时间和正点状态

<div class="main_container"><!-- 车票基本信息 --><div class="title_container" @click="getNewData"><div class="title_div"><text class="title_address_text">{{treainData.startAddress}}</text><text class="title_time_text">{{treainData.startTime}}</text></div><div class="title_div" style="margin-top: 5px;" ><text class="title_ticket_text">{{treainData.trainDataString}}</text></div><div class="title_div"><text class="title_address_text">{{treainData.endAddress}}</text><text class="title_time_text">{{treainData.endTime}}</text></div></div><!-- 车次列表 --><div><list class="station_list"><list-item class="station_list_item" clickeffect="false" for="{{stationList}}"><text class="station_start_time">{{$item.start_time}}</text><div class="circle"></div><text class="station_name_text">{{$item.station_name}}</text><text class="station_mess_text grey_color">{{$item.arrive_time}}</text><text class="station_mess_text grey_color">{{$item.running_time}}</text><text class="station_mess_text grey_color">{{$item.arrive_day_str}}</text></list-item></list></div>
</div>

index.css

.main_container{flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%;background-color: #FFFFFF;
}.title_container{margin-top: 5px;
}.title_time_text{font-size: 10px;width: 100%;height: 10px;text-align: center;color: darkgray;
}.title_address_text{font-size: 16px;width: 100%;height: 20px;text-align: center;color: #5F80FF;
}.title_div{height: 30px;display: flex;flex-direction: column;
}.title_ticket_text{width: 300px;font-size: 10px;text-align: center;color: #5F80FF;
}.teain_d_text{width: 120px;height: 35px;
/*    background-image: url("/common/jt.png");*/background-size: 100% 100%;text-align: center;font-size: 10px;line-height: 15px;
}.station_list{width: 100%;height: 120px;margin-left: 10px;margin-top: 5px;
}.station_list_item{}.station_name_text{width: 80px;font-size: 12px;padding-left: 5px;border-left-style: solid;border-left-color: #5F80FF;border-left-width: 1px;padding-bottom: 8px;
}.grey_color{color: rgb(80,80,80);
}.station_mess_text{width: 60px;text-align: center;font-size: 10px;
}.station_start_time{font-size: 11px;
}.circle{width: 8px;height: 8px;border-radius: 100px;border: 4px solid #5F80FF;margin-top: 3.5px;left: 4.5px;
}

index.json

小卡片通过json配置数据绑定和点击事件，车票的基本信息保存在treainData里面，车次列表保存在stationList里面

{"data": {"treainData": {"startAddress": "","startTime": "","endAddress": "","endTime": "","trainDataString": ""},"stationList": [],},"actions": {"getNewData": {"action": "message","params": {"message": "getNewData"}}}
}

小卡片编辑功能的开发准备

鸿蒙的小卡片可以创建很多个，最大好像是8个，每个小卡片肯定是展现不一样的信息，所以需要添加编辑页面来让用户编辑这个小卡片，没有编辑页面的小卡片是没有灵魂的。

首先需要新建一个TrainConfigAbility，在里面setInstanceName TrainConfig

package com.example.phone.ability.train;import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.IntentParams;
import ohos.ace.ability.AceAbility;public class TrainConfigAbility extends AceAbility {public static Long cardId;@Overridepublic void onStart(Intent intent) {setInstanceName("TrainConfig");IntentParams params = intent.getParams();cardId = (long) params.getParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY);super.onStart(intent);}@Overridepublic void onStop() {super.onStop();}
}

然后在小卡片配置JSON里面添加

"formConfigAbility": "ability://com.example.phone.ability.train.TrainConfigAbility"

我的小卡片配置文件时这样的

{"name": "com.example.phone.ability.train.TrainAbility","icon": "$media:icon","description": "$string:widget_trainability_description","formsEnabled": true,"label": "$string:entry_TrainAbility","type": "page","forms": [{"jsComponentName": "train","isDefault": true,"scheduledUpdateTime": "10:30","defaultDimension": "2*4","name": "Train","description": "train card","colorMode": "auto","type": "JS","supportDimensions": ["2*4"],"updateEnabled": true,"updateDuration": 1,"formConfigAbility": "ability://com.example.phone.ability.train.TrainConfigAbility"}],"launchType": "singleton"},

小卡片数据库

关系型数据库加入包

在对应的entry的build.gradle中添加包

dependencies {implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])testCompile 'junit:junit:4.12'compile files(ORM_ANNOTATIONS_JAVA, ORM_ANNOTATIONS_PROCESSOR_JAVA, JAVAPOET_JAVA)annotationProcessor files(ORM_ANNOTATIONS_JAVA, ORM_ANNOTATIONS_PROCESSOR_JAVA, JAVAPOET_JAVA)
}

在gradle.properties中添加gradle全局变量

JAVAPOET_JAVA=C:/Users/XX/AppData/Local/Huawei/Sdk/java/2.1.1.21/build-tools/lib/javapoet_java.jar
ORM_ANNOTATIONS_PROCESSOR_JAVA=C:/Users/XX/AppData/Local/Huawei/Sdk/java/2.1.1.21/build-tools/lib/orm_annotations_processor_java.jar
ORM_ANNOTATIONS_JAVA=C:/Users/XX/AppData/Local/Huawei/Sdk/java/2.1.1.21/build-tools/lib/orm_annotations_java.jar

TrainStore.java

package com.example.phone.store;import com.example.phone.store.from.Train;
import ohos.data.orm.OrmDatabase;
import ohos.data.orm.annotation.Database;@Database(entities = {Train.class}, version = 1)
public abstract class TrainStore extends OrmDatabase {
}

Train.java

package com.example.phone.store.from;import ohos.data.orm.OrmObject;
import ohos.data.orm.annotation.Entity;
import ohos.data.orm.annotation.PrimaryKey;
import ohos.utils.zson.ZSONArray;@Entity(tableName = "trail")
public class Train extends OrmObject {@PrimaryKey(autoGenerate = true)private Long id;private String trainList;public Train() {}public Train(Long id, String trainList) {this.id = id;this.trainList = trainList;}public Long getId() {return id;}public void setId(Long id) {this.id = id;}@Overridepublic String toString() {return "Train{" +"id=" + id +", trainList=" + trainList +'}';}public String getTrainList() {return trainList;}public void setTrainList(String trainList) {this.trainList = trainList;}
}

小卡片Ability

主要作用时对小卡片的创建删除进行管理，点击事件的处理

在创建小卡片时，在数据库中新建一条小卡片数据，当点击更新按钮时，从数据库里面读取对应卡片的trainNo和date，然后请求API获取数据

"https://kyfw.12306.cn/otn/queryTrainInfo/query?leftTicketDTO.train_no="+trainNo+"&leftTicketDTO.train_date="+date+"&rand_code=";

TrainAbility.java

package com.example.phone.ability.train;import com.example.phone.store.OilStore;
import com.example.phone.store.TrainStore;
import com.example.phone.store.from.OilPrice;
import com.example.phone.store.from.Train;
import ohos.aafwk.ability.*;
import ohos.aafwk.content.Intent;
import ohos.app.Context;
import ohos.data.DatabaseHelper;
import ohos.data.orm.OrmContext;
import ohos.data.orm.OrmPredicates;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import ohos.utils.zson.ZSONArray;
import ohos.utils.zson.ZSONObject;
import okhttp3.*;
import org.jetbrains.annotations.NotNull;import java.io.IOException;
import java.util.List;public class TrainAbility extends Ability {public static final int DEFAULT_DIMENSION_2X2 = 2;public static final int INVALID_FORM_ID = -1;private static final HiLogLabel TAG = new HiLogLabel(HiLog.DEBUG, 0x0, TrainAbility.class.getName());private static OrmContext ormContext = null;private DatabaseHelper helper = new DatabaseHelper(this);OkHttpClient okHttpClient = new OkHttpClient();public void create(Context context){System.out.println("创建高铁数据库");ormContext = helper.getOrmContext("TrainStore", "TrainStore.db", TrainStore.class);}@Overrideprotected void onStart(Intent intent) {super.onStart(intent);stopAbility(intent);}@Overrideprotected ProviderFormInfo onCreateForm(Intent intent) {long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, INVALID_FORM_ID);String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY);int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2);HiLog.info(TAG, "onCreateForm: formId=" + formId + ",formName=" + formName);if(ormContext == null){create(getContext());}// 数据库新建数据Train train = new Train();train.setId(formId);boolean isSuccessed = ormContext.insert(train);isSuccessed = ormContext.flush();return null;}@Overrideprotected void onTriggerFormEvent(long formId, String message) {OrmPredicates predicates = ormContext.where(Train.class);predicates.equalTo("id", formId);List<Train> trailList = ormContext.query(predicates);Train trail = trailList.get(0);ZSONObject trainData = ZSONObject.stringToZSON(trail.getTrainList());System.out.println(trail);// 查询数据String date = trainData.getString("chooseDate");String trainNo = trainData.getString("trainNo");String url = "https://kyfw.12306.cn/otn/queryTrainInfo/query?leftTicketDTO.train_no="+trainNo+"&leftTicketDTO.train_date="+date+"&rand_code=";System.out.println(url);Call call = okHttpClient.newCall(new Request.Builder().url(url).build());call.enqueue(new Callback() {@Overridepublic void onFailure(@NotNull Call call, @NotNull IOException e) {}@Overridepublic void onResponse(Call call, Response response) throws IOException {String body = response.body().string();ZSONObject data = new ZSONObject();ZSONArray statinList = ZSONObject.stringToZSON(body).getZSONObject("data").getZSONArray("data");data.put("stationList",statinList);System.out.println(data);FormBindingData formBindingData = new FormBindingData(data);try {if (!updateForm(formId, formBindingData)) {}} catch (FormException e) {e.printStackTrace();}}});super.onTriggerFormEvent(formId, message);}
}

小卡片编辑页面的开发

index.hml

配置页面CSS代码很少我就不贴了

<div class="container"><div><text class="title">车次号</text><input type="text" maxlength="6" style="width: 300px;" on:change="TrainNumberChange"></input></div><div><text class="title">日期</text><picker type="date" start="{{today}}" value="{{today}}" onchange="DataChange" ></picker></div><div><text class="title">站台</text><input type="text" maxlength="20" style="width: 300px;" on:change="addressChange"></input></div><div><text class="title">座位类型</text><picker type="text" range="{{seatPickerList}}" value="{{seatValue}}" on:change="seatChange"></picker></div><div><text class="title">车号</text><input type="number" maxlength="2" style="width: 300px;" on:change="VehicleNumberChange"></input></div><div><text class="title">座位号</text><input type="text" maxlength="4" style="width: 300px;" on:change="SeatNumberChange" ></input></div><div><text class="title">发车站台</text><text>{{trainData.start_station_name}}</text></div><div><text class="title">结束站台</text><text>{{trainData.end_station_name}}</text></div><div><text class="title">列车类型</text><text>{{trainData.train_class_name}}</text></div><div><text class="title">OCR自动识别信息</text></div><button class="qr_but" @click="search">查询</button><button class="qr_but" @click="qr">确定</button>
</div>

具体业务逻辑

1.当页面初始化时请求API获取全国站台的缩写代码(编号)，因为请求的是JS文件，需要使用|隔开存入数组

https://kyfw.12306.cn/otn/resources/js/framework/station_name.js

var station_names ='@bjb|北京北|VAP|beijingbei|bjb|0@bjd|北京东|BOP|b

2.获取今日日期

3.获取所有输入框和选择器的数值

4.点击查询按钮时

1.提取train_station_code

2.获取该站台所有列车数据

"https://kyfw.12306.cn/otn/czxx/query?train_start_date="+that.chooseDate+"&train_station_code="+addressCode

5.整理数据发送给service ability

index.js

import fetch from '@system.fetch'
import app from '@system.app'
var that;const ABILITY_TYPE_EXTERNAL = 0;
const ACTION_SYNC = 0;
const CHOOSE = 1001;
var stationNameArray = [];export const TrainAbility = {choose: async function(data){var action = {};var sendUserData = data;console.info(sendUserData);action.bundleName = 'com.example.phone';action.abilityName = 'com.example.phone.ability.train.TrainServiceAbility';action.messageCode = CHOOSE;action.data = sendUserData;action.abilityType = ABILITY_TYPE_EXTERNAL;action.syncOption = ACTION_SYNC;var result = await FeatureAbility.callAbility(action);}
}export default {data: {title: "",today: "2000-01-01",chooseDate:"",seatPickerList:["商务座","一等座","二等座","站票"],seatValue: "二等座",pickerDefineIndex: 0,trainNumber: "",vehicleNumber: "",seatNumber: "",address: "",trainNo:"",trainData:{}},onInit() {that = this;//设置今日今天的时间var nowDay = new Date();let mount = (nowDay.getMonth()+1);let day = nowDay.getDate();if(mount < 10) mount = "0"+mount;if(day < 10) day = "0"+day;this.today = nowDay.getFullYear()+"-" + mount + "-" + day;this.chooseDate = this.today;// 请求获取站编号fetch.fetch({url: "https://kyfw.12306.cn/otn/resources/js/framework/station_name.js",success: function(response) {var result = response.data;stationNameArray = result.split('|');},fail: function() {console.info("---get station_name fetch fail---");}});},addressChange(value){this.address = value.text;},DataChange(e){let mount = e.month+1;let day = e.day;if(mount < 10) mount = "0"+mount;if(day < 10) day = "0"+day;this.today = e.year + "-" + mount + "-" + day;},seatChange(obj){this.seatValue = this.seatPickerList[obj.newSelected];},TrainNumberChange(value){this.trainNumber = value.text;},VehicleNumberChange(value){this.vehicleNumber = value.text;},SeatNumberChange(value){this.seatNumber = value.text;},search(){// 查询车架号https://kyfw.12306.cn/otn/czxx/query?train_start_date=2021-07-17&train_station_code=CAU//  1.提取train_station_codelet index = stationNameArray.indexOf(this.address);if(index == 0){// 输入错误return;}let addressCode = stationNameArray[index+1];// 2.获取该站台所有列车数据 C3863 54000C386601//fetch.fetch({url: "https://kyfw.12306.cn/otn/czxx/query?train_start_date="+that.chooseDate+"&train_station_code="+addressCode,success: function(response) {var result = JSON.parse(response.data);if(result.data == null){return;}// 查询trainNumberlet data = result.data.data;for(var dindex in data){if(data[dindex].station_train_code == that.trainNumber){that.trainData = data[dindex];that.trainNo = data[dindex].train_no;break;}}console.info("车数据："+that.trainNo);},fail: function() {console.info("https://kyfw.12306.cn/otn/czxx/query fail");}});},qr(){if(that.trainNo == null || that.trainNo.length == 0){console.info("数据有误");return;}// 整理数据let SendData = {treainData:{"seat": that.seatValue,"today": that.today,"trainNumber": that.trainNumber,"vehicleNumber": that.vehicleNumber,"seatNumber": that.seatNumber,"trainNo": that.trainNo,"chooseDate": that.chooseDate,"startAddress": that.trainData.start_station_name,"endAddress": that.trainData.end_station_name,"startTime": that.trainData.start_start_time,"endTime": that.trainData.end_arrive_time,"trainDataString": that.today+" "+that.trainNumber+"\n"+that.seatValue+" "+that.vehicleNumber+" "+that.seatNumber}}// 调试打印console.info(this.trainData.toString());// 发送数据给后端java service abilityTrainAbility.choose(SendData);// 关闭当前页面app.terminate();}
}

编辑页面数据处理

TrainServiceAbility.java

package com.example.phone.ability.train;import com.example.phone.ability.OilConfigAbility;
import com.example.phone.store.OilStore;
import com.example.phone.store.TrainStore;
import com.example.phone.store.from.OilPrice;
import com.example.phone.store.from.Train;
import com.example.phone.utils.TrainDataTF;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.ability.FormBindingData;
import ohos.aafwk.ability.FormException;
import ohos.aafwk.content.Intent;
import ohos.data.DatabaseHelper;
import ohos.data.orm.OrmContext;
import ohos.data.orm.OrmPredicates;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import ohos.rpc.*;
import ohos.utils.zson.ZSONArray;
import ohos.utils.zson.ZSONObject;import java.util.List;public class TrainServiceAbility extends Ability {private static final HiLogLabel LABEL_LOG = new HiLogLabel(3, 0xD001100, "Demo");private static final int CHOOSE = 1001;private static OrmContext ormContext = null;private DatabaseHelper helper = new DatabaseHelper(this);private TrainServiceAbility.TrainServiceRemote trainServiceRemote;@Overridepublic void onStart(Intent intent) {HiLog.info(LABEL_LOG, "TrainServiceAbility::onStart");trainServiceRemote = new TrainServiceAbility.TrainServiceRemote();ormContext = helper.getOrmContext("TrainStore", "TrainStore.db", TrainStore.class);super.onStart(intent);}@Overrideprotected IRemoteObject onConnect(Intent intent) {super.onConnect(intent);return trainServiceRemote.asObject();}@Overridepublic void onDisconnect(Intent intent) {}class TrainServiceRemote extends RemoteObject implements IRemoteBroker {public TrainServiceRemote() {super("TrainServiceRemote");}@Overridepublic boolean onRemoteRequest(int code, MessageParcel data, MessageParcel reply, MessageOption option) throws RemoteException {switch (code) {case CHOOSE:{// 更新数据库ZSONObject zsonStr = ZSONObject.stringToZSON(data.readString());System.out.println(zsonStr);OrmPredicates predicates = ormContext.where(Train.class);predicates.equalTo("id", TrainConfigAbility.cardId);List<Train> trailList = ormContext.query(predicates);Train trail = trailList.get(0);trail.setTrainList(zsonStr.getZSONObject("treainData").toString());ormContext.update(trail);ormContext.flush();// 更新小卡片FormBindingData formBindingData = new FormBindingData(zsonStr);try {if (!updateForm(TrainConfigAbility.cardId, formBindingData)) {}} catch (FormException e) {e.printStackTrace();}break;}default: {reply.writeString("service not defined");return false;}}return true;}@Overridepublic IRemoteObject asObject() {return this;}}
}

结束

12306小卡片-鸿蒙智慧出行相关推荐

腾讯车载小程序：智慧出行的场景化落地(附PPT)
点击上方"云加社区",选择"置顶或星标" 学习技术干货提升自我能力腾讯车载小程序,是一种智慧出行场景化的落地方案,可以为用户提供便捷的出行服务,并可以通过语 ...
人员定位卡：“小”卡片推动智慧安全“大”发展
人员定位卡,作为智能人员定位系统中的重要组成部分,适用一般工作场所或危化作业场所,主要用途是对作业人员.重要设备.重大危险源等进行监测和定位,以便实时地进行监控和管理,灾变时能及时进行抢险救灾. 伴随 ...
鸿蒙系统小卡片,升级鸿蒙101版本，UI审美升级了
作为鸿蒙系统第一批推送的用户,今天终于刷出了101版,早就开始馋"图库"的服务卡片,850多M的更新包,用5G网络10秒就下完.图库卡片一放,诶,舒服极了.这版本小白条滑3次就消失 ...
鸿蒙系统有没有hicar,华为鸿蒙系统发布后!又一款华为操作系统火了:开启智慧出行新时代...
[4月23日讯]相信大家都知道,在华为P40的新品发布会上,华为还发布了一款有关于汽车行业的新产品-华为车载系统HiCar,全新的智能车载操作系统出现,确实也是引起了很多汽车一族的高度关注,而他们最为 ...
鸿蒙智慧屏发布会,华为智能家居和智慧屏发布会都发布什么新品？我来跟你聊聊...
2020年12月21日,华为全屋智能及智慧屏新品发布会在广东东莞松山湖畔召开.华为消费者业务CEO余承东接连宣布了三大新品--华为全屋智能解决方案.华为智慧屏S系列和华为车载智慧屏.时值年末,华为连发 ...
又一金融科技巨头入局，智慧出行的竞争靠什么胜出？
近年来,智慧出行无疑是最热门的赛道之一. 百度凭借其AI优势忙着推"智慧机场",去年6月份首次与南航牵手,国内首个人脸识别智能化登机系统在南阳机场正式投入使用,今年初再度达成合作, ...
自行车也能做智能升级？AliOS以想象力为智慧出行带来新体验
春暖花开的季节,骑车出街无疑成为了不少人的最佳选择. 而就在最近,AliOS发布的一则视频让人眼前一亮--自行车居然也能实现智慧驾驶?据悉,视频中介绍的这款"即贴即用"的移动便携式 ...
产业数字化升级进入深化期，腾讯智慧出行释放“数字底座”核心能力
6月24日,腾讯智慧出行举办线上年度新品发布会.本次发布会以"创造出行新价值"为主题,发布了生态车联网产品TAI 3.0.全新一代自动驾驶虚拟仿真平台TAD Sim 2.0,以及汽 ...
5g虚拟技术旅游_5G造就文旅新时代，驴迹科技探索智慧出行创新领域
随着我国5G技术的成熟与普及,5G为文旅产业提供新的解决方案,使之焕发新的活力.以5G"新基建"为依托,结合VR虚拟实境以及云计算.高清视频等技术交叉应用,对旅游业的发展带来广泛而 ...

12306小卡片-鸿蒙智慧出行

12306小卡片-鸿蒙智慧出行相关推荐

最新文章

热门文章