cordova方方面

最近用cordova + jQuery Mobile 做了一个小应用，总结一下。

官网

Cordova : http://cordova.apache.org/

jQuery Mobile : http://jquerymobile.com/

网上资料：http://rensanning.iteye.com/blog/2163892

技术

以cordova框架为基础，使用cordova plugin完成设备特有功能，用JS实现功能逻辑，用Html和css做漂亮的界面（不止jQuery Mobile，还有很多其他的框架可以用）

为什么用Cordova，因为跨平台，开源，而且对于前端工程师来说成本也低。

cordova简单原理：用前端技术写app界面、功能，原生应用提供webview展示这些界面功能。

cordova都做了什么：提供了原生应用的壳包括webview，负责将html css js文件复制到对应的壳中，负责将插件复制到对应的壳中，负责在应用启动时加载指定的页面，负责插件的加载，负责JS和原生应用通信。

cordova怎么实现的我没有看，我只是学会用，学会写简单的插件。

cordova注意点：

1. platforms、plugins下的代码都不要改，这个是cordova下载或者自己创建的，platforms下是各平台的源代码，编译时用覆盖，plugins下是使用的插件的源代码，当然等你熟悉了之后，在一些特殊情况下，你也可以修改，而真正开发的前端代码放在www下。

2. 在JS中，cordova提供了一些事件，比如返回键，菜单键等可以注册相应的事件覆盖默认操作

3. 想下载文件？ cordova提供了file-transfer插件可以下载文件，当然还有很多实用插件可以用尤其是官方的那几个。

4. 用html如何解决适配问题， 手机屏幕千差万别？但是我发现，不管多大分辨率的屏幕，它只使用mdpi对应的分辨率，它会认为手机宽度只有360px或者320px。

在熟悉了cordova之后，主要工作还是开发页面。

由于之前没有前端开发经验，所以很多东西还是摸索着来的。

1. 为什么用jQuery Mobile?

这个只是一个尝试，前端框架各有各的优点，当时觉得它功能比较好理解。

它的特点：

a. dom操作非常方便，因为它基于jQuery

b. 默认就是SPA设计，在移动端，页面切换比较耗费性能，所以大部分都是单页面设计

c. 它对很多页面元素添加了样式（增强），使其像移动控件，同时还能自适应屏幕变化

d. 同时它还增添了很多控件，详细见它的demo

注意点：

1. 如果要覆盖jQuery Mobile的默认样式，css规则的具体度要高。

2. 如果添加或者删除了dom元素，需要调用trigger("create")或者listview("refresh")来添加jQuery Mobile的样式

3. chechbox的状态刷新，需要调用checkboxradio("refresh")

4. 页面初始化逻辑最好写在pageinit事件中，不要用ready事件

5. checkbox单独用的时候，怎么才能不让它占满整行呢？比如登录页面的记住密码，使用float属性让它漂在右侧

6. checkbox不能注册tap事件，只能用click，至少我用tap无效

7. 虽然我们可以通过 “把js引用的语句放在data-role=page的div里面”这种方法，来达到“加载这个页面一次执行一次js中的代码”的目的，

但是像注册返回键事件这样的语句也会执行多次，从而按一次返回键，重复执行多次响应函数，所以还是把js在首页全部加载了吧。

8. jQuery的样式增强经常会在dom层次中添加一些div，所以不要以为你写的结构就是最终结构，在写css选择器时注意，在使用“>”这样的选择器更要注意

9. 有一些其它的jQuery样式可以使用：http://caibaojian.com/10-best-free-jquery-mobile-theme.html ，我比较喜欢Flat UI theme

10.  有时候ui-icon-carat-r 需要和ui-btn-icon-right一起使用才会有效。

11.  SPA设计导致JS中的全局变量都在一个命名空间，所以不要随便定义变量。