一个html写的app首页,如何快速开发一个简单好看的APP控制页面
原标题:如何快速开发一个简单好看的APP控制页面
导读
机智云开源框架为了让开发者快速开发APP,已将用户登录,设备发现,设备配网等功能做成了各个标准模块,仅保留控制页面让开发者自行开发设计,节省了开发者的时间。本章节,将示例如何快速开发一个简单好看的控制页面。
[ 1、了解机智云开源框架]
在开发一个简单好看的APP控制页面前,先来了解一下机智云开源框架包里面都有些什么?
首先,下载一个Andriod版本的机智云开源框架包,并用Eclipse打开后,将Package Presentation设置为Hierarchical,此时可以清晰的看到整个工程的目录结构,如下图所示:
机智云开源框架将每一个模块都独立为Package, Package与Package之间进行最大程度解耦。在开发过程中,如果想删除某一功能,比如不想使用第三方登录,则可以直接将“ThirdAccountModule”包直接删除即可,不会对其他包产生影响。
再来了解一下UIConfig.json文件中的一些参数
在上面所列的文件中。assets目录下的UIConfig.json文件是一个全局配置文件,在这里可以设置工程的配置信息,逐一介绍:
app_id:机智云 app id
app_secret:机智云 app secret
product_key:机智云 product key
wifi_type_select:默认配置模块wifi模组选择功能是否开启
tencent_app_id:qq登录 app id
wechat_app_id:微信登录 app id
wechat_app_secret:微信登录 app secret
push_type:推送类型 【0:关闭,1:极光,2:百度】
bpush_app_key:百度推送 app key
openAPI_URL:openAPI 域名及端口,格式:“api.gizwits.com:80”,不写端口默认80
site_URL:site 域名及端口,格式:“site.gizwits.com:80”,不写端口默认80
push_URL:推送绑定服务器 域名及端口,格式:“push.gizwits.com:80”,不写端口默认80
buttonColor:按钮颜色
buttonTextColor:按钮文字颜色
navigationBarColor:导航栏颜色
navigationBarTextColor:导航栏文字颜色
configProgressViewColor:配置中界面 progress view 颜色
addDeviceTitle:添加设备界面 导航栏标题文字
qq:是否打开QQ登录【true:打开】
wechat:是否打开微信登录【true:打开】
anonymousLogin:是否打开匿名登录【true:打开】
在机智云官网上分别找到产品的Product Key、App ID与App Secret分别填入json文件中对应的位置,如下图所示:
正确填写Product Key、App ID与App Secret后,工程就可以部署运行了
[ 2、什么是控制页面]
点击下面左图上的“智能灯”,可进入到右图所示界面,右图所示为“控制界面”。进入控制页面,可以发现,控制页面为一个空白的页面。机智云开源框架为了让开发者快速开发APP,已将用户登录,设备发现,设备配网等功能做成了各个标准模块,仅保留控制页面让开发者自行开发设计,节省了开发者的时间。
接下来进入正文
[ 3、快速开发一个简单好看的控制页面]
1. 控制页面代码预览
依次打开ControlModule -> GosDeviceControlActivity.java,可以看到,整个控制页面非常简单,就只有一个TextView将设备的mac地址显示出来。
2. 页面UI设计
根据创建的产品“智能灯”,想实现的UI效果如下:
点击页面中间灯的控件,APP下发命令,控制灯的开关,并将灯的图片显示为开启状态。关闭的时候显示为关闭。
3. 页面布局代码开发
将表示智能灯开关状态的图片拷贝到drawable目录下,如下图所示:
添加Button控件
1)打开控制页面对应的布局文件“activity_gos_device_control.xml”
2)添加Button控件
如图所示,将控制页面中多余控件删除,添加一个Button控件
3)使用selector来对Button控件背景进行控制
在drawable文件夹下新建一个selector文件,如图所示:
在btn_light_onoff_selector.xml添加背景切换代码:
4)将Button控件的背景设置为btn_light_onoff_selector,代码如下:
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
android:id="@+id/btn_light_onoff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/btn_light_onoff_selector"/>
4. 控制逻辑代码开发
4.1.编写控制页面代码
下图为该产品在云端创建的数据点。
整个GosDeviceControlActivity的参考代码如下:
略, 阅读原文可查看代码细节
或打开连接查看docs.gizwits.com/zh-cn/quickstart/AndroidAppFrame.html
4.2. 部署调试
完成上述代码编写之后,就可以部署到手机中测试控制结果了。
下发命令
如图所示,APP部署到手机上后,进入到控制页面,如下图所示:
点击app中灯的图标,APP将下发控制命令,此时APP的按钮图标将变为开灯状态。
此时可以在云端虚拟设备的通信日志中看到app下发的控制命令,如下图:
设备主动上报数据
如图所示,在虚拟设备中,将开关的值改为“0”,点击下面的推送,此时可以看到通信日志中会有一条记录“虚拟设备上报数据”,表示设备上报数据成功了。
此时APP的控制页面中,灯的按钮马上变成了关灯状态,表示APP成功收到了设备的上报数据。
责任编辑:
一个html写的app首页,如何快速开发一个简单好看的APP控制页面相关推荐
- 如何快速开发一个App手机应用
随着智能手机的不断普及,Adroid.IOS APP应用越来越多,不仅方便和丰富了我们的生活,同时也让许多企业都想在移动端分得一杯羹或者为自己的企业开发一个手机应用,但通常这些企业可能没有自己的技术团 ...
- 如何快速开发一个完整的ios直播app
如何快速开发一个完整的iOS直播app 一.个人见解(直播难与易) 直播难:个人认为要想把直播从零开始做出来,绝对是牛逼中的牛逼,大牛中的大牛,因为直播中运用到的技术难点非常之多,视频/音频处理,图形 ...
- 使用.NET Core快速开发一个较正规的命令行应用程序
程序员的世界,命令行工具一直是"体验非常友好"的工具,也能自动化完成很多事情,同时还能结合shell来进行某项任务的批处理(脚本).在.NET Core中,命令行应用程序是基础,但 ...
- FastAPI:快速开发一个文本转语音的接口
这段音频就是本文的接口生成的. Python Web 开发方面有一个很重要的环节就是开发接口,开发接口性能最好的工具就是闪电侠 FastAPI[1],正如它的名字一样,是非常快的 API.当然,还有一 ...
- 有了 serverless,前端也可以快速开发一个 Puppeteer 网页截图服务
更多云原生技术资讯可关注阿里巴巴云原生技术圈. Puppeteer 是什么? puppeteer 官网的介绍如下: Puppeteer is a Node library which provides ...
- Serverless 实战 —— 前端也可以快速开发一个 Puppeteer 网页截图服务
Serverless 实战 -- 前端也可以快速开发一个 Puppeteer 网页截图服务 更多云原生技术资讯可关注阿里巴巴云原生技术圈. Puppeteer 是什么? puppeteer 官网的介绍 ...
- 用python快速开发一个实用的socket服务器
用python快速开发一个实用的socket服务器 - 吴尔平 - 博客园 用python快速开发一个实用的socket服务器 首先,要明白不是所有的socket服务都需要高性能.如果要求高性能,使用 ...
- uni-App快速开发一个安卓应用
uni-App快速开发一个安卓应用 本期将会用到的开发工具及SDK: 1,[HBuilderX][https://www.dcloud.io/] 2,[Android Studio][http://w ...
- 面试官问:如何快速开发一个类似微信的聊天系统?
去年我们公司要我去面试一位候选人,当时刚好我接手了公司的 IM 系统,借这个机会,就问了候选人这个问题:如何快速开发一个类似微信的聊天系统? 这个问题的确让候选人回答起来很吃力: 从分析 PC 端微信 ...
最新文章
- RDKit | 基于RDKit和Python的阿斯利康ADME数据集分析
- [算法进阶0x10]基本数据结构C作业总结
- 微信小程序通用开发框架小程序端包含若干基础组件
- html浏览器引擎表示,html – Web浏览器引擎和特殊字符呈现
- .net core高性能通讯开源组件BeetleX
- 【渝粤题库】陕西师范大学210019 学前教育科研方法 作业(专升本)
- 易优cms企业建站系统v1.5.1 含小程序源码
- 初识kbmmw 中的ORM
- 转]Linux杀死进程方法大全
- NodeJs——(8)http.ServerRequest的过程
- sql 取两个表_图撕SQL表联结
- 职场学会这三招,谁都想跟你交朋友
- DOM4j-中文API
- [数据库]特殊符号对应的ascii和键盘字符的十六进制表示
- SpringBoot使用@Asyn注解注意事项
- matlab画s域零极点图,信号与系统的S域分析.ppt
- 非关系型数据库之Redis【redis安装】
- C语言中阶第三篇:循环语句do while透析以及循环语句总结(执行次数、执行特点和循环英文的详解)
- windows 时间同步出错的解决办法
- Java入门第一步---配置环境、安装工具(超级详细)
热门文章
- Encoder-Decoder具体过程
- 【单片机仿真项目】8×8 LED点阵图形显示
- 《Qt MOOC系列教程》第一章第二节:字符串处理和值类型
- POJ3618 绝对值排序
- 织女星开发板RISC-V核通过SPI协议驱动ARDUINO LCD模块(显示)
- 物料信用体系建立助力国产铝电解电容器品牌崛起
- 生气,是因为你不够大度;嫉妒,是因为你不够优秀;悲伤,是因为你不够坚强;郁闷,是因为你不够豁达。记住,所有的负面情绪都源于你的弱小,唯有强大自己才能够百毒不侵!
- JST 连接器 B4B-ZR-SM4-TFT SMD 4POS 1.5MM
- 网络安全周 | 分享8个网络安全小知识
- 关于字节,半字,字到底有多多少位