手机WEB Widget（WRT）开发学习笔记（更新至提交手机GPS数据到服务器）

一、WEB Widget是什么东东

简单的理解就是做一个手机屏幕大小的网页，里面包含xhtml、javascript、css、图片等元素，打包成一种文件后可以放到手机里面运行，也就是说，目前的一些前端技术都基本可以拿来开发web Widget，如ajax，jquery……。目前我知道symbian S60V3和S60V5是可以运行这个东东的。
研究这个东西出发点是想在自己的手机上实现这样的一个小程序：1、获取当前GPS信息然后将其提交到我的diggbox.com；2、随时记录我的心情，发到diggbox.com（个人微博客）。


这个学习笔记将包含手机端的Widget开发、服务端PHP处理、Google Map API的使用、AJAX、Jquery等方面的东西。


二、工欲善其事,必先利其器

1、安装aptana2：做前端开发的好东东，如果你还没有安装，到这里免费下载。

2、安装nokia wrt插件，可以在这里找到方法，建议采用直接下载，然后在Help -> Install New Software那里用local的方法安装。


如果用Dreamweaver开发则要安装Dreamweaver插件。
另外建议下载个nokia S60V3或者V5的SDK，可以当手册用

三、Hello world！

打开aptana2，新建项目，选择Nokia Web Runtime（WRT），选择模版的时候可以选择Basic Widget Project，项目命名为hello，剩下的next就行了。



哈哈，看里面文件虽然多，但是关注的只有Info.plist、index.html、basic.js、basic.css
Info.plist是配置文件，这里没有过多修改，index.html就是widget的首页，JS脚本写在basic.js即可。
在index.html的body之间写入“Hello world！”，然后注意编辑器的左下角附近有一个：




点那个WRT的就可以打开模拟器，直接看到预览的效果。


ok，光在pc看还不过瘾的，打包吧。右击项目名称，可以看到弹出菜单有“Package Widget”，点击完成打包，生成了hello.wgz。
这个包要在项目的workspace里面找，默认是C:\Documents and Settings\Administrator\My Documents\Aptana Studio Workspace\hello

Tips：workspace路径可以通过Alt+Enter看到。

将hello.wgz通过数据线、蓝牙、SD卡等方式传到手机，点击安装即可使用。



四、如何调用手机的GPS功能？


请注意，以下功能，在S60V5版本调试通过，其他版本没有试验过


在WRT环境下，JS可以通过API调用手机的数据（如GPS，电话簿，短信息……），本人只试验了GPS数据的获取，basic.js如下：





$.getLocation(callbackSuccess, callbackError)是我自己弄的一个jquery插件，主要是定期获得GPS数据，每一次获得数据就调用callbackSuccess
再通过$.get()，用ajax将当前的GPS数据提交到我的网站，这里就实现了GPS数据的准实时更新。

注意：这里的设计存在一个缺陷就是定时提交数据的频率过快会引起这个程序的崩溃。


五、服务器端


没有特别的事情要做，和平时处理ajax请求一样。我这里的PHP如下：


public function update(){

$lat = $this->get('lat', 3);

$lon = $this->get('lon', 3);

if($lat && $lon){

$gps["lat"] = $lat;

$gps["lon"] = $lon;

$gps["utime"] = time();

Y::setVar("gps", $gps);

echo 'ok';

}

}



这里用的是我的Y.php小框架。$this->get是获取$_GET数据并过滤，Y::setVar就是将一个变量存到一个php文件里面去（理论上可以存入memcached）。



后面将继续介绍如果利用这些GPS数据，在Google Map上面指示当前我所在的位置。如果有兴趣可以在我的博客上看到效果。

局限于诺基亚某些机型吧？
应该不能通用

回复 sheak


谢谢关注。
手机的操作系统太多了，一般都不能做到通用的。我是在5230xm上面试验，其他手机如果用symbian s60v5系统应该也可以的。