分类目录归档:移动端编程应用

Android,ios,html5,app,webapp

DIY商业路由器(dd-wrt+PHP)

那天一个朋友给我看了下他的微信公众号,关注后,点击一键上网,即可直接上网。(前提是已连接上该WIFI)

我知道大概原理,以前酒店那种商业路由器,不也是这样么?只是换了种方式,结合微信接口进行了概念转换。

听他说一个这样的账号,需要上万元,其实,如果自己动手DIV,结合一些云平台,其实花几十元即可搭建这样一个公众号和路由器功能。我们可以利用1个能刷DDWRT或带有wifidog服务的路由器,再搭配一个远程服务器平台,就能实现N个商业路由器提供服务。

怎么开始?

1:购买路由器

买路由器之前,要先考虑好,是否支持刷入dd-wrt或openwrt。由于我常用tp-link,所以我选择了DD-WRT,DD-WRT自带了wifidog,而且也支持挺多型号的tp-link路由器。

具体支持哪种路由器,请到dd-wrt官方输入型号关键字检索下:http://www.dd-wrt.com/site/support/router-database

如图:C5_2OP8FPMSH36W5N[6~HEI

 

2:路由器刷入dd-wrt

至于如何刷入dd-wrt或openwrt,请自行解决,这不是本篇讨论的重点。

3:设置wifidog,让wifidog对接验证服务器

如图

}KF28}627MRO3[W@}JFVY3K

4.搭建PHP平台对接

先了解下wifidog认证的过程:

  • 客户端首次连接到wifi后,浏览器请求将会被重定向到:login/?gw_address=%s&gw_port=%d&gw_id=%s&url=%s
  • 验证通过后,客户端被重定向到网关,url格式如下:http://网关地址:网关端口/wifidog/auth?token=

wifidong会启动一个线程周期性地报告每一个用户的状态信息,并通过如下地址发送给认证服务器:

auth_server:/auth/?stage=
ip=
mac=
token=
incoming=
outgoing=

  • 认证服务器根据该状态信息决定是否允许该用户继续连接,并回复网关,回复格式为:Auth:状态码,如: Auth:1

常用状态码:

0:AUTH_DENIED,表示拒绝

1:AUTH_ALLOWED,验证通过

  • 验证通过后,将重定向到如下地址:

portal/?gw_id=%s

wifidog的ping协议

wifidog通过ping协议将当前状态信息发送给认证服务器,发送地址为:

http://auth_sever/ping/?

gw_id=%s

sys_uptime=%lu

sys_memfree=%u

sys_load=%.2f

wifidog_uptime=%lu

  • 认证服务器须返回一个“ Pong ”作为回应。

具体php实现代码如下

