位置: 编程技术 - 正文

JavaScript使用DeviceOne开发实战(三)仿微信应用(js如何使用)

编辑:rootadmin

推荐整理分享JavaScript使用DeviceOne开发实战(三)仿微信应用(js如何使用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript用处,javascript define,javascript definitive guide,javascript decode,javascript运用,javascript definitive guide,javascript运用,javascript运用,内容如对您有帮助,希望把文章链接给更多的朋友!

这是一个系列的文档,长期目标是利用DeviceOne开发一些目前使用广泛的优质手机应用,我们会最大化的实现这些应用的每一个功能和细节,不只停留在简单的UI模仿和Demo阶段,而是一个基本可以使用的实际App。

在实现的过程中,会有很多困难,还会发现有一些功能目前缺乏组件支持而无法实现,也会碰见各种移动开发中都会碰到的常见技术问题。一步一步的操作和问题的解决可以让开发者直观的了解通过DeviceOne如何开发一个实际App,也可以了解移动开发本身的很多技术细节,可以让App开发者少走很多弯路。

这个文档主要介绍微信的模仿。

第一部分是框架的搭建

UE和UI设计,通常App的开发需要产品人员的UE设计和美工人员的UI设计,这二个步骤完成后才开始功能实现。我们现在是模仿已有的微信,这些步骤都可以省去,看下图是美工提供的主界面UI设计图,里面的元素的尺寸都标记了。

1.新建项目:我们选择了Simple template,选择空模板是因为我们可以更细致的讲解开发的过程。实际上这个项目是可以选择Multi View with ViewShower模板更合适。

2.简单分析一下主界面,整个主界面的尺寸是iphone6的尺寸*. 分上下二个部分,底部是一个Bottom Bar导航栏,上面是4个独立的界面,这4个界面永远只有一个界面显示,其他三个界面在内存中,靠底部的导航来切换,这个适合用do_ViewShower为框架的主体如下图:

对应这个设计,我们在新建的项目上删除自动生成的button,添加一个do_ALayout组件和do_ViewShower组件,设置它们的高宽和x,y坐标:

3.接下来我们为ViewShower增加4个分页,在这里我还强调一下,实际App会多人参与,我们的代码结构要清晰易读,命名尽量使用英文,实在不行使用中文全拼,包括要建立多级子目录,不要都混在一起。在这里我们增加4个子目录:chats, contacts, discover, me. 右键每个子目录,选择New--Other--DeviceOne--UI File,创建4个index.ui,对应的index.ui.js会自动生成。

这里注意把这4个ui文件对应的根节点ALayout的高度设置为,因为这4个ui文件都是主界面的ViewShower的子view,不应该超过ViewShower的大小。

另外为每个ui里都添加一个label,标记中文名,只是一会儿debug看真实效果更清楚。

4.Bottom Bar内简单添加4个按钮,然后添加相应的js代码实现ViewShower的页面切换功能。这里提一个技巧,选中2个或以上组件,可以使用各种对齐方式的功能,如下图:

5.在index.ui.js里添加ViewShower初始化的代码和按钮的点击事件。

6.我们来真机看看运行效果,启动设计器的调试服务,启动手机端的调试程序,最后我们看到的效果图如下,iOS和Android界面完全一样。点击底部的4个按钮,切换效果都是好的:

7. 这一节的内容就到这里,框架工作完成了吗?只能说框架的第一步工作完成,如果我们有很多同事一起开发这个App的话,我们可以把工作开始分开并行,接下来分5个部分:

* Bottom Bar的完成* /chats/index.ui的完成* /contacts/index.ui的完成* /discover/index.ui的完成* /me/index.ui的完成多人并行工作的前提是代码版本管理比如SVN,GIT,我们这里使用GIT,地址是 我们首先来分析一下界面效果图和设计图

整个底部导航分4个重复的部分,每个部分由一个图片ImageView和底部标题Label,以及右上角标示,这个标示可以用圆角Label来实现,这个标示缺省的时候应该是隐藏的。

1. 第一步我们得找到对应的图片资源,通常开发这些资源由美工提供,我们现在模仿微信,最好的方式是从微信原生安装包里获取,不能直接靠截图,而是打开微信ios,android安装包,ios的安装包是ipa和android的安装包apk都是一个压缩文件,解开可以获取到一些图片资源。目前我只需要底部8个图标,包括未点中以及点中的高亮图标,外面把这些图标放在image目录下

2. 先删除先前增加的4个临时按钮,然后按照美工提供的尺寸数据布局好新的组件,包括4个do_ImageView组件和4个Label组件以及4个右上角的Label简单计算可以得出ImageView的大小是*。这里有一个小技巧,设置好一组ImageView和Label后选中2个组件,然后右键“Copy”,然后再"Paste"三次,还可以选中多个组件各种对齐。

再细调一下,把图片和文字设置好,图片设置就是设置ImageView的source属性,Label需要设置文字居中,设置textAlign属性为center,设置字体,设置背景色,前景色等等,设置右上角三个Label的visible为false。中间添加一个ALayout设置背景为灰色,作为ViewShower和Bottom Bar上下的分割线. 这里要注意,右上角的正圆形Label的实现方式就是设置border属性,border设置为FFFF,1, 表示边界线的颜色是红色,宽度1,圆角半径(Label的宽高都是),从而实现正圆。

在真机上测试一下效果,iPhone和Android手机真机的效果图如下:

<ignore_js_op>

3. 这个时候会有2个问题,如果给ImageView上添加点击事件的话,用户必须点中这个图片才能触发点击,这样体验不好。第二个问题是图片在Android上稍微有点变形,如果在比如iPhone4上,可能圆形会变成椭圆,这个问题是由于不同手机宽高比的差异。

要解决的办法是:

* 把Bottom Bar所在的ALayout增加4个一样大小的子ALayout,然后把imageview,label都放在对应的子ALayout上,然后给子ALayout增加点击事件,这样用户的手指只要接触到差不多位置都能触发事件* 把上面的4个子ALayout的isStretch属性改成false,这个原理可以参考文档 ALayout的示例demo

JavaScript使用DeviceOne开发实战(三)仿微信应用(js如何使用)

4. 修改index.ui.js,添加代码主要是在底部bottom bar切换按钮的时候修改所有图标的颜色和字的前景色。

到此为止,底部导航栏基本实现完成,这一节比较简单,主要是一些细致的ui拖拽调整。我们用调试版本看一下Android,iOS的效果都非常不错。

我们开始实现ViewShower的第一页主体内容.

---------------------------------------------------------------------------------------

接上一节 底部导航 ,我们这一节主要是完成微信4个主页面的第一个页面“微信”页面,这一节内容比较多,我们分多个跟帖来完成

0 老规矩,先分析一下UI,由三个大部分组成,系统状态栏,工具栏和微信聊天记录列表。

1. 系统状态栏高度,背景黑色,我们注意到微信的首页4个子页面都有这个系统状态栏,这样我们需要做一个整体框架的调整,没有必要为4个子页面都添加一个状态栏,只需要在ViewShower上添加一个就可以,对应的ViewShower和子页面的高度都变成.

对应设计器里index.ui, chats/index.ui, contacts/index.ui, discover/index.ui, me/index.ui 都要作相应的height,y属性值的变化。效果如下:

2. 我们回到chats/index.ui ,先增加工具导航栏(高度)和里面的标题和工具按钮,这个需要增加加号的资源文件,因为这个文件是chats页面专有的,所以存在image/chats/bar_add.png下。我们看看真机效果,我们注意到顶部多出一块黑色区域,这是设计器里的增加的状态栏,因为这个页面是从系统状态栏开始往下绘制的,所以会把设计器里这一部分多出来,

要解决的方法是修改app.js,openPage增加一个statusBarState参数(API文档),设置为transparent表示页面从屏幕最顶端开始绘制。

再来看看真机效果图:

3. 主体部分是一个do_ListView,接下来设置ListView的cell和数据。ListView的cell指列表框的每一行,比如ListView有行数据,实际上可见的屏幕永远只能看到8,9行左右,所以我们手势上下滑动的时候并没有创建行,而是重复使用这8,9行,只不过替换里面的数据而已。我们称之为行模板,在DeviceOne里这种模板也是一个ui文件,比如这里我们在chats子目录下新建一个chat_cell.ui,这个ui基本界面如下:

按照美工的设计尺寸我们来拖拽UI

这里同样需要考虑纯圆变形问题,需要设置好文字大小,前景色等属性,大家可以看到里面有多个do_Label,do_ImageView组件,由于模板ui是靠后期绑定数据的,所以在设计阶段都是空白的。

接下来我们需要设计chat_cell.ui对应的数据,通常为了用户体验,需要尽可能的减少网络交互,页面打开的时候通常先读取本地的数据文件,把界面显示出来,然后再考虑是否要进行网络连接来获取最新数据,所以App开发需要仔细考虑数据的本地化读写和数据的时效性的平衡。DeviceOne的传递数据基本上都是标准的JSON格式。如下图,chat_cell.ui里的组件属性和JSON数据结构对应的关系

对应的映射关系的代码在chat_cell.ui.js如下,我们可以看到映射关系的左边是组件id.组件属性名,右边是数据JSON的key名称:

对应的数据本应该是第一次运行从网络上获取之后再缓存到本地的,我们是模拟,所以先手动生成一个文件到data/chats/chat.json

4. 我们回到chats/index.ui,我们需要给这里ui文件里的listview设置模板,绑定数据。设置index.ui 里的listview的templates属性为 source/default/目录在index.ui.js里添加绑定数据的代码

我们在真机上看看效果

在运行中有几个细节:

* 上下滑动的时候,图片不断的刷新,原因是我们的ImageView的source是网络图片,每次显示的时候都是从网络上获取的,所以这里需要把chat_cell.ui里的ImageView的cacheType属性换成"always" 意思是只从网络上读取一次就会缓存到本地,下一次不会再从网络上读取了。关于cacheType属性参考API文档* ImageView也是圆角的,圆角通常可以使用border属性来设置,但是android只有ImageView不能通过border来设置圆角,ImageView还有一个专有属性radius来设置Android才有效,这个我们以后可以改进

5. 处理右上角的add按钮,点击弹出菜单

先给右上角ImageView的enable属性设置为true,才可以处理点击事件,在chats/index.ui.js里添加代码

其中chat_add_menu.ui 是弹出的菜单对应的ui文件,这个ui文件的根节点大小和chat/index.ui一样,这样确保我点击任何空白处都可以关闭这个菜单(实际上是隐藏这个菜单),我们在这个ui文件里把对应的布局都拖拽好,其中需要添加4个资源png文件。

这里有个小技巧,顶部的三角形标记只能通过一个ImageView加载一个三角形图标来实现。

我们再给chat_add_menu的根节点添加点击事件,点击的时候把自己隐藏,在chat_add_menu.js

最后我们先看看真机效果,点击加号弹出菜单,点击任何地方都把菜单隐藏。

这一节暂时先到这里,我们先开始拖拽后几个主页面,那几个页面基本完成后再重新回到这一个页面来细琢。

原生JavaScript实现异步多文件上传 这是在上篇的修改版本。后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的JavaScript代码,所以我们主要看JS代码。先介绍一下技术

整理Javascript事件响应学习笔记 什么是事件JavaScript创建动态页面。事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数或程序的事件。1、鼠标

纯js代码实现简单计算器 本文实例分享了纯js代码实现简单计算器代码,相信大家会喜欢。具体如下:运行效果截图如下:具体代码如下:!DOCTYPEhtmlhtmlheadtitlenewdocument/titlescripttyp

标签: js如何使用

本文链接地址:https://www.jiuchutong.com/biancheng/387069.html 转载请保留说明!

上一篇:js实现继承的5种方式(js实现继承的几种方式详述(推荐))

下一篇:原生JavaScript实现异步多文件上传(原生js实现ajax步骤)

  • 个税申报显示无有效的税费种认定信息已核定
  • 投标保证金保险怎么买
  • 厂房地面硬化
  • 存货跌价准备在财务报表哪里看
  • 公司不交工会经费的原因,风险说明
  • 天猫收取的佣金开具的技术服务发票会计分录
  • 实收资本印花税税率
  • 什么叫税控盘清卡
  • 公司缴纳个人所得税会计分录
  • 费用的完成率怎么计算
  • 电脑在固定资产中属于哪一类
  • 个税手续费返还会计分录
  • 上年的增值税专票,下年还能抵扣认证吗
  • 开了增值税专用发票对方不付款可以申请冻结对方公帐嘛
  • 工资分两次发的风险是什么?
  • 白蚁防治费怎么计算
  • 研发费用加计扣除政策执行指引
  • 工程款增值税怎么算
  • 不征收增值税项目进项税额可以抵扣吗
  • 公司个人所得税怎么申报
  • 外国人的纳税人识别号是护照号吗
  • 失控发票进项税转出申报怎么填
  • 小企业补贴收入怎么做账
  • 1697511157
  • 商品进销差价主营业务收入
  • 如何阻止windows10升级到11
  • 电脑系统还原步骤
  • 社保多交怎么办理
  • 技术服务费增值税发票怎么开
  • linux系列
  • win11wifi功能消失了
  • PHP:pg_connection_busy()的用法_PostgreSQL函数
  • 笔记本屏幕清洁剂推荐
  • 怎样识别?
  • 自制原始发票
  • php判断数组是否为空的函数
  • 语谱图生成
  • unity ik
  • css3两种调整背景图片大小的方式
  • php弹出提示框
  • 罚款是否需要开证明
  • 帝国cms功能
  • 事业单位收到银行利息如何记账
  • 焊材领用发放管理
  • 织梦网站怎么改logo
  • 数据库管理中负责数据模式定义的数据库语言是
  • 出差发生的旅游事件
  • 货币资金的计税基础
  • 出口企业出口退税流程
  • sqlserver调度
  • 财务费用的科目类别是什么
  • 一次性扣除固定资产出售处理
  • 公司进行债券投资的缺点
  • 研发人员工资计入什么科目
  • 跨年发生退货
  • 公司汽车维修
  • 股权拍卖溢价部分怎么算
  • 软件折旧从什么时候算
  • 累计摊销可以做什么分录
  • 开业建账到年末怎么做账
  • mysql的基础知识
  • 删除表s
  • windows怎么查看
  • macbookzen
  • centos7怎么安装图形化界面
  • centos 6.5安装教程
  • win10周年更新版是什么意思
  • linux apache2配置
  • windows10如何设置windows7开始菜单
  • Python定时器实例代码
  • 编写python代码
  • javascript的for循环
  • android下载文件保存到本地
  • Android开发中的几种管理机制的使用场景是什么
  • 贸易型企业进项发票
  • 河北省国家税务局长简介
  • 从国外进口设备需要缴纳增值税吗
  • 国家税务总局河北地税局
  • 辛嵨静志
  • 税务登录 河北省地方税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设