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中打包出来的大小是本地打包出来的好几倍大