2024年6月14日发(作者：陀丹寒)
１移动应月
…
啊ＯＢＩＬＥＡＰＰＬＩＣＡＴＩＯＮ ． …… ……一…… 一 一 一…… …… ……………。……。 …
基于ＷｅＸ５的Ａｎｄｒｏｉｄ系统记账本ＨＴＭＬ５ Ａｐｐ开发与设计
山少男
（辽 ｊ 现代ＪＪＫ务职业技术学院，沈 １ １００００）
摘 要：采用ＷｐＸ５平台来开发基于ｔｔＴＭＩ ５＋ＪＳ＋ＣＳＳ３，适用于 ｌ｛ｈ・ｏｉｄ操作系统的记账本Ａｐ１）， 利用
ＭｙＳＱＩ 数据库来做后端数据服务支持，完成账目列表页而和记一笔页面分类数据存储记账本Ａｐｐ一
共分为４个部分：账目－０Ｊ丧、记一笔、分类页面、主页，分别介绍了各页面的开发与￣ｋ２￣１－过程
关键词：ｗ ５平台；１、ｌＨｈ （１系统；ＨＴＭ１ ５ Ａｐｐ
ｌ ＷｅＸ５开发平台
ｗｅＸ５怂‘款免费、开源、跨端Ｈｙ１）ｒｉｄ Ａｐｐ的开发
Ｉ √ 贞Ｉ』Ｉ；『纰什足可视化负面设汁．以模块化形式快
速 发，开发、编 、 试是一体化集成开发环境，并
Ⅱ不需嘤 声 发 验 ｎｒ使 、
墓
器
罄
萋
ＷｅＸ５ Ｓｔｕｄｉｏ
可视化设计
Ｗｅｈ ＡＰＰ
剥 丰富的组件体系和向导
全能力调试和智麓代码提示
没备访问 扩展 力
服务端
云ＡＰＩ ＡＰＰ群新 统计‘
Ｊａｖａ ＰｔｔＰ ＮＥＴ
无限制、多方式、可加密ＡＰＰ￣］龟
图１ ＷｅＸ５开发平台简介
１．１ 开源免费
ｅＸ５采川ＡＩ｝ａ…ｈ 许ｌｌｆ证ＪＩ：源模式，商业友好，
完令免费 墟丁ＷｅＸ５开发 来的应ＪＨ，每一行代码
鄙 已仃模板巾，发布部籍无任何限捌，完全白
｝ｆ１免费
１．２基于主流技术和标准
ｗｔ，Ｘ５ 端采川ＨＴＭＩ ５＋ＣＳＳ３＋Ｊｓ标准，使用
ＡＭＩ）规池的ｒｅ｛ｌｕｉ￣’ｔ ｉｓ、ｌ｝ｏｏｌｓｔｒａｐ、ｊｑｕｅｒｙ等技术；ＷｅＸ５
Ｆ机Ａｐｐ培ｊ ｐｈ＜｝ｔ￣ｅｇａｐ（（．Ｉ１ ｒＩ１・，ｖａ）采州混合应崩（｝１ｙ—
ｌＩｒｉｄ ａｐｐ） 发模 ：ＷｅＸ５史特多种类晖９ｆｉｇ／，端，包括
Ｊａｖａ、Ｐｔｔｆ） ．ＮＥＴ等，同｝ｆｌｆ 支持云ＡＰＩ
Ｉ．３可视化设计
ＷｅＸ５的１ＤＥ缺Ｊ Ｉｉｆ｝Ｓｅ，提供了一个完全可视
化、组件化、拖曳式 发环境，完全所 即所得；向导
化和卡；｛板化等 ，快速 成常 应川场景 【白ｉ
１．４丰富的组件体系和向导
ＷｅＸ５的ＵＩ绀 ： 系完伞 十ＨＴＭＩ ５＋ＣＳＳ＋Ｊｓ，
使川ｒｅ｛ｔｕｉ￣ ｊｓ、ｊｑｕｅｒｙ和Ｉ｝ｏｏｔｓ１］’ａＩ）技术，内置支持大量
丰谢的ｕｌ ｔｌ［ｆｔ：；针埘一些常』＿Ｈ的场景，ＷｅＸ５提供了
丰寓的 ．便ｒ快速构建心川
２记账本Ｉｆ ＦＭＩ ５ ＡＰＰ功能模块
２．１账目列表模块
曼…ｌｉｓｔ组什米完成列表贞战线部分的设计。具
体 现Ｉ 包含仵ｌｉｓｔ组仆・ 添加ｒｏｗ组ｆ，ｌ：，通过使用
ＯＵｔｌ｝￣Ｊｌｌ 什放人指定的ｘ叫０ｌ『ｌＪ输…ｆ］ｒｙｐｅ、ｆＣｌａｓｓ、
ｆＤａｔｅ、ｆＭ【）Ｉ ｙ、ＩＩ）ｅｓ（ｕ・ｉｐｔｉｏ￣１埘成的内容．．数据组件配置
环节『｛ｌ他川ＷｅＸ５平 提供的后台服务功能．在ｍｏｄｅｌ
根绀什卜添』ＪＩｌ ａ（：ｃＯＵｌＩｔＤａｔａ 什，打 ｆ：ＭｙＳＱＩ 数据库使
州 ＩＩ１ ｆｊ勺ｑｕｅｒｙＡｃｃｏ￣・ｎｔ，将 巾数掘通过ｆｌＤ导人ａｃ一
川 ｌ ｔａ，通过眨爪绀仆 ｌ展示川｛来
２Ｉ２记一笔页面模块
小＝部分足 Ｊ｝小Ａｐｐ功能最多也是最为复杂的一
部分，： 嘤完成增加一条新垛Ｈ、蜓改已有账日、删除
已彳 账¨ ｊ 体实脱Ｉ 包含在ｃｏｎｔｒｏｌｇｒｏｔ，ｐ组件中添加
ｌａ［）ｃｌｓｅｌ －１ Ｍ￣ｅｌｉｎｐｕｔ组什， １ａ１）ｅｌ巾直接显示
ｆＴｙｔ ｆＣｌａｓｓ、ｆ１）ａｔｅ、ｆＭｏｎｅｙ、ｆＤｅｓｃｒｉｐｔｉｏ￣ｌ对应的内容。
ｓｅｌｅｃｔ干¨ｉｎｐｕ！ ｔｆｔ：Ｉ￣ｇ性ｒｆ１连接数据组件 、数据组
件 环 巾复制ｌｉｓｔ．Ｗ『Ｉｌ的ａ（ ｏｕｎｔＤａｔａ并且添加两个
ｄａｔａ 什：ｃｌａｓｓ｛ｔａｌａ和ｔｙｐｅｄａｔａ，分）ｊＩｊ存ｓｅｌｅｃｔ１连接
作者简介：Ｉｆｌ少 （１９８４一），颁 岛级厂程师，讲
师．研究 向：移动互联网Ｊｌ：发、新媒体营销、移动电
子商务等
收稿日期：２０１７－０３—２２
－＿
文
……’… ……………一…………………’
实用第一 智慧密集
… ，…… ．… ． … …
ｔｙｐｅｄａｔａ并在ｓｅｌｅｃｔ２连接ｃｌａｓｓｄａｔａ，ｉｎｐｕｔ依次显示
ｆＩ＇ｙｐｅ、ｆＣｌａｓｓ、ｆ１）ａｔｅ、ｆＭｏｎｅｙ、ｆＤｅｓｃｒｉｐｔｉｏｎ条目内容。
并配置ａｄｄＢｔｎ、ｏｋＢｔｎ、ｄｅｌＢｔｎ的属性，设置ＪＳ动态语
句实现添加跳转与删除条Ｈ 、
２．３分类设置模块
分类设置模块主要是完成ｆＣｌａｓｓ分类设置，通过添
新增账【１分类数据：
Ｍｏｄｅ１．ｐｒｏｔｏｔｙｐｅ．ｎｅｗＢｔｎＣｌｉｃｋ＝ｆｕｎｃｔｉｏｎ（ｅｖｅｎｔ）
新增分类数据并给出默认值
ｔｈｉｓ．ｃｏｍｐ（“ｃｌａｓｓＤａｔａ”）．ｎｅｗＤａｔａ（ｆ
“ｄｅｆａｕｌｔＶａｌｕｅｓ“：【｛
一
ｎ ｈ
”ｆｌＤ“：ｊｕｓｔｅｐ．ＵＵＩＤ．ｃｒｅａｔｅＵＵＩＤ０，
｛｝ ｎ一
”ｆＴｙｐｅ ： 支出“
一
一
加、删除、更改、保存分类信息。同样使用ｌｉｓｔ组件，
添力ｎ ｒｏｗ绀 ， ｉ ｒＯＷ组 ：Ｉ］１分ｊ；４力Ⅱ入ｓｅｌｅｃｔ、ｉｎｐｕｔ、
ｂｕｔｔｏｎ组件 数据绀件配置环 中复制记一笔页面ｄｅ—
）：
｝）：
）】
等
ｔａｉｌ．ｗ巾的ｃｌａｓｓｄａｔａ组件 ｔｙｐｅ（ｔａｔａ，分别在ｓｅｌｅｃｔ连接
ｔｙｐｅｄａｔａ并在ｉｎｐｕｔ连接ｃｌａｓｓｄａｔａ，同时设计ａｄｄＢｔｎ、
删除垛¨分类数据：
Ｍｏｄｅ１．ｐｒｏｔｏｔｙｐｅ．ｄｅＩｅｔｅＢｔｎＣｌｉｃｋ＝ｆｕｎｃｔｉｏｎ（ｅｖｅｎｔ）
ＯｋＢｔｎ、ｄｅｌＢｔｎ的单击事件ｏｎＣｌｉｃｋ的Ｊｓ部分，让其完
成分类设置的新增、删除、更改。
２．４应用首页模块
应川首页主要是用页面框架完成页面调度．一般以
左边 的形式 脱 选择ｗ文件是使用首页模式。
删除ｌｉｓｔ当前行数据
ｖａｒ ｒｏｗ＝ｅｖｅｎｔ．ｂｉｎｄｉｎｇＣｏｎｔｅｘｔ．￥ｏｂｊｅｃｔ；
ｔｈｉｓ．ｃｏｍｐ（“ｃｌａｓｓＤａｔａ“）．ｄｅｌｅｔｅＤａｔａ（ｒｏｗ）；
｝：
｝ 一琶贞面中接收参数，如果垃新增数据隶虻增Ｊ Ｊ『 ｌ
新 求，ｆＨ１ 是修改数据就加载传过米的仃数
Ｍｏｄｅｌ，ｐｒｏｔｏｔｙｐｅ．ｍｏｄｅｌＰａｒａｍｓＲｅｃｅｉｖｅ＝ｆｕｎｃｔｉｏｎ
通过ｂｕｔｔｔｍ设置分类设置栏日ｃｌａｓｓＳｅｔＢｔｎ，通过单击事
件ｏｎＣｌｉｔ・ｋ通过Ｊｓ使ｔｔ Ｊ ｓｈｅｌｌ刈象的ｓｈｏｗＰａｇｅ方法启动
分类设置页 ，启动ＭｙＳＱＬ数据库，Ｔｏｍｃａｔ测试，调
试运行
（ｅｖｅｎｔ）（／／记一笔接收参数
ｖａｒ ａｃｃｏｕｎｔＤａｔａ＝ｔｈｉｓ．ｃｏｍｐ（“ａｃｃｏｕｎｔＤａｔａ“）：
ａｃｃｏｕｎｔＤａｔａ．ｃｌｅａｒ（）；
ｔｈｉｓ．ｏｐｅｒａｔｏｒ＝ｅｖｅｎｔ．ｐａｒａｍｓ．ｏｐｅｒａｔｏｒ；
３记账本Ｈ ＦＭ１ ５ Ａｐｐ主要开发过程
主要数据组件主 属性设置如表ｌ所示 、
表１ 数据组件属性配置表
组件 父组件
ｉｆ（ｔｈｉｓ．ｏｐｅｒａｔｏｒ：＝“ｎｅｗ“）｛
／／新增账目数据
ａｃｃｏｕｎｔＤａｔａ．ｎｅｗＤａｔａ（｛
”ｄｅｆａｕｌｔＶａＩｕｅｓ“：【｛
属性
—————————— ——…
属性值
‘ 一————————＋
｛ｘｉ【 ｛
３ａａｓＤａｔａ
ａｃ（－ｌ】ｕｎｌＤａｔａ
“ｆｌＤ”：ｊｕｓｔｅｐ．ＵＵＩＤ．ｃｒｅａｔｅＵＵＩＤＯ．
”ｆＣｒｅａｔｅＴｉｍｅ”：ｎｅｗ Ｄａｔｅ（）．
ｆＤａｔｅ”：ｎｅｗ Ｄａｔｅ（）．
；不自动新增数据
”ｆＴｙｐｅ”：“支出”
｝】
１账目分类数据
单击右侧按钮弹出选择
ｊ ’ 。一
｝）：
Ｉ选择后自动带出
Ｊ 一——
）ｅｌｓｅ ｉｆ（ｔｈｉｓ．ｏｐｅｒａｔｏｒ＝＝”ｅｄｉｔ“）｛
择后自动带出
ｂａａｓＤａｔａ
，／修改账目数据
ａｃｃｏｕｎｔＤａｔａ．ＩｏａｄＤａｔａ（【ｅｖｅｎｔ．ｐａｒａｍｓ。
选择后自动带ｔｔｌ
不自动加载数据
】 一————————
ｄａｔａ．ｒｏｗＤａｔａ Ｊ）：
ａｃｃｏｕｎｔＤａｔａ．ｆｉ ｒｓｔ（）；
）
）：
不自动新增数据
获取全部账目分类数据
Ｊｘｉｄ ｔｙｐｅＤａｔａ
账目类型数据
ＪＩ 输人数据后．关『才ｊｉ 一笔贝 ，将川ｆ一输入的
数 返…账ｌ１列表贞
Ｍｏｄｅ１．ｐｒｏｔｏｔｙｐｅ．ｏｋＢｔｎＣｌｉｃｋ＝ｆｕｎｃｔｉｏｎ（ｅＶｅｎｔ）｛
１ 憎加ｔＴｙｐｅ（Ｓｔｒｉｎｇ）列
增加丽行数据．分别是收人、支
编辑列时设置主键列
ｌａｔａ ｍｏｄｅｌ ｉｄＣｏｌｕｍｎ ｆｆＴｙｐｅ
ａｕｔｏＩａ￣ａｄ ［ｒｕｅ
∥确定后返回当前行，用于ｗｉｎｄｏｗＤｉａｌｏｇ的
（下转第５２页）
『ａｕＩｏＮ ｗ ｝ｆａｌｓｅ
４ 函 ２０ｉ１７藿．１ 涵２
与簟
ｊ１％
…………………………………………………‘………
实用第一 智慧密集
ｄｅｆａｕｌｔ：
ｂｒｅａｋ；
，
ｍｙＴｈｒｅａｄ。ｉｎｔｅｒｒｕｐｔ０；
｝
’）：
ｍｙＴｈｒｅａｄ：ｓｔａｒｔＯ；
）
ｓｕｐｅｒ．ｈａｎｄｌｅＭｅｓｓａｇｅ（ｍｓｇ）：
｝
３．３聊天与地图的结合
４结语
本软件在真机上（Ａｎｄｒｏｉｄ ３．０以上版本）已将登
设计ｊ二将地图与聊天窗口放在
将聊人 ｊ地 卡Ｈ结合，并实时动态地显示自己和对
的 体化
一
此
录、注册、聊天及路线规划等功能测试通过。测试时是
在局域网环境下，使用虚拟位置测试了路线规划功能。
服务器使用的是Ｏｐｅｎｆｉｒｅ服务器．版本是Ｏｐｅｎ．
ｉｆｒｅ
３ ９ ｌ。测试时需要在局域网下安装好Ｏｐｅｎｆｉｒｅ服
…
个 面ｊ ， 将自己和对 ‘的位置标注在地 上。进
入聊尺 系统后 就开辟出一条线程，每隔一定的
Ｉｔｔ，Ｉ＇ＪＪ Ｊ隔发送・条定他信息给对方 、接受疗接受到定位
信息，就会 地 上 新发送方的具体位置。核心代码
如卜：
ｍｙＴｈｒｅａｄ＝ｎｅｗ Ｔｈｒｅａｄ（ｎｅｗ Ｒｕｎｎａｂｌｅ（）｛
＠Ｏｖｅｒｒｉｄｅ
务器．再使用本软件。
目前，由于Ａｎｄｒｏｉｄ平台具有较强的开放性．基于
Ａｎｄｒｏｉｄ平台的手机端软件开发产品层出不穷。将社交
与位置信息相结合的软件也越来越多。随着人们对位置
ｐｕｂｌｉｃ ｖｏｉｄ ｒｕｎ（）｛
服务的需求更加多样．对类似的地图聊天软件也提出了
更高的要求。现今“ｏｆ０”、“摩拜单车”越来越普及．
很多年轻人都选择共享单车的方式出行。共享单车的位
置能否在地图上显示、公交车的到站信息的查询等都是
此类软件可以努力的方向。
参考文献
［１】王文举．基于Ａｎｄｒｏｉｄ平台开发俯卧撑计数器【Ｊ］．
ｗｈｉｌｅ（ｆｉｎｉｓｈｅｄ）｛
∥每隔５秒发送一次
ｈａｎｄｌｅｒ ｓｅｎｄＥｍｐｔｙＭｅｓｓａｇｅ（１ １）：
ｔｎ，｛＿ｒｈｒｅａｄ．ｓｌｅｅｐ（５０００）：）
ｃａｔｃｈ（ＩｎｔｅｒｒｕｐｔｅｄＥｘｃｅｐｔｉｏｎ ｅ）｛
／／ＴＯ ＤＯ ＡｕｔＯ—ｇｅｎｅｒａｔｅｄ ｃａｔｃｈ ｂｌｏｃｋ
ａｎｄｒｏｉｄ．ｏｓ．Ｍｅｓｓａｇｅ ｒｎ＝ｈａｎｄｌｅｒ．ｏｂｔａｉｎ—
ＭｅｓｓａｇｅＯ；
电脑编程技巧与维护，２０１２，（２３）．
ｍ．ｏｂｉ＝ｅ：
ｍ．ｗｈａｔ＝１００；
［２】周齐飞．基于Ａｎｄｒｏｉｄ平台的ＨｙｂｒｉｄＡｐｐ开发
电脑编程技巧与维护，２０１４，（１５）．
【Ｊ１．
ｈａｎｄｌｅｒ．ｓｅｎｄＭｅｓｓａｇｅ（ｍ）；
）
．
＾上—ｉ止ｊ止— 止—址．＾ ．址ｊ止—址—址．址．址．喜ｔ． ．ｊ止．Ｓ ．址ｊ＾Ｌ．址．址． ．Ｓ ． ｔ．址．Ｓ止．Ｓ止．址 址．址 ５也．址．１Ａ．５ — 止—Ｓ‘．Ｓ止．址 址．址．址．Ｓ屯．５止．址． Ｌ．址．址
（上接第４８页）
／／ｍａｐｐｉｎｇ映射
ｖａｒ ａｃｃｏｕｎｔＤａｔａ＝ｔｈｉｓ．ｃｏｍｐ（ ａｃｃｏｕｎｔＤａｔａ＂）；
ｔｈｉｓ．ｏｗｎｅｒ．ｓｅｎｄ（ａｃｃｏｕｎｔＤａｔａ．ｇｅｔＣｕｒｒｅｎｔＲｏｗＯ）；
ｔｈｉｓ．ｃｌｏｓｅ（）；
｝：
■＿
ｌ’ ＝＝ ．Ｉ１一¨・－ ＿ ： 。Ｉｌ
１ ¨【 ｉＩ
【
参考文献
｝ ！
【 Ｉ
４记账本ＨＴＭＩ ５ Ａｐｐ结果展示
如冈２所示．记账本能够完成增、删、改、查Ｔ作
图２记账本开发结果演示
内容，通过ｌｉｓｔ．Ｗ展示账目信息并跳转ｄｅｔａｉｌ．Ｗ页面，
［１］宋朋飞，曹斌．基于ＷｅＸ５的新闻类ＨＴＭＬ５ Ａｐｐ
开发和设计明．电子技术与软件工程，２０１７，（１）．
【２１姚渝涛．ＷｅＸ５调用ＷｅｂＡｐｉ实现交互及跨域认证
［Ｊ］．电脑编程技术与维护，２０１７，（５）．
ｔｔｅｔａｉｌ．ｗ完成账目新增和修改，ｒｏｏｔＣ｜ａｓｓ．Ｗ可以设置支出
秆Ｉ收入的分类信息，应用主页ｉｎｄｅｘ．Ｗ通过左侧边栏可
以切换 的项门．通过ＷｅＸ５开发平台简化开发过
程，封装 的ＺＭ＇ｔ：可以最简单的可视化拖拽完成添加删
除移动等功能，为ＡＰＰ开提供了非常便利的开发环境。
２０１７．１２
【３】刘冬青．基于Ａｎｄｒｏｉｄ和ｉｏｓ平台的高校仪器预约
ＡＰＰ设计与实现［Ｊ］．实验技术与管理，２０１６，（５）．
口＝二【 磁
2024年6月14日发(作者：陀丹寒)
１移动应月
…
啊ＯＢＩＬＥＡＰＰＬＩＣＡＴＩＯＮ ． …… ……一…… 一 一 一…… …… ……………。……。 …
基于ＷｅＸ５的Ａｎｄｒｏｉｄ系统记账本ＨＴＭＬ５ Ａｐｐ开发与设计
山少男
（辽 ｊ 现代ＪＪＫ务职业技术学院，沈 １ １００００）
摘 要：采用ＷｐＸ５平台来开发基于ｔｔＴＭＩ ５＋ＪＳ＋ＣＳＳ３，适用于 ｌ｛ｈ・ｏｉｄ操作系统的记账本Ａｐ１）， 利用
ＭｙＳＱＩ 数据库来做后端数据服务支持，完成账目列表页而和记一笔页面分类数据存储记账本Ａｐｐ一
共分为４个部分：账目－０Ｊ丧、记一笔、分类页面、主页，分别介绍了各页面的开发与￣ｋ２￣１－过程
关键词：ｗ ５平台；１、ｌＨｈ （１系统；ＨＴＭ１ ５ Ａｐｐ
ｌ ＷｅＸ５开发平台
ｗｅＸ５怂‘款免费、开源、跨端Ｈｙ１）ｒｉｄ Ａｐｐ的开发
Ｉ √ 贞Ｉ』Ｉ；『纰什足可视化负面设汁．以模块化形式快
速 发，开发、编 、 试是一体化集成开发环境，并
Ⅱ不需嘤 声 发 验 ｎｒ使 、
墓
器
罄
萋
ＷｅＸ５ Ｓｔｕｄｉｏ
可视化设计
Ｗｅｈ ＡＰＰ
剥 丰富的组件体系和向导
全能力调试和智麓代码提示
没备访问 扩展 力
服务端
云ＡＰＩ ＡＰＰ群新 统计‘
Ｊａｖａ ＰｔｔＰ ＮＥＴ
无限制、多方式、可加密ＡＰＰ￣］龟
图１ ＷｅＸ５开发平台简介
１．１ 开源免费
ｅＸ５采川ＡＩ｝ａ…ｈ 许ｌｌｆ证ＪＩ：源模式，商业友好，
完令免费 墟丁ＷｅＸ５开发 来的应ＪＨ，每一行代码
鄙 已仃模板巾，发布部籍无任何限捌，完全白
｝ｆ１免费
１．２基于主流技术和标准
ｗｔ，Ｘ５ 端采川ＨＴＭＩ ５＋ＣＳＳ３＋Ｊｓ标准，使用
ＡＭＩ）规池的ｒｅ｛ｌｕｉ￣’ｔ ｉｓ、ｌ｝ｏｏｌｓｔｒａｐ、ｊｑｕｅｒｙ等技术；ＷｅＸ５
Ｆ机Ａｐｐ培ｊ ｐｈ＜｝ｔ￣ｅｇａｐ（（．Ｉ１ ｒＩ１・，ｖａ）采州混合应崩（｝１ｙ—
ｌＩｒｉｄ ａｐｐ） 发模 ：ＷｅＸ５史特多种类晖９ｆｉｇ／，端，包括
Ｊａｖａ、Ｐｔｔｆ） ．ＮＥＴ等，同｝ｆｌｆ 支持云ＡＰＩ
Ｉ．３可视化设计
ＷｅＸ５的１ＤＥ缺Ｊ Ｉｉｆ｝Ｓｅ，提供了一个完全可视
化、组件化、拖曳式 发环境，完全所 即所得；向导
化和卡；｛板化等 ，快速 成常 应川场景 【白ｉ
１．４丰富的组件体系和向导
ＷｅＸ５的ＵＩ绀 ： 系完伞 十ＨＴＭＩ ５＋ＣＳＳ＋Ｊｓ，
使川ｒｅ｛ｔｕｉ￣ ｊｓ、ｊｑｕｅｒｙ和Ｉ｝ｏｏｔｓ１］’ａＩ）技术，内置支持大量
丰谢的ｕｌ ｔｌ［ｆｔ：；针埘一些常』＿Ｈ的场景，ＷｅＸ５提供了
丰寓的 ．便ｒ快速构建心川
２记账本Ｉｆ ＦＭＩ ５ ＡＰＰ功能模块
２．１账目列表模块
曼…ｌｉｓｔ组什米完成列表贞战线部分的设计。具
体 现Ｉ 包含仵ｌｉｓｔ组仆・ 添加ｒｏｗ组ｆ，ｌ：，通过使用
ＯＵｔｌ｝￣Ｊｌｌ 什放人指定的ｘ叫０ｌ『ｌＪ输…ｆ］ｒｙｐｅ、ｆＣｌａｓｓ、
ｆＤａｔｅ、ｆＭ【）Ｉ ｙ、ＩＩ）ｅｓ（ｕ・ｉｐｔｉｏ￣１埘成的内容．．数据组件配置
环节『｛ｌ他川ＷｅＸ５平 提供的后台服务功能．在ｍｏｄｅｌ
根绀什卜添』ＪＩｌ ａ（：ｃＯＵｌＩｔＤａｔａ 什，打 ｆ：ＭｙＳＱＩ 数据库使
州 ＩＩ１ ｆｊ勺ｑｕｅｒｙＡｃｃｏ￣・ｎｔ，将 巾数掘通过ｆｌＤ导人ａｃ一
川 ｌ ｔａ，通过眨爪绀仆 ｌ展示川｛来
２Ｉ２记一笔页面模块
小＝部分足 Ｊ｝小Ａｐｐ功能最多也是最为复杂的一
部分，： 嘤完成增加一条新垛Ｈ、蜓改已有账日、删除
已彳 账¨ ｊ 体实脱Ｉ 包含在ｃｏｎｔｒｏｌｇｒｏｔ，ｐ组件中添加
ｌａ［）ｃｌｓｅｌ －１ Ｍ￣ｅｌｉｎｐｕｔ组什， １ａ１）ｅｌ巾直接显示
ｆＴｙｔ ｆＣｌａｓｓ、ｆ１）ａｔｅ、ｆＭｏｎｅｙ、ｆＤｅｓｃｒｉｐｔｉｏ￣ｌ对应的内容。
ｓｅｌｅｃｔ干¨ｉｎｐｕ！ ｔｆｔ：Ｉ￣ｇ性ｒｆ１连接数据组件 、数据组
件 环 巾复制ｌｉｓｔ．Ｗ『Ｉｌ的ａ（ ｏｕｎｔＤａｔａ并且添加两个
ｄａｔａ 什：ｃｌａｓｓ｛ｔａｌａ和ｔｙｐｅｄａｔａ，分）ｊＩｊ存ｓｅｌｅｃｔ１连接
作者简介：Ｉｆｌ少 （１９８４一），颁 岛级厂程师，讲
师．研究 向：移动互联网Ｊｌ：发、新媒体营销、移动电
子商务等
收稿日期：２０１７－０３—２２
－＿
文
……’… ……………一…………………’
实用第一 智慧密集
… ，…… ．… ． … …
ｔｙｐｅｄａｔａ并在ｓｅｌｅｃｔ２连接ｃｌａｓｓｄａｔａ，ｉｎｐｕｔ依次显示
ｆＩ＇ｙｐｅ、ｆＣｌａｓｓ、ｆ１）ａｔｅ、ｆＭｏｎｅｙ、ｆＤｅｓｃｒｉｐｔｉｏｎ条目内容。
并配置ａｄｄＢｔｎ、ｏｋＢｔｎ、ｄｅｌＢｔｎ的属性，设置ＪＳ动态语
句实现添加跳转与删除条Ｈ 、
２．３分类设置模块
分类设置模块主要是完成ｆＣｌａｓｓ分类设置，通过添
新增账【１分类数据：
Ｍｏｄｅ１．ｐｒｏｔｏｔｙｐｅ．ｎｅｗＢｔｎＣｌｉｃｋ＝ｆｕｎｃｔｉｏｎ（ｅｖｅｎｔ）
新增分类数据并给出默认值
ｔｈｉｓ．ｃｏｍｐ（“ｃｌａｓｓＤａｔａ”）．ｎｅｗＤａｔａ（ｆ
“ｄｅｆａｕｌｔＶａｌｕｅｓ“：【｛
一
ｎ ｈ
”ｆｌＤ“：ｊｕｓｔｅｐ．ＵＵＩＤ．ｃｒｅａｔｅＵＵＩＤ０，
｛｝ ｎ一
”ｆＴｙｐｅ ： 支出“
一
一
加、删除、更改、保存分类信息。同样使用ｌｉｓｔ组件，
添力ｎ ｒｏｗ绀 ， ｉ ｒＯＷ组 ：Ｉ］１分ｊ；４力Ⅱ入ｓｅｌｅｃｔ、ｉｎｐｕｔ、
ｂｕｔｔｏｎ组件 数据绀件配置环 中复制记一笔页面ｄｅ—
）：
｝）：
）】
等
ｔａｉｌ．ｗ巾的ｃｌａｓｓｄａｔａ组件 ｔｙｐｅ（ｔａｔａ，分别在ｓｅｌｅｃｔ连接
ｔｙｐｅｄａｔａ并在ｉｎｐｕｔ连接ｃｌａｓｓｄａｔａ，同时设计ａｄｄＢｔｎ、
删除垛¨分类数据：
Ｍｏｄｅ１．ｐｒｏｔｏｔｙｐｅ．ｄｅＩｅｔｅＢｔｎＣｌｉｃｋ＝ｆｕｎｃｔｉｏｎ（ｅｖｅｎｔ）
ＯｋＢｔｎ、ｄｅｌＢｔｎ的单击事件ｏｎＣｌｉｃｋ的Ｊｓ部分，让其完
成分类设置的新增、删除、更改。
２．４应用首页模块
应川首页主要是用页面框架完成页面调度．一般以
左边 的形式 脱 选择ｗ文件是使用首页模式。
删除ｌｉｓｔ当前行数据
ｖａｒ ｒｏｗ＝ｅｖｅｎｔ．ｂｉｎｄｉｎｇＣｏｎｔｅｘｔ．￥ｏｂｊｅｃｔ；
ｔｈｉｓ．ｃｏｍｐ（“ｃｌａｓｓＤａｔａ“）．ｄｅｌｅｔｅＤａｔａ（ｒｏｗ）；
｝：
｝ 一琶贞面中接收参数，如果垃新增数据隶虻增Ｊ Ｊ『 ｌ
新 求，ｆＨ１ 是修改数据就加载传过米的仃数
Ｍｏｄｅｌ，ｐｒｏｔｏｔｙｐｅ．ｍｏｄｅｌＰａｒａｍｓＲｅｃｅｉｖｅ＝ｆｕｎｃｔｉｏｎ
通过ｂｕｔｔｔｍ设置分类设置栏日ｃｌａｓｓＳｅｔＢｔｎ，通过单击事
件ｏｎＣｌｉｔ・ｋ通过Ｊｓ使ｔｔ Ｊ ｓｈｅｌｌ刈象的ｓｈｏｗＰａｇｅ方法启动
分类设置页 ，启动ＭｙＳＱＬ数据库，Ｔｏｍｃａｔ测试，调
试运行
（ｅｖｅｎｔ）（／／记一笔接收参数
ｖａｒ ａｃｃｏｕｎｔＤａｔａ＝ｔｈｉｓ．ｃｏｍｐ（“ａｃｃｏｕｎｔＤａｔａ“）：
ａｃｃｏｕｎｔＤａｔａ．ｃｌｅａｒ（）；
ｔｈｉｓ．ｏｐｅｒａｔｏｒ＝ｅｖｅｎｔ．ｐａｒａｍｓ．ｏｐｅｒａｔｏｒ；
３记账本Ｈ ＦＭ１ ５ Ａｐｐ主要开发过程
主要数据组件主 属性设置如表ｌ所示 、
表１ 数据组件属性配置表
组件 父组件
ｉｆ（ｔｈｉｓ．ｏｐｅｒａｔｏｒ：＝“ｎｅｗ“）｛
／／新增账目数据
ａｃｃｏｕｎｔＤａｔａ．ｎｅｗＤａｔａ（｛
”ｄｅｆａｕｌｔＶａＩｕｅｓ“：【｛
属性
—————————— ——…
属性值
‘ 一————————＋
｛ｘｉ【 ｛
３ａａｓＤａｔａ
ａｃ（－ｌ】ｕｎｌＤａｔａ
“ｆｌＤ”：ｊｕｓｔｅｐ．ＵＵＩＤ．ｃｒｅａｔｅＵＵＩＤＯ．
”ｆＣｒｅａｔｅＴｉｍｅ”：ｎｅｗ Ｄａｔｅ（）．
ｆＤａｔｅ”：ｎｅｗ Ｄａｔｅ（）．
；不自动新增数据
”ｆＴｙｐｅ”：“支出”
｝】
１账目分类数据
单击右侧按钮弹出选择
ｊ ’ 。一
｝）：
Ｉ选择后自动带出
Ｊ 一——
）ｅｌｓｅ ｉｆ（ｔｈｉｓ．ｏｐｅｒａｔｏｒ＝＝”ｅｄｉｔ“）｛
择后自动带出
ｂａａｓＤａｔａ
，／修改账目数据
ａｃｃｏｕｎｔＤａｔａ．ＩｏａｄＤａｔａ（【ｅｖｅｎｔ．ｐａｒａｍｓ。
选择后自动带ｔｔｌ
不自动加载数据
】 一————————
ｄａｔａ．ｒｏｗＤａｔａ Ｊ）：
ａｃｃｏｕｎｔＤａｔａ．ｆｉ ｒｓｔ（）；
）
）：
不自动新增数据
获取全部账目分类数据
Ｊｘｉｄ ｔｙｐｅＤａｔａ
账目类型数据
ＪＩ 输人数据后．关『才ｊｉ 一笔贝 ，将川ｆ一输入的
数 返…账ｌ１列表贞
Ｍｏｄｅ１．ｐｒｏｔｏｔｙｐｅ．ｏｋＢｔｎＣｌｉｃｋ＝ｆｕｎｃｔｉｏｎ（ｅＶｅｎｔ）｛
１ 憎加ｔＴｙｐｅ（Ｓｔｒｉｎｇ）列
增加丽行数据．分别是收人、支
编辑列时设置主键列
ｌａｔａ ｍｏｄｅｌ ｉｄＣｏｌｕｍｎ ｆｆＴｙｐｅ
ａｕｔｏＩａ￣ａｄ ［ｒｕｅ
∥确定后返回当前行，用于ｗｉｎｄｏｗＤｉａｌｏｇ的
（下转第５２页）
『ａｕＩｏＮ ｗ ｝ｆａｌｓｅ
４ 函 ２０ｉ１７藿．１ 涵２
与簟
ｊ１％
…………………………………………………‘………
实用第一 智慧密集
ｄｅｆａｕｌｔ：
ｂｒｅａｋ；
，
ｍｙＴｈｒｅａｄ。ｉｎｔｅｒｒｕｐｔ０；
｝
’）：
ｍｙＴｈｒｅａｄ：ｓｔａｒｔＯ；
）
ｓｕｐｅｒ．ｈａｎｄｌｅＭｅｓｓａｇｅ（ｍｓｇ）：
｝
３．３聊天与地图的结合
４结语
本软件在真机上（Ａｎｄｒｏｉｄ ３．０以上版本）已将登
设计ｊ二将地图与聊天窗口放在
将聊人 ｊ地 卡Ｈ结合，并实时动态地显示自己和对
的 体化
一
此
录、注册、聊天及路线规划等功能测试通过。测试时是
在局域网环境下，使用虚拟位置测试了路线规划功能。
服务器使用的是Ｏｐｅｎｆｉｒｅ服务器．版本是Ｏｐｅｎ．
ｉｆｒｅ
３ ９ ｌ。测试时需要在局域网下安装好Ｏｐｅｎｆｉｒｅ服
…
个 面ｊ ， 将自己和对 ‘的位置标注在地 上。进
入聊尺 系统后 就开辟出一条线程，每隔一定的
Ｉｔｔ，Ｉ＇ＪＪ Ｊ隔发送・条定他信息给对方 、接受疗接受到定位
信息，就会 地 上 新发送方的具体位置。核心代码
如卜：
ｍｙＴｈｒｅａｄ＝ｎｅｗ Ｔｈｒｅａｄ（ｎｅｗ Ｒｕｎｎａｂｌｅ（）｛
＠Ｏｖｅｒｒｉｄｅ
务器．再使用本软件。
目前，由于Ａｎｄｒｏｉｄ平台具有较强的开放性．基于
Ａｎｄｒｏｉｄ平台的手机端软件开发产品层出不穷。将社交
与位置信息相结合的软件也越来越多。随着人们对位置
ｐｕｂｌｉｃ ｖｏｉｄ ｒｕｎ（）｛
服务的需求更加多样．对类似的地图聊天软件也提出了
更高的要求。现今“ｏｆ０”、“摩拜单车”越来越普及．
很多年轻人都选择共享单车的方式出行。共享单车的位
置能否在地图上显示、公交车的到站信息的查询等都是
此类软件可以努力的方向。
参考文献
［１】王文举．基于Ａｎｄｒｏｉｄ平台开发俯卧撑计数器【Ｊ］．
ｗｈｉｌｅ（ｆｉｎｉｓｈｅｄ）｛
∥每隔５秒发送一次
ｈａｎｄｌｅｒ ｓｅｎｄＥｍｐｔｙＭｅｓｓａｇｅ（１ １）：
ｔｎ，｛＿ｒｈｒｅａｄ．ｓｌｅｅｐ（５０００）：）
ｃａｔｃｈ（ＩｎｔｅｒｒｕｐｔｅｄＥｘｃｅｐｔｉｏｎ ｅ）｛
／／ＴＯ ＤＯ ＡｕｔＯ—ｇｅｎｅｒａｔｅｄ ｃａｔｃｈ ｂｌｏｃｋ
ａｎｄｒｏｉｄ．ｏｓ．Ｍｅｓｓａｇｅ ｒｎ＝ｈａｎｄｌｅｒ．ｏｂｔａｉｎ—
ＭｅｓｓａｇｅＯ；
电脑编程技巧与维护，２０１２，（２３）．
ｍ．ｏｂｉ＝ｅ：
ｍ．ｗｈａｔ＝１００；
［２】周齐飞．基于Ａｎｄｒｏｉｄ平台的ＨｙｂｒｉｄＡｐｐ开发
电脑编程技巧与维护，２０１４，（１５）．
【Ｊ１．
ｈａｎｄｌｅｒ．ｓｅｎｄＭｅｓｓａｇｅ（ｍ）；
）
．
＾上—ｉ止ｊ止— 止—址．＾ ．址ｊ止—址—址．址．址．喜ｔ． ．ｊ止．Ｓ ．址ｊ＾Ｌ．址．址． ．Ｓ ． ｔ．址．Ｓ止．Ｓ止．址 址．址 ５也．址．１Ａ．５ — 止—Ｓ‘．Ｓ止．址 址．址．址．Ｓ屯．５止．址． Ｌ．址．址
（上接第４８页）
／／ｍａｐｐｉｎｇ映射
ｖａｒ ａｃｃｏｕｎｔＤａｔａ＝ｔｈｉｓ．ｃｏｍｐ（ ａｃｃｏｕｎｔＤａｔａ＂）；
ｔｈｉｓ．ｏｗｎｅｒ．ｓｅｎｄ（ａｃｃｏｕｎｔＤａｔａ．ｇｅｔＣｕｒｒｅｎｔＲｏｗＯ）；
ｔｈｉｓ．ｃｌｏｓｅ（）；
｝：
■＿
ｌ’ ＝＝ ．Ｉ１一¨・－ ＿ ： 。Ｉｌ
１ ¨【 ｉＩ
【
参考文献
｝ ！
【 Ｉ
４记账本ＨＴＭＩ ５ Ａｐｐ结果展示
如冈２所示．记账本能够完成增、删、改、查Ｔ作
图２记账本开发结果演示
内容，通过ｌｉｓｔ．Ｗ展示账目信息并跳转ｄｅｔａｉｌ．Ｗ页面，
［１］宋朋飞，曹斌．基于ＷｅＸ５的新闻类ＨＴＭＬ５ Ａｐｐ
开发和设计明．电子技术与软件工程，２０１７，（１）．
【２１姚渝涛．ＷｅＸ５调用ＷｅｂＡｐｉ实现交互及跨域认证
［Ｊ］．电脑编程技术与维护，２０１７，（５）．
ｔｔｅｔａｉｌ．ｗ完成账目新增和修改，ｒｏｏｔＣ｜ａｓｓ．Ｗ可以设置支出
秆Ｉ收入的分类信息，应用主页ｉｎｄｅｘ．Ｗ通过左侧边栏可
以切换 的项门．通过ＷｅＸ５开发平台简化开发过
程，封装 的ＺＭ＇ｔ：可以最简单的可视化拖拽完成添加删
除移动等功能，为ＡＰＰ开提供了非常便利的开发环境。
２０１７．１２
【３】刘冬青．基于Ａｎｄｒｏｉｄ和ｉｏｓ平台的高校仪器预约
ＡＰＰ设计与实现［Ｊ］．实验技术与管理，２０１６，（５）．
口＝二【 磁