欢迎来到天天文库
浏览记录
ID:35806572
大小:55.52 KB
页数:30页
时间:2019-04-19
《今日头条app案例开发》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、APP开发实战-新闻客户端目录基于h5+的app开发介绍、hui、mui介绍、项目部署1制作子窗口、数据加载、下拉刷新7新闻分类切换、上拉加载更多14懒加载的使用17新闻详情页面开发18新闻详情页面分享功能21app在线升级25基于h5+的app开发介绍、hui、mui介绍、项目部署基于h5+的app开发介绍传统的app开发一般使用原生语言进行,HTML5plusRuntime,简称5+Runtime,是运行于手机端的强化web引擎,除了支持标准HTML5外,还支持更多扩展的jsapi,使得js的能力不输于原生。5+Runtime内置
2、于HBuilder,在真机运行、打包时自动挂载。业内之前有phonegap/Cordova方案,但是他们自带jsapi太少了,扩展api需要用原生语言开发,更致命的是这类方案的性能不足。最终实现完成app开发且一套代码多端发布。开发工具hbuilder官网:http://dcloud.io/非常推荐的编辑器,完美支持htmljscssphpapp开发。mui最接近原生APP体验的高性能前端框架,使用前端框架的目的:快速开发、更稳定的布局设计。官网:http://dcloud.io/mui.html1hui由hcoder发布的前端ui框
3、架,与mui显著的区别是dom操作。官网:http://www.hcoder.net/hui创建项目1、不使用任何框架使用hbulider直接创建移动app项目,选择模板时选择空模板。2、使用mui使用hbulider直接创建移动app项目,选择模板时选择mui项目(自动生成mui最新的cssjs入口文件)。3、使用hui使用hbulider直接创建移动app项目,选择模板时选择空模板(下载hui框架包,复制进项目即可)。真机调试usb连接手机,点击编辑上的在手机设备下运行即可,安卓效果更好。app开发中窗口的概念使用h5+开发app
4、原理是创建一个窗口内部包含一个html,然后调用原生接口完成更多功能。缺点也就是html并不是原生在进行浏览器渲染时白屏卡顿在低端机上会比较明显,但随着手机的更新换代这样的问题已经越来越不明显。通过我们开发者的努力可以把效果做到接近原生。app开发的一个重要概念就是窗口,所以不要使用ahref=""去打开新页面,而是创建一个新窗口。2不使用任何框架制作项头部1、注意meta声明:5、no"/>2、css格式化dom*{margin:0px;padding:0px;font-size:15px;color:#000000;outline:none;}body{background:#FFFFFF;}div{overflow:hidden;}a{text-decoration:none;color:#000000;}a:hover{text-decoration:underline;}img{border:none;}3、头部代码编写导入hui下载hui最新版本http://www.hcoder.net/hui解压后6、导入进项目。制作头部导航及内部元素1、一键改变ui的整体颜色:打开hui.css搜索#3283FA替换为#D43D3D并保存立即可以看到效果。2、完成头部布局dom部分37、f="css/hui.css"/>
5、no"/>2、css格式化dom*{margin:0px;padding:0px;font-size:15px;color:#000000;outline:none;}body{background:#FFFFFF;}div{overflow:hidden;}a{text-decoration:none;color:#000000;}a:hover{text-decoration:underline;}img{border:none;}3、头部代码编写导入hui下载hui最新版本http://www.hcoder.net/hui解压后
6、导入进项目。制作头部导航及内部元素1、一键改变ui的整体颜色:打开hui.css搜索#3283FA替换为#D43D3D并保存立即可以看到效果。2、完成头部布局dom部分3
7、f="css/hui.css"/>
8、src="js/hui.js">css增加4#topSearch{width:60%;height:30px;background:#F6F5F4;border-radius
此文档下载收益归作者所有