A P P开发实战-新闻客户端
目录
基于h5+的app 开发介绍、hui、mui介绍、项目部署
基于h5+的app 开发介绍
传统的app开发一般使用原生语言进行，HTML5plus Runtime，简称5+ Runtime，是运行于手机端的强化web引擎，除了支持标准HTML5外，还支持更多扩展的j s api，使得js的能力不输于原生。

5+ Runtime内置于HBuilder，在真机运行、打包时自动挂载。

业内之前有phonegap/Cordova方案，但是他们自带js api太少了，扩展api
需要用原生语言开发，更致命的是这类方案的性能不足。

最终实现
完成app开发且一套代码多端发布。

开发工具 hbuilder
官网：
非常推荐的编辑器，完美支持 html js css php app开发。

mui
最接近原生APP体验的高性能前端框架，使用前端框架的目的：快速开发、更稳定的布局设计。

官网 :
hui
由hcoder发布的前端ui框架，与mui显着的区别是dom操作。

官网 :
创建项目
1、不使用任何框架
使用hbulider直接创建移动app项目，选择模板时选择空模板。

2、使用mui
使用hbulider直接创建移动app项目，选择模板时选择mui项目（自动生成mu i最新的css js 入口文件）。

3、使用hui
使用hbulider直接创建移动app项目，选择模板时选择空模板（下载hui框架包，复制进项目即可）。

真机调试
usb连接手机，点击编辑上的在手机设备下运行即可，安卓效果更好。

app开发中窗口的概念
使用h5+开发app原理是创建一个窗口内部包含一个html，然后调用原生接口完成更多功能。

缺点也就是html并不是原生在进行浏览器渲染时白屏卡顿在低端机上会比较明显，但随着手机的更新换代这样的问题已经越来越不明显。

通过我们开发者的努力可以把效果做到接近原生。

app开发的一个重要概念就是窗口，所以不要使用a href="" 去打开新页面，而是创建一个新窗口。

不使用任何框架制作项头部
1、注意meta声明: <meta name="viewport" content="initial-scale=, maxi mum-scale=, user-scalable=no" />
2、css 格式化dom
3、头部代码编写
导入hui
下载hui最新版本解压后导入进项目。

制作头部导航及内部元素
1、一键改变ui的整体颜色 : 打开搜索 #3283FA 替换为 #D43D3D 并保存立即可以看到效果。

2、完成头部布局
dom部分
css 增加
制作分类导航dom 及 js
使用了hui的横向滚动、使用hui选择器进行连贯操作完成点击效果、css 部分
制作子窗口、数据加载、下拉刷新
为了实现app的上拉刷新和下拉加载我们需要在入口页面嵌入子窗口。

相关知识：webview，参考手册：
实现步骤：
1、创建子窗口
2、在入口页嵌入子窗口（会使用 plusReady事件）
3、将子页面的返回功能转交给入口页
入口页代码
子窗口代码
HOA介绍
开放源地址 : 项目实现过程
入口页js变化
新闻分类切换、上拉加载更多本节内容
1、点击新闻分类切换不同的新闻列表。

2、上拉加载更多
核心js
懒加载的使用
使用HUI来实现图片的懒加载是非常方便的，您只需要设置图片的预加载占位图及实际地址：
新闻详情页面分享功能新闻详情页面分享功能实现步骤
1、配置增加分享模块
分享服务对象格式
2、页面代码
app 在线升级
app 在线升级原理
在app内部设置版本号，在远程服务器端设置最新版本号，如果2个版本号不等则提示升级。

安装app函数
完整代码。