|
研究了Rexsee的对象和函数,尝试完成了一个团购网的应用demo,就是很简单的html+JS,不需要多讲了。有意思的是最后可以封装成apk,直接在Android上作为本地应用安装使用了。。
其实这倒是一个很有意思的方向,传统的Web应用可以利用这种方式用以降低对网络的依赖,同时也可以将应用作为原生应用进行推广。理论上对于HTML5的应用也是没问题的,好像也有示例。
我把团购的这个demo源码分享出来。
首先是截图:
http://www.rexsee.com/imagecache/bbs/11-12-10/1323502215.jpg
http://www.rexsee.com/imagecache/bbs/11-12-10/1323502232.jpg
然后是源码:
这里就只是我自己的了,Rexsee接口的原生源码自己去找,开源社区,都能看到的。
如果要直接运行的话,把这个例子里的url(就是http://……)换成可访问的url就可以了。。
<?php
?>
<HTML>
<HEAD>
<TITLE>拉手网
</TITLE>
<SCRIPT type=text/javascript>
function setOptionsMenu()
{
rexseeMenu.create("mainOptionsMenu","label:mainOptionsMenu");
rexseeMenu.addItem("mainOptionsMenu","http://m.lashou.com/action/login.php","label:用户登录;");
rexseeMenu.addItem("mainOptionsMenu","http://m.lashou.com/action/login.php","label:商户登录;");
rexseeMenu.addItem("mainOptionsMenu","push://","label:消息列表;");
rexseeMenu.addItem("mainOptionsMenu","javascript:rexseePushHttpListener.refresh();","label:刷新消息;");
rexseeMenu.addItem("mainOptionsMenu","rexsee:about","label:关于;");
rexseeMenu.addItem("mainOptionsMenu","rexsee:quit","label:退出;");
rexseeMenu.setOptionsMenuId("mainOptionsMenu");
}
function setTabBar(){
var normalStyle = "width:fillparent;height:fillparent;weight:1;white-space:normal;border-width:0;padding:2 10 3 10;font-size:16;color:#FFFFFF;icon-visibility:hidden;background-color:#444444+#888888+#222222/4;";
var pressedStyle = "background-color:#444444;";
var selectedStyle = "background-color:#6A0500+#FA0E01+#6A0500/4;";
rexseeMenu.create("mainTabBar", "bar-position:bottom; height :40;width:fillparent;background-color:客服热线#444444;border-width:0;fading-edge-length:60;fading-edge-color:#444444;");
rexseeMenu.addItem("mainTabBar","http://m.lashou.com/action/","label:今日团购;"+normalStyle,pressedStyle,selectedStyle);
rexseeMenu.addItem("mainTabBar","javascript:changeCity();","label:切换城市;"+normalStyle,pressedStyle,selectedStyle);
rexseeMenu.addItem("mainTabBar","tel:4000517317","label:客服电话;"+normalStyle,pressedStyle,selectedStyle);
rexseeTabBars.create("mainTabBar");
}
function onRexseeReady()
{
var appWidget = <?php echo ($_GET['rexseeAppWidgetSetup']=="true")?"true":"false"; ?>;
rexseeStatusBar.setStyle("visibility:hidden;");
setOptionsMenu(); setTabBar();
var currentCity = ( rexseePreference.exists('city') ) ? rexseePreference.get('city') : "北京";
rexseePushHttpListener.add('http://www.fuwu800.com/tianyonghong/LaShou/push.php',rexseeTelephony.getSimSerialNumber(),encodeURI(currentCity));
var code = "";
code += "function changeCity(){ ";
code += " var currentCity = ( rexseePreference.exists('city') ) ? rexseePreference.get('city') : '北京';";
code += " var newCity = prompt('radio','title=请选择城市;options=北京|上海|杭州|桂林|鄂尔多斯;defaultValue='+currentCity+';cancel=true;');";
code += " if ( newCity == '' ) return; ";
code += " rexseePreference.set('city', newCity);";
code += " var cid;";
code += " switch (newCity){";
code += " case '北京': cid='beijing';break;"
code += " case '上海': cid='shanghai';break;"
code += " case '杭州': cid='hangzhou';break;"
code += " case '桂林': cid='guilin';break;"
code += " case '鄂尔多斯': cid='eerduosi';break;"
code += " default: cid='beijing';break;"
code += " }"
code += " rexseePushHttpListener.add('http://www.fuwu800.com/tianyonghong/LaShou/push.php',rexseeTelephony.getSimSerialNumber(),encodeURI(newCity));";
code += " rexseeBrowser.go('http://m.lashou.com/action/index.php/index/city/'+cid);"
code += " }";
code += " var divs = document.getElementsByTagName('div');";
code += " for( var i=0; i<divs.length; i++) { if(divs.className=='nav') {divs.innerHTML='<font color=white> 手拉手购物,时代的需要!</font><a href=tel:4000517317><U>客服电话</U></a>'; } if(divs.className=='foot') {divs.innerHTML='Power by <a href=http://www.rexsee.com>Rexsee EMS</a>'; } if(divs.className =='more') {divs.style.display='none'; } }";
code += " var links = document.getElementsByTagName('a');";
code += " for(var i=0; i<links.length; i++) { if(links.innerHTML=='切换城市') {links.href='javascript:changeCity()'; break;} }";
rexseeInception.add("changeCity",code);
rexseeBrowser.go("http://。。。");
}
</SCRIPT>
</HEAD>
</BODY>
</HTML> |
|