基于cordova开发的基本事项和常用总结

说明:本规范只针对电力信息来制定的开发规范,其他用户可作参考

1.  基本规范

符合web标准, 语义化html, 结构、表现、行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

2. 文件规范

html, css, js, image文件均放在约定的目录中,基本目录结构如2.1图,并且目录与文件名中不能包含中文。其中style放css文件,plugins放平台的cordova插件,index.html为应用的首页面,icon.png为应用的图标。(cordova.js和cordova_plugins.js为与平台交互的js文件,必须放在根目录下

图2.1

3. 书写规范

3.1. html 规范

1. 文档类型声明及编码: 统一声明为html5,meta属性让网页宽度默认等于屏幕宽度,原始缩放比例为1.0,即100%显示。编码统一为utf-8, 书写时利用IDE实现层次分明的缩进

2. css和js文件外链尽量放置在至<head>...</head>之间

3.移动端需要在title上面加上meta,设置width=device-width, initial-scale=1, user-scalable=no 等比例窗口代码。

例子:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

    <title>首页</title>

<meta charset="utf-8" />

</head>

<body>

这里是内容

</body>

</html>

  

3.2. 引用css和js

由于国网使用的是crodova,为了使各个手机系统使用同一套代码,所以,在建立移动APPWeb项目的时候,必须先引用cordova.js,而后再引用你的其他js和css。

(友情说明:cordova_plugins.js 不需要引用,需放在跟目录,再调用cordova.js,会自动去读取配置,所以大家不必去在意cordova_plugins.js。)

3.3. 常用插件

3.3.1. 登录插件

mam.navigator.loadconfig.getUserInfo(1,function login(v) {

             //getUserInfo 如果是苹果,则不需要参数1 ,直接新版本

中,不需要参数,直接一个回调函数即可。mam.navigator.loadconfig.getUserInfo(callback)

                });

  

3.3.2. 获取数据插件

获取数据分为get,post,getJSON,postJSON插件,推荐使用postJSON

mam.navigator.ajax.postJSON(appcode,params,appservercode, successCallbac);

 /**

        参数说明:

  appcode:应用部署的环境地址(例如”DLSH”对应:http://pubtest.js.sgcc.com.cn)

   params: 要发送给服务器的数据,以 Key/value 的键值对形式表示。如果不需要传参数,传递””即可。

 appservercode:具体的接口资源(例如”API”对应:/dlsh_web/ajax/api.do)

  successCallback:成功回调

        **/

3.3.3. 返回与退出应用插件

一般来说,每个应用都有返回至上一页或者至指定的页面,也可以直接退出当前应用,而这个js是每个应用都用到的,下面的代码示例可应用到所有的移动h5页面中。

代码示例:

var devicePlatform;//获取当前的设备

function onDeviceReady() {

    devicePlatform = device.platform;

    if ("iOS"== devicePlatform) {

        mam.navigator.appmenu.setBackButton(null, null, "1");//这里是设置苹果手机的返回按钮

    }

    document.addEventListener(‘backbutton‘, hback);

}

function hback() {

    if ("iOS" == devicePlatform) {

        mam.navigator.appmenu.setBackButton(null, null, "0");

    }

    document.removeEventListener(‘backbutton‘, hback);

   //第一种:直接退出

    mam.navigator.appmenu.exitApp();

//第二种:直接跳转到相对应的页面

window.location.href = "../index.html";

//第三种:直接跳转至上一页

History.back(-1);

}

注释:还有其他各种插件未讲解的,请参考移动交互动平台JavaScript接口设计文档

4. IOS和安卓常见问题总结


报错信息


报错例子


解决方法


andriod可以访问页面
苹果访问不了


Index.html

安卓和苹果都是是写index.html


苹果区分大小写,所以,必须要
么全部小写,要么全部大写,要
么按照定义的格式来抒写。


访问不了插件(未获取到插件方
法)


苹果,安卓都不可以


1:看cordova.js和public.js是否引用
2:看plugins文件夹下是否有这个插件
3:看引用的路径是否有错


安卓可以显示折线图,苹果不显示


测试时间写死了。写成这样:
var t_time = new Date("2015-10-1");
安卓可以访问,苹果报invalid time


如果是测试的时候,时间格式有5种,严格按照时间格式来,才可避免

苹果不显示数据的问题
1)new Date("month dd,yyyy hh:mm:ss");
2)new Date("month dd,yyyy");
3)new Date(yyyy,mth,dd,hh,mm,ss);
4)new Date(yyyy,mth,dd);
5)new Date(ms);
month:用英文 表示月份名称,从January到December

mth:用整数表示月份,从(1月)到11(12月)

dd:表示一个 月中的第几天,从1到31

yyyy:四位数表示的年份

hh:小时数,从0(午夜)到23(晚11点)

mm: 分钟数,从0到59的整数

ss:秒数,从0到59的整数

ms:毫秒数,为大于等于0的整数
new Date("January 12,2006 22:19:35");