public function auth()
{
//响应客户端的定时认证,可在此处做各种统计、计费等等
/*
wifidog 会通过这个接口传递连接客户端的信息,然后根据返回,对客户端做开通、断开等处理,具体返回值可以看wifidog的文档
wifidog主要提交如下参数
1.ip
2. mac
3. token(login页面下发的token)
4.incoming 下载流量
5.outgoing 上传流量
6.stage 认证阶段,就两种 login 和 counters
*/

$stage = $_GET['stage'] == ‘counters’?'counters’:'login’;
if($stage == ‘login’)
{
//XXXX跳过login 阶段的处理XXXX不能随便跳过的
//默认返回 允许
echo “Auth: 1″;
}
else if($stage == ‘counters’)
{

//做一个简单的流量判断验证,下载流量超值时,返回下线通知,否则保持在线
if(!empty($_GET['incoming']) and $_GET['incoming'] > 10000000)
{
echo “Auth: 0″;
}else{
echo “Auth: 1\n”;
}
}
else
echo “Auth: 0″; //其他情况都返回拒绝

/*
返回值:主要有这两种就够了
0 – 拒绝
1 – 放行

官方文档如下
0 – AUTH_DENIED – User firewall users are deleted and the user removed.
6 – AUTH_VALIDATION_FAILED – User email validation timeout has occured and user/firewall is deleted(用户邮件验证超时,防火墙关闭该用户)
1 – AUTH_ALLOWED – User was valid, add firewall rules if not present
5 – AUTH_VALIDATION – Permit user access to email to get validation email under default rules (用户邮件验证时,向用户开放email)
-1 – AUTH_ERROR – An error occurred during the validation process
*/
}
public function portal()
{
/*
wifidog 带过来的参数 如下
1. gw_id
*/
//重定到指定网站 或者 显示splash广告页面
redirect(‘http://www.baidu.com’, ‘location’, 302);

}
public function ping()
{
//url请求 “gw_id=$gw_id&sys_uptime=$sys_uptime&sys_memfree=$sys_memfree&sys_load=$sys_load&wifidog_uptime=$wifidog_uptime”;
//log_message($this->config->item(‘MY_log_threshold’), __CLASS__.’:’.__FUNCTION__.’:’.debug_printarray($_GET));

//判断各种参数是否为空
if( !(isset($_GET['gw_id']) and isset($_GET['sys_uptime']) and isset($_GET['sys_memfree']) and isset($_GET['sys_load']) and isset($_GET['wifidog_uptime']) ) )
{
echo ‘{“error”:”2″}’;
return;
}
//添加心跳日志处理功能
/*
此处可获取 wififog提供的 如下参数
1.gw_id 来自wifidog 配置文件中,用来区分不同的路由设备
2.sys_uptime 路由器的系统启动时间
3.sys_memfree 系统内存使用百分比
4.wifidog_uptime wifidog持续运行时间(这个数据经常会有问题)
*/

//返回值
echo ‘Pong’;
}
/**
* wifidog 的gw_message 接口,信息提示页面
*/
function gw_message()
{
if (isset($_REQUEST["message"])) {
switch ($_REQUEST["message"]) {
case ‘failed_validation’:
//auth的stage为login时,被服务器返回AUTH_VALIDATION_FAILED时,来到该处处理
//认证失败,请重新认证
break;
case ‘denied’:
//auth的stage为login时,被服务器返回AUTH_DENIED时,来到该处处理
//认证被拒
break;
case ‘activate’:
//auth的stage为login时,被服务器返回AUTH_VALIDATION时,来到该处处理
//待激活
break;
default:
break;
}
}else{
//不回显任何信息
}
}

5.如何实现微信公众号点击一键上网?

一键上网有很多种方式,有A告诉密码,然后输入密码通过验证的;B直接点击立即上网的;C通过判断是否关注即允许上网。

目前,A种是最容易实现的;B需要根据每个不同商家进行定制,这个也很容易实现。C要可能要结合微信接口进行开发,目前我还没有时间去测试。

无论以上ABC采用哪种,都需要做一个设置,大家还记得我发的第二图吗?里面wifidog的防火墙规则里,写着如下代码:

FirewallRuleSet global {
FirewallRule allow tcp to 101.226.76.0/24
FirewallRule allow tcp to 101.227.131.0/24
}
FirewallRuleSet known-users {
FirewallRule allow to 0.0.0.0/0
}

这个我大概说下,就是允许101.226.76.X和101.227.131.x的这2个IP能在未进行远程验证的情况下能直接联网。具体防火墙规则官网有说明,可以到http://dev.wifidog.org/browser/trunk/wifidog/wifidog.conf查看

里面的101.226.76.X是微信服务器的IP(末尾用0表示)

 

此篇文章写得有点仓促,打了字也没再过一遍,难免有一些错别字,还请见谅,里面某些wifidog流程来源于互联网,目前整体功能已通过测试,Android和ios都能成功通过微信公众号联网。

原创文章,转载请注明: 转载自蔡洁锐的blog

本文链接地址: DIY商业路由器(dd-wrt+PHP)

Android隐藏标题栏/全屏设置

试了很多种方法,还是这种比较靠谱。

1:确认或修改AndroidManifest.xml的application内容为以下代码:

<application
android:allowBackup=”true”
android:icon=”@drawable/ic_launcher”
android:label=”@string/app_name”
android:theme=”@style/AppTheme” >

2:在res/values/styles.xml里添加以下红色内容

<resources>

<!–
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
–>
<style name=”AppBaseTheme” parent=”Theme.AppCompat.Light”>
<!–
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
–>
</style>

<!– Application theme. –>
<style name=”AppTheme” parent=”AppBaseTheme”>
<!– All customizations that are NOT specific to a particular API-level can go here. –>
<item name=”android:windowNoTitle”>true</item>
<item name=”android:windowContentOverlay”>@null</item>
<item name=”android:windowFullscreen”>?android:windowNoTitle</item>

<item name=”android:windowFrame”>@null</item> 

<item name=”android:windowBackground”>@null</item> 

<item name=”android:backgroundDimEnabled”>false</item>
</style>

</resources>

3:这样还不一定能保证全屏,特别是加图片和弹出层的时候,还需要去掉res/layout/activity_main.xml的代码

 

android:paddingBottom=”@dimen/activity_vertical_margin”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”

 

 

原创文章,转载请注明: 转载自蔡洁锐的blog

本文链接地址: Android隐藏标题栏/全屏设置

微信互加好友功能的尝试

最近想尝试用微信进行推广,无奈好友太少,不足1000人,想想以前微博总是有一些工具能让大家互相留下账号进行互粉,我以为微信也有。

用google + baidu 搜了“微信互加好友”、“微信互粉”、“微信互加”等关键词,发现没有一个网站能和以前微博时代一样,提供互粉的。

无奈之下,想了半天,花了1天时间做了个小功能(我叫他:《微关系》),主要是提供一个平台,实现微信账号的登记、删除、展示,按行业、地区等分类信息展示微信号。

目前已基本完善,包括input验证、ajax请求数据及翻页等,下一步如果登记的人多,再考虑功能更新。。。

微关系

有和我一样需要微信互加好友的,不妨可以登记一下:http://www.4p.cn/haoyou

也可以加我的微信个人号:jierui

原创文章,转载请注明: 转载自蔡洁锐的blog

本文链接地址: 微信互加好友功能的尝试

利用百度地图api做一个手机终端导航地图

百度API功能强大,但如果用手机终端的sdk(ios/android/塞班等)开发接入,考虑到多终端兼容,免去各种判断以及其他复杂流程,还不如用html5调用js api,里面的定位功能可能稍微逊色点,但无所谓,只要把关键字查询、点击查询这两个功能一起加上,基本上就可以形成导航了(不是真正意义上的带语音或实时更新的导航)。

开始制作之前,咱们先来看下要实现什么功能以及采用哪个便捷框架。

功能概述:

1:可获取当前用户GPS坐标,并提供该位置到达终点的所有公交车/地铁、驾车导航路线参考。

2:可搜索相关地点名称显示该地点至终点的路线图,并提供公交车/地铁、驾车导航路线参考。

3:可在地图点击某位置,获取该位置信息并提供该位置到达终点的所有公交车/地铁、驾车导航路线参考。

4:公交车/地铁、驾车两种模式的路线图可随时切换显示,起点与终点不变。

名词解析:

终点:是固定的一个点,例如某个公司、某个商户的地址。

起点:默认获取用户当前位置,如无法获取则可通过输入地址或点击地图生成。

异常和正常处理:

1:当无法获取用户GPS位置时(多种原因造成,如超时、不支持、拒绝等原因),提示“无法获取当前位置”,并默认起点为“北京”;

2:当成功获取用户GPS位置时,提示获取成功并显示获取到的GPS位置附近街道名称。

前端框架采用:

jQuery Mobile(不采用也行,只要调用jquery.js即可,我是为了方面显示以及页面美观- -)

实现过程:

Head部分,这部分没什么好说的,就是加载js和css,值得注意的是里面的api密匙,大家记得修改成自己的,别用我的,指不定哪天我就删了。。。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>手机终端调用百度地图API实例 - caijierui.com</title>
<link href="http://www.caijierui.com/jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css">
<script src="http://www.caijierui.com/jquery-mobile/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=50bc3fec4dce26a0ea12b1b62d0ab29a"></script>
<!--这里的ak后面的参数,是我的API密匙,请自行更换-->
<style type="text/css">
#l-map h1 {
 margin-top:5px;
}
</style>
<script src="http://www.caijierui.com/jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>

