1、 创建项目1、不使用任何框架使用hbulider直接创建移动app项目,选择模板时选择空模板。2、使用mui使用hbulider直接创建移动app项目,选择模板时选择mui项目(自动生成mui最新的css js 入口文件)。3、使用hui使用hbulider直接创建移动app项目,选择模板时选择空模板(下载hui框架包,复制进项目即可)。真机调试usb连接手机,点击编辑上的在手机设备下运行即可,安卓效果更好。app开发中窗口的概念使用h5+开发app原理是创建一个窗口内部包含一个html,然后调用原生接口完成更多功能。缺点也就是html并不是原生在进行浏览器渲染时白屏 卡顿在低端机上会比较明显
2、,但随着手机的更新换代这样的问题已经越来越不明显。通过我们开发者的努力可以把效果做到接近原生。app开发的一个重要概念就是窗口,所以不要使用a href= 去打开新页面,而是创建一个新窗口。不使用任何框架制作项头部1、注意meta声明: 2、css 格式化dom*margin:0px; padding: font-size:15px; color:#000000; outline:none;bodybackground:#FFFFFF;divoverflow:hidden;atext-decoration:a:hovertext-decoration:underline;imgborder:3
3、、头部代码编写导入hui下载hui最新版本 解压后导入进项目。制作头部导航及内部元素1、一键改变ui的整体颜色 : 打开hui.css 搜索 #3283FA 替换为 #D43D3D 并保存立即可以看到效果。2、完成头部布局dom部分htmlheadmeta charset=utf-8title/titlelink type=text/css rel=stylesheet href=css/hui.css/headbodydiv id=HUI_Headerdiv class=HUI_FLimg src=img/logo.png width=100/divtopSearchspan class=H
4、UI_Icons HUI_Icons_search style=color:#999999;/span 搜您想搜的/body/htmlcss 增加#topSearchwidth:60%; height:30px; background:#F6F5F4; border-radius:3px; float:right; margin:7px 8px 0px 0px; line-height: text-align:left; text-indent:14px;制作分类导航dom 及 js id=topCatediva href=javascript:changeCate(0); class=top
5、CateSed推荐changeCate(1);热点changeCate(2);视频changeCate(3);本地changeCate(4);社会changeCate(5);娱乐changeCate(6);问答changeCate(7);汽车changeCate(8);体育hui(#topCate).scrollX(8,a);/完善点击效果function changeCate(cateId) hui().find().removeClass(topCateSed).eq(cateId).addClass(使用了hui的横向滚动、使用hui选择器进行连贯操作完成点击效果、css 部分#topC
6、ateheight:40px; border-bottom:1px solid #E8E8E8; width:100%;#topCate adisplay:block;15%;center;.topCateSedcolor:#D43D3D;17px !important;制作子窗口、数据加载、下拉刷新为了实现app的上拉刷新和下拉加载我们需要在入口页面嵌入子窗口。相关知识:webview,参考手册:http:/www.html5plus.org/doc/zh_cn/webview.html实现步骤:1、创建子窗口 indexSub.html2、在入口页嵌入子窗口 (会使用 plusReady事件)3、将子页面的返回功能转交给入口页入口页代码hui.plusReady(function() var subView = hui.create(indexSub.html, top:87px, bottom:0px); /此处注意设置 bottom var self = plus.webview.currentWebview(); self.append(subView);子窗口代码meta charset
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1