new Date("January 12,2006");

new Date(2006,0,12,22,19,35);

new Date(2006,0,12);

new Date(1137075575000);

或者使用public.js里面的formatDate()方法。


后台传的Json字符串,前台使用Json.Parse
转了,安卓是好的,苹果显示不了数据
(注意:若后台传的json字符串,前台不识别的情况下)


Json.Parse(v),安卓可进入,苹果不行


本平台不支持Json.Parse,解决方法:eval("("+v+")") ,最新版本已经支持,如果使用旧版本cordova,请使用eval(虽然eval特么的很浪费内存,但是你也只能使用这个)


苹果手机弹出未加载插件


把cordova.js和cordova_plugins.js 放在
指定的js文件夹中,安卓都可以加载出来,
苹果弹出框(未加载信息)


把cordova.js和cordova_plugins.js 放在根目录就可以了
(注意:这个两个Js文件,务必放在根目录下)


苹果不加载下拉框信息


$("下拉框").attr("selected",true);
安卓手机支持,苹果不支持


写成$("下拉框").prop("selected",true);

4.1. 应用发布

应用发布时应当填写相应的表格,见《业务应用发布操作说明_模板.xlsx》,如果需要绑定应用账号,则必须填写正确的账号认证地址,具体的,可以找平台组姚飞索要模板。

时间: 2024-10-28 22:50:26

基于cordova开发的基本事项和常用总结的相关文章

基于jquery开发的UI框架整理分析

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

WAP 2.0开发XHTML MP语法及常用功能

XHTML Mobile Profile 的基本结构 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"         "http://www.wapforum.org/DTD/xhtml-mobile10.dtd" > <html xmlns=&

搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成HybridAPP,并且它提供了非常多的插件,方便我们使用原生APP的功能. Ionic是一个界面样式库,仿照原生的ios和android界面:同时它是基于AngularJs的. 本文我们在win7中搭建 AngularJS+Ionic+Cordova 开发环境,包括所涉及的Node.js.Cordova CL

搭建Cordova开发环境

Cordova是什么 Apache Cordova是一套设备API,允许移动应用的开发者使用JavaScript来访问本地设备的功能,比如摄像头.加速计.它可以与UI框架(如jQuery Mobile.angularjs或Sencha Touch)等相结合使用,这些UI框架可以使用HTML.CSS和JavaScript开发智能手机应用. 通过Cordova开发的应用,可以编译为android和ios版本的应用. 本文介绍Cordova+ionic+angularjs开发环境搭建 ionic是什么

基于.net开发chrome核心浏览器【一】

原文:基于.net开发chrome核心浏览器[一] 说明: 这是本系列的第一篇文章,我会尽快发后续的文章. 源起 1.加快葬送IE6浏览器的进程 世界上使用IE6浏览器最多的地方在中国 中国使用IE6浏览器最多的地方在企业中 让他们自己去装个chorme太难了 索性开发个浏览器(其实是浏览器的外壳)给他们 用"代码改变世界"是博客园园友的口号 2.一劳永逸的解决浏览器兼容问题 各种浏览器的CSS hack问题再也不用担心了 甚至公司里前端的职位也可以减少几个了 3.更方便的使用更强大的

一些基于jQuery开发的控件

基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html (无法找到)下载:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html 示例:http://letmehaveblog.blogspot.com/2007

【Android】深入掌握自定义LayoutManager(一) 系列开篇 常见误区、问题、注意事项,常用API。

转载请标明出处: http://blog.csdn.net/zxt0601/article/details/52948009 本文出自:[张旭童的博客] 本系列文章相关代码传送门: 自定义LayoutManager实现的流式布局 欢迎star,pr,issue. 本系列文章目录: 深入掌握自定义LayoutManager(一) 系列开篇 常见误区.问题.注意事项,常用API. 深入掌握自定义LayoutManager(二) 实现流式布局(creating) 概述 这篇文章是深入掌握自定义Layo

基于.net开发chrome核心浏览器【二】

原文:基于.net开发chrome核心浏览器[二] 一: 上一篇的链接: 基于.net开发chrome核心浏览器[一] 二: 相关资源介绍: chrome Frame: 让IE有一颗chrome的心,看起来不错,但我没有深入研究这个东西. http://www.google.com/chromeframe?hl=zh-CN&quickenable=true https://developers.google.com/chrome/chrome-frame/ WebKit.Net 已经有一段时间没

基于 Quartz 开发企业级任务调度应用--转

Quartz 基本概念及原理 Quartz Scheduler 开源框架 Quartz 是 OpenSymphony 开源组织在任务调度领域的一个开源项目,完全基于 Java 实现.该项目于 2009 年被 Terracotta 收购,目前是 Terracotta 旗下的一个项目.读者可以到 http://www.quartz-scheduler.org/站点下载 Quartz 的发布版本及其源代码.笔者在产品开发中使用的是版本 1.8.4,因此本文内容基于该版本.本文不仅介绍如何应用 Quar