body部分:

<body>
<div data-role="content">
 <h3>手机终端展示页导航</h3>
 <!--
 这部分HTML有2个input是必须有的,可以改样式等,但id不要变,如果要改变id以及某些属性,请自行查看js进行修改。
 说明:id为dizhi的input,里面的value值JS有用
 id为gjc的input,里面的startzb、gps、值JS有用
 如更换请记得调用2个方法onClick="btnbus_onclick()"和onClick="jiache()"
 -->
 <p id="tishi">正在获取您的位置......为了更好的体验本功能,如提示获取您地理位置的信息,请您同意"共享位置"。</p>
 <label>我想从这里出发:</label>
 <input type="search" name="search" value="" id="dizhi" data-inline="true" />
 <input type="submit" name="submit" value="公共交通工具" id="gjc" onClick="btnbus_onclick()" startzb="北京" data-icon="search" data-iconpos="left" data-inline="true" gps='' />
 <input type="submit" name="submit" value="驾车/出租车" onClick="jiache()" data-icon="search" data-iconpos="left" data-inline="true" />
 <!--这部分显示百度地图内容-->
 <div id="r-result"></div>
 <div id="l-map" style="width:100%;min-height:300px;border:1px solid #ddd;float:left;"></div>
 <!--//这部分显示百度地图内容-->
 <script type="text/javascript">

 //实例化地图,这里的l-map就是上面的div ID
 var map = new BMap.Map("l-map");

 //路线信息展示框的ID,也就是上面的DIVid
 var lxkuang="r-result";

 //终点坐标,此部分可自由设置动态获取
 var zb="116.425199,39.914005";
 </script>
 <!--调用我的JS,上面实际引用时,记得修改终点坐标。-->
 <script type="text/javascript" src="http://www.caijierui.com/js/bdapiforjerry.js"></script>
