html移动应用开发技术分享

html移动应用开发已上架appstore和安卓各大市场

本地android项目创建

在本地生成android项目需要安装android sdk 使用phonegap run android命令的时候会检测sdk

生成的platforms下的android项目直接导入 android开发工具中就可以注意修改project文件里面的target=android-17 和自己的开发环境匹配

修改成自己的项目

1、默认生成的是com.phonegap ....helloword 类 代码很简单就一个入口 ， 修改成自己想要的包名和类型 同样需要把AndroidManifest?.xml里面对应的包路径和类名称修改掉

2、 AndroidManifest?里面的标签下activity 添加android:screenOrientation="portrait" 标示只显示竖屏

3、android项目下的res资源目录是为android打包用的里面需要自己添加自己的图标 ， 修改xml目录下的config.xml

<access origin="*"/> 默认生成的是127.1.0.1/* 这个时候是禁止网络链接的 http请求被禁掉了 改成*号就可以了

<preference name="loadUrlTimeoutValue" value="60000" /> 添加初始化加载的时候比较慢 延时报错

应用的首页尽量简单：最好不要有http有请求 http请求老是超时之后自己还要重连2次 可能造成加载慢

4、values目录下的strings.xml 可以修改应用的名称 -- 对应着打包出来的apk 各市场读出来的名称

5、统计：咱们用的是友盟的统计 友盟文档很清楚自己加就可以了 方便综合统计自己的app下载量 网址：http://dev.umeng.com/

6、使用友盟的自动更新

框架选择

assets/目录下的就是我们的html源代码：

框架选择：http://app-framework-software.intel.com/index.php 开始使用的 appframework框架 详情见：http://gemantic.iteye.com/blog/1985621

juerymobi框架做些 内容简单 列表不复杂的应用 ， 开发效率高 自带几种不同风格的样式，可以很快创建出不错的应用。但是做带有复杂的带图表列表

的应用，滚动条滚动不流畅，数据量越大滚动效果越不好

为了解决滚动的问题：使用了iscroll框架处理滚动 + appframework.js（底层是和ui分开的,这里我们只使用底层的js就是简化版的juery mobile功能）处理交互 http://cubiq.org/iscroll-4

1、iscroll 滚动效果不错 ， 带有下拉、上拉刷新的功能

2、iscroll 存在兼容问题 ， 在三星手机上滚动条滚动失效，useTransition: false 禁用滚动动画之后 效果还可以接受

3、iscroll 在iphone上的效果比android上的效果好

使用方法 ： http://hi.baidu.com/alimyself/item/5844d68a8e92fc57840fab8a 常见问题 ： http://blog.chinaunix.net/uid-25820084-id-3524194.html

cordova插件使用

http://www.oschina.net/news/42430/phonegap-3-0-released 插件介绍

获取本地相册、判断网络连接等等都需要额外的插件

下载安装 git 客户端 打开Git Bash窗口 通过命令定位到自己的项目 执行相应的命令 就可以把插件下载下来

详情参照：http://docs.phonegap.com/en/3.1.0/index.html 下载自己需要功能的插件 参照文档进行配置即可

咱们项目目前没有用到插件; 引入cordova.js的功能是处理android系统键返回和到主页后退出应用 如果用不到可以不引入js

document.addEventListener("backbutton", onBackKeyDown, false); 侦听系统返回键处理后退

navigator.app.exitApp();退出app应用

开发html网页常见处理

1、 window.localStorage 处理本地缓存 键值和value 默认会把赋值的value 转化成字符串 ，不支持数组 等复杂数据类型

使用详解：http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html

2、处理交互尽量使用 touchstart 事件 而不要用网页原本的 click事件 click触发有点迟钝 android上表现比较明显 反应不灵敏

3、 window.screen.height和window.screen.width可以拿到屏幕的宽高 处理不同屏幕大小的时候显示内容多少

4、网页之间的跳转直接使用window.location="xx.html" ，本地相对路径 有参数传递直接同网页开发拼接链接就行

5、解析当前网页链接包含的参数的时候 需要用decodeURI（url）转一下 否则参数中含有的中文会解析成乱码

6、$.ajax({}）数据请求中 参数async：设为true表示异步 false同步的时候屏幕会锁死 用户体验会很差

7、iscroll 控制两部分内容显示隐藏的时候 切换需要调用下myScroll.scrollTo(0,0); 否则会停留在上个页面的滚动位置

8、iphone手机反应比较灵敏 用taouchstart处理后退会造成连续响应后退 单独改成了click触发

phonegap build打包

地址：http://build.phonegap.com/

创建账号 每个免费账号只能上传一个项目 可以重复上传

配置 html目录里面的res和config.xml:

1、res 里面需要配置每个市场的icon和启动页面

2、config 里面配置包名、类名、版本号 app名称含有中文的时候 需要头部加成<?xml version='1.0' encoding='gb2312'?> 否则上传提示xml格式错误

3、<access origin="*" />修改了 配置全屏 横屏显示的都修改了就可以了

将www文件夹 压缩成zip包 上传就可以了

ios应用打包需要上传 证书 p12文件和mobileprovision文件才可以打包

android应用最好不要用线上打包 res目录下的图片都包含在app中 打包出来的大小是 本地打包出来的好几倍大