移动WebApp开发记录

2011年12月2日 没有评论

这段时间在做移动WebApp开发，基于PhoneGap+Jquery Mobile，遇到不少问题，下面进行部分总结。

1.webStorage有大小限制(5M)，Chrome出现”QUOTA_EXCEEDED_ERR: DOM Exception 22″错误，极有可能因为webStorage缓存的问题。

2.localStorage只能存字符串，不能存对象。

3.Jquery的Html(str)函数会将str里的内容进行过滤，遇到显示有问题，可使用(“.show”)[0].innerHTML=str代替。

4.对于xml字符串，如果用jquery操作，需转换为xml对象，$.parseXML(source)。对于从接口返回的xml，Jquery可以设置指定返回xml对象。

5.Jquery Mobile在不同的页面切换，Android有明显的卡顿及闪屏感觉。$.mobile.showPageLoadingMsg()不生效。
A1.Android有明显的卡顿及闪屏感觉，据说是因为其对CSS3支持不好。
A2.Jquery Mobile在不同的页面切换，需要Loading效果的可以试下以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function w2mTransitionHandler( name, reverse, $to, $from ) {
    $(".ui-loader").css({"display": "block", "top": "252px !important" });
    var deferred = new $.Deferred(),
    reverseClass = reverse ? " reverse" : "",
    viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
    doneFunc = function() {

        $to.add( $from ).removeClass( "out in reverse " + name );

        if ( $from && $from[ 0 ] !== $to[ 0 ] ) {
            $from.removeClass( $.mobile.activePageClass );
        }
       
        $to.parent().removeClass( viewportClass );
        $(".ui-loader").css({ "display": "none" });
        deferred.resolve( name, reverse, $to, $from );
    };

    $to.animationComplete( doneFunc );

    $to.parent().addClass( viewportClass );

    if ( $from ) {
        $from.addClass( name + " out" + reverseClass );
    }
    $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );

    return deferred.promise();
}
$.mobile.defaultTransitionHandler = w2mTransitionHandler;

A3.$.mobile.showPageLoadingMsg()有时会不生效，考虑以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(":button").click(function(){   
    //position:fixed;top: 252px !important; display: block;
    $(".ui-loader").css({"top": "252 !important","position":"fixed"});
    $(".ui-loader").show("normal", function () {
        var list = new ListData(channelid, num, channelname);
        list.getData();
        if(list.list.length==0)
        {
            alert("已是最后一页");
        }
        else
        {
            list.showData();
            num++;
        }
        $(".ui-loader").hide("normal");
    });
})
分类: 技术研究 标签: ,

悟透JavaScript笔记

2011年11月8日 没有评论

原生闭包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function Person(firstName, lastName, age)
{
    //私有变量：
    var _firstName = firstName;
    var _lastName = lastName;

    //公共变量:
    this.age = age;

    //方法：
    this.getName = function()
    {
        return(firstName + " " + lastName);
    };
    this.SayHello = function()
    {
        alert("Hello, I'm " + firstName + " " + lastName);
    };
};

var BillGates = new Person("Bill", "Gates", 53);
var SteveJobs = new Person("Steve", "Jobs", 53);

BillGates.SayHello();
SteveJobs.SayHello();
alert(BillGates.getName() + " " + BillGates.age);
alert(BillGates.firstName);     //这里不能访问到私有变量

阅读全文…

分类: Web前端 标签:

HTML5笔记(5)-地理定位

2011年11月3日 没有评论

地理定位（Geolocation）是一个可以获取到客户端经纬度等地理位置信息的API。
API本身是不知道客户端地理信息的，常见的地理位置信息来源有全球定位系统(GPS)和从网络信号中推断出的地理信息（如IP地址, RFID, WIFI, 蓝牙MAC地址, GSM/CDMA手机id,以及用户输入的信息 ）
阅读全文…

分类: Web前端 标签:

HTML5笔记(4)-离线应用

2011年11月3日 没有评论

为了能够让用户在离线状态下继续访问 Web 应用，需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，把这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5 中，通过 cache manifest 文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。

开发者需要提供一个 cache manifest 文件。这个文件中列出了所有需要在离线状态下使用的资源，浏览器会把这些资源缓存到本地。 阅读全文…

分类: Web前端 标签:

HTML5笔记(3)-本地数据库

2011年11月3日 没有评论

有了本地数据库，我们可以进行更复杂的本地数据处理。本地数据库使用的是SQLite这款轻型数据库。
操作数据库简单的两个步骤：
1.创建并打开数据库；
2.执行sql语句

创建并打开数据库

1
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

上面的openDatabase我用了4个参数，依次为：
数据库名称
数据库版本号
数据库说明
数据库大小
未使用的第五个参数是：
创建数据库回调函数（在数据库创建后会执行回调函数，回调函数是可选的。）

执行sql语句

1
2
3
4
5
6
7
8
var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024);

db.TRANSACTION(FUNCTION (tx) {  
    //创建TABLE foo  
    tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
    //插入数据到foo  
    tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');
});

插入数据时还可以传递动态值：

1
tx.executeSql('INSERT INTO foo (id, text) VALUES (?, ?)', [id, userValue]);

嗯，我想我需要去学习SQLite的SQL语法了。

点此查看完整示例