</div>
<div data-role="footer" data-theme="a" data-position="fixed" data-id="footernav">
 <div data-role="navbar">
 <ul>
 <li><a href="http://www.caijierui.com/blog" data-ajax='false'>我的博客</a></li>
 <li><a href="http://www.caijierui.com" data-ajax='false'>联系方式</a></li>
 <li><a href="#" class="ui-btn-active ui-state-persist" onClick="jiache(0)">地图路线</a></li>
 <li><a href="http://www.caijierui.com/blog/?p=66" data-ajax='false'>使用说明</a></li>
 </ul>
 </div>
 <!-- /navbar --></div>
</div>
</body>

上面用到的bdapiforjerry.js可点击这里http://www.caijierui.com/js/bdapiforjerry.js下载

可自行根据自己的喜好修改代码,其中要注意:

点击地图获取坐标并查找周边街道的部分代码,需要将“if(bs==’0′){jiache()}else if(bs==’1′){btnbus_onclick()}else{alert(“发生错误,获取不到交通方式”)};”这句放在if(result)里,不然的话。。。你会发现程序会先调用jiache()和btnbus_onclick()然后才写入坐标($(“#dizhi”).val(addComp.city+addComp.district+”, “+addComp.street);)

实际效果查看

http://www.caijierui.com/mydemo/baidumap.html

JS里面代码现写现传,难免有一些不够简练,大家可以多多交流。

 

原创文章,转载请注明: 转载自蔡洁锐的blog

本文链接地址: 利用百度地图api做一个手机终端导航地图

chrome模拟手机终端进行测试

有时候要测试一个网页不同终端访问的不同效果,需要用iphone、ipad、android系统的手机挨个访问,这样很费神 – -

还好,谷歌的Chrome浏览器能模拟各种终端,相当于手机浏览器的模拟器,方法如下:

在Windows的【开始】–>【运行】中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器访问问手机网页:

模拟谷歌Android

chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 4.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

模拟苹果iPhone 4

chrome.exe --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A405"

模拟苹果iPad 2

chrome.exe --user-agent="Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A405"

模拟诺基亚N97:

chrome.exe --user-agent="Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1/20.0.019; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 (KHTML, like Gecko) BrowserNG/7.1.18124"

如果想切换回普通浏览器模式,关掉所有Chrome浏览器,重开即可。

如果不想关闭浏览器,切回普通浏览器模式,则访问:

chrome.exe --user-agent="Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.77 Safari/535.7"

原创文章,转载请注明: 转载自蔡洁锐的blog

本文链接地址: chrome模拟手机终端进行测试

为 iOS 设备搭建 WebApp

head添加如下代码:

<!– 设置viewpoint,固定显示页面, 关闭缩放,viewpoint的属性可看下文 –>
<meta name=”viewport” content=”width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”/>
<!– 隐藏safari导航栏以及工具栏。想达到全屏显示的效果必须通过主屏的图标打开网站,直接在Safari输入URL是不行的。 –>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<!– 主屏幕显示的图标, iOS系统会自动将图标生成具有高光, 圆角和阴影效果 57×57 –>
<link rel=”apple-touch-icon” href=”http://m.example.com/images/iphone-icon.png”/>
<!– 主屏幕显示的图标, 如果你不喜欢 ios 帮你生成的, 可以使用以下属性 57×57 –>
<link rel=”apple-touch-icon-precomposed” href=”http://m.example.com/images/iphone-icon.png” />
<!– 启动画面 –>
<link rel=”apple-touch-startup-image” href=”http://m.example.com/images/logo_320.png” />

简单了解下viewpoint的属性:

user-scalable – 用户是否可以手动缩放;
width – 定义viewport宽度(默认为980像素) ,例子中值为device-width是指设置为设备显示宽度;
height – viewport的高度;
initial-scale – 初始的缩放比例 (范围从 0 到10);
minimum-scale – 允许用户缩放到的最小比例;
maximum-scale – 允许用户缩放到的最大比例;

设置系统状态栏风格:
系统状态栏是 iOS 顶部显示运营商、WIFI、时间的部分,它无法隐藏,但可以设置灰、黑两种风格,设置代码如下:

<meta name=”apple-mobile-web-app-status-bar-style” content=”grey” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

 

启动画面设置:
当用户点击主屏图标打开 WebApp 时,系统会展示启动画面,在未设置情况下系统会默认显示该网站的首页截图,当然这个体验不是很好,所以我们需要通过以下代码来自定义启动画面:

<link rel=”apple-touch-startup-image” href=”Startup.png” />

[2012.11.20]更新
与启图标类似,根据 iOS 设备的分辨率,其启动画面的图片尺寸也各不相同:

iPhone 3GS(及以前机型):320×460 像素
iPhone 4、4S:640×920 像素
iPhone 5:1096×640 像素

iPad 1、2:768×1004 像素
New iPad:–
iPad mini —

注:如果图片尺寸不对将无法显示。

[2011.2.1]更新
如果想让一个 WebApp 在 iPhone 和 iPad 中同时具有启动画面,我们可以借助 Javascript 脚本来完成,通过判断设备navigator.userAgent信息,来更改href的值指向对应的图片路径:

//jQuery
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/iPad/i)==”ipad”) {
$(“link[rel=apple-touch-startup-image]“).attr(“href”,”images/startup_ipad.png”);
}

 

在页脚添加以下代码, 防止当前链接在新窗口打开 ( 新窗口的话会直接调用 sofari 打开 )

<script type=”text/javascript”>

(function (a, b, c) {
if (c in b && b[c]) {
var d, e = a.location,
f = /^(a|html)$/i;
a.addEventListener(“click”, function (a) {
d = a.target;
while (!f.test(d.nodeName)) d = d.parentNode;
“href” in d && (d.href.indexOf(“http”) || ~d.href.indexOf(e.host)) && (a.preventDefault(), e.href = d.href)
}, !1)
}
})(document, window.navigator, “standalone”)
</script>

 

参考来源:http://www.iinterest.net/2011/01/03/mobile-webapp-base/

原创文章,转载请注明: 转载自蔡洁锐的blog

本文链接地址: 为 iOS 设备搭建 WebApp