分类: Web前端 标签:

HTML5笔记(2)-web本地存储

2011年11月3日 没有评论

Web Storage就是放大版的cookie——提供了比cookie更大的本地存储，并且不会向服务器发出请求，并提供了一些API。总之本地存储能更专业地处理本地数据。
可以像对象字面量那样使用Web Storage：

1
2
3
localStorage.fresh = "vfresh.org"; //设置一个键值
var a = localStorage.fresh; //获取键值
delete localStorage['fresh'] //删除键值

或者使用它的API：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//清空storage
localStorage.clear();

//设置一个键值
localStorage.setItem("fresh","vfresh.org");

//获取一个键值
localStorage.getItem("fresh");

//return "vfresh.org"
//获取指定下标的键的名称（如同Array）
localStorage.key(0);

//return "fresh"
//删除一个键值
localStorage.removeItem("fresh");

字面量方式比API更高效，也更方便，所以你懂的。
localStorage是永久性的保存，而sessionStorage在浏览器窗口关闭后就没有了（相当于Expire=0的cookie）。
支持浏览器：IE 8+, Firefox 3.0+, Safari 4.0+, Chrome 4.0+, Opera 10.5+
点此查看简单示例

分类: Web前端 标签:

HTML5笔记(1)-新的选择器

2011年11月3日 没有评论

● 根据类名匹配元素（DOM API），返回匹配到的元素数组，无匹配则返回空的数组。

1
var els = document.getElementsByClassName('section');

支持浏览器：IE9, FireFox 3.0+, Safari 3.2+, Chrome 4.0+, Opera 10.1+

 
● 根据css选择器匹配元素（Selectors API）：querySelector 和 querySelectorAll。
querySelector返回匹配到的第一个元素，如果没有匹配则返回null

1
2
var els = document.querySelector("ul li:nth-child(odd)");
var els = document.querySelector("table.test > tr > td");

querySelectorAll返回所有匹配到的元素数组，如果没有匹配则返回空的数组

1
2
var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");

支持浏览器：IE 8+, FireFox 3.5+, Safari 3.2+, Chrome 4.0+, Opera 10.1+

 
选择器效率测试见：http://jsperf.com/queryselectorall2
Opera的Selectors API明显经过优化，其余浏览器的getElementById效率是最高的。
Selectors API遵循CSS选择器效率规则

分类: Web前端 标签:

parseSdkContent Failed错误

2011年11月3日 没有评论

昨天机器突然蓝屏重启，再开Eclipse就出现错误“parseSdkContent failed”，Android的模拟器启动不了。尝试了不少方法，终于搞掂。

1.删除文件夹 C:\Documents and Settings\covics\.android  网上一般就只有这一步，为的是删除AVD的镜像文件，但是我删除后却依然不行。

2.重装Eclipse，因为是绿色版，所以就是删除原来的Eclipse文件夹后，再解压一个完全未配置的Eclipse就行了。然后再重新安装ADT及Android SDK（重新在Eclipse配置下路径就可以）。这一步我做了，但是貌似不是必需的，可以略过。

3.删除工作目录下的的.metadata文件夹   D:\Android\workspace\.metadata

重启Eclipse后即可正常。

分类: Android 标签:

给Eclipse_Android添加智能提示功能

2011年11月1日 没有评论

由于工作需要，开始学习Andorid开发，Eclipse的提示习惯与VS不同，需要输多不少代码才有提示出来，于是上网搜索解决方法。

1.按Alt + /即可智能提示。

2.Eclipse for android 设置代码提示功能
(1)设置 java 文件的代码提示功能
打开 Eclipse 依次选择 Window > Preferences > Java > Editor – Content Assist > Auto activation triggers for Java ，设置框中默认是一个点，现在将它改为：

1
.abcdefghijklmnopqrstuvwxyz(,

(2)设置 xml 文件的代码提示功能
打开 Eclipse 依次选择 Window > Preferences > Xml > Editor > Content Assist > Auto activation > Prompt when these characters are inserted ，设置框中默认是 <=: ，现在将它改为：

1
< =:.abcdefghijklmnopqrstuvwxyz(,

分类: Android 标签: ,

更换域名

2011年10月28日 没有评论

    这两天，因为VPS更换机房的原因，导致域名的A记录需要修改，却引起一些麻烦。

    以前贪图便宜，在国内的一些代理商购买了一个域名(madcn.net)，也用了比较久了，但是现在域名还有半年才到期，却已无法管理了，亦不可以转出，联系客服，也是不再搭理，这里点名批评：ipx.com.cn。已经沦为骗子公司了。

    原域名(madcn.net)无法管理，那只好放弃更换新的域名了。国内购买的域名诸多限制，又不保险，于是决定转向国外。

    在godaddy.com购买了一个新的域名(qwolf.com)，价钱不贵，而且还支持支付宝，最重要的是，域名的控制权在自己手里，服务商的实力也有保障。

    当进行A记录指向时，杯具了，被万能的墙给阻挡了，fuck，在天朝，控制无所不在。

    再次折腾，域名DNS改用dnspod.com，虽然感觉上速度慢了一点，但是总于可以访问了。

    以后就用新域名了(qwolf.com)，原域名(madcn.net)不再使用。

分类: 生活随想 标签: