发布日期 » 2016年9月15日 星期四

版权声明 » 帅华君原创文章,未经允许不得转载。

来一场说走就走的旅行(基于微信开发者API)

基于微信内置浏览器开发,基于微信定位,

曾经对那些可以东跑西跑并乐此不疲的人深深羡慕着,幻想着有一天自己和他们一样在旅途中能遇见知己——真正懂自己的那个,能看遍世间百态,至少能尝遍天下美食,游遍千山万水。听来也不错。

旅行是一场修行,而修行也不一定要在路上,在闹市中修行方得真性情,一切繁华不过浮云,都是过眼云烟,如果有一颗悟性极强、能领悟大道的心,欣赏一株花开和一场旅行应该也是一样的吧。这个webapp基于微信官方提供的JSSDK开发,需要用JSSDK中的获取位置接口,所以需要在显示地图之前需要配JSSDK置信息,如下代码

/* 配置JSSDK */
wx.config({
debug: false,
appId: <?php echo "'".$appid."'"; ?>,
timestamp: <?php echo $timestamp; ?>,
nonceStr: <?php echo "'".$noncestr."'"; ?>,
signature: <?php echo "'".$signature."'"; ?>,
//在Api数组列表里加入getLocation项,即可获得获取用户位置的权限
jsApiList: ['hideOptionMenu','getLocation']
});

在设想webapp的包含的页面和交互流程时,粗略的画下了下面的线框图。

说来也奇特,这个项目我专门做了一个logo——咳咳,虽然从打开PS到想象logo的样子再到输出JPG只用了2分钟左右的时间。

整个PHP接口目录结构都抛出来了。

封面

如今的封面处理简简单单的。一个圆圆的LOGO——圆形寓意着看得透,方形代表寓意着迷惑——这是我在一段写日本建筑设计的文字中介绍关于窗户的部分理解到的,寓意着想通过旅行把人生看·得·透。

logo下方配以几行小诗一样的文字,文字并非我的杜撰,每一句都有出处,至于出处我不过多引申,只是我很欣赏青峰的辞藻而已。

小诗的下方是正在加载地图的提示,微信获取用户位置需要用户的确认加一点定位的时间,等到获取到了用户的位置——包括设备的经维度、移动速度、位置精度等信息,之后我便将从微信定位获取的经度和纬度信息通过AJAX异步POST请求的方式传递给我早已用PHP写好的用来调用百度地图API的经纬度转换接口。

使用微信定位需要在JSSDK配置准备好后执行,所以,获取经纬度要写在微信JSSDK的wx.ready()方法中

/* 微信JSSDK配置完成 */
wx.ready({
wx.getLocation({
sucess:function(res){
//成功获取到用户地理位置后,
//JSSDK会执行success方法,
//并给我们传入了地理位置信息的对象。
//在这个回调函数里我们可以获取到经纬度。
},
fail:function(res){
//获取用户位置失败后的回调函数
},
complete:function(){
//无论成功与否,
//都会在尝试获取用户位置之后执行的函数。
}
});
});

因为我用的是百度地图,百度和微信返回的数据使用的经纬度测量规范不同,需要转换成百度地图的经纬度,不然最终呈现在百度地图上的用户的位置有误差,最后返回百度地图转换后的经纬度值。

然后将一个个经纬度变成一个一个的人在地图上的位置。

色即是空,空即是色。听说所有可见的物质99%都是空的。

编程的世界同样,“一切皆对象,一切‘对象’皆空”(遗传null)。编程的世界里尚能窥见生命的哲理,可见一切事物均可窥见“道”的痕迹,因为“他”无处不在,从最开始之前到现在之后。

信笺的足迹

首次加载完地图之后,用户将看到自己所在的位置,幸运的话还能看到附近的驴友。

点击#在当前位置发布一个新的足迹。

首先百度地图作为背景模糊化,界面上沿Z轴(垂直方向上)翻转出表单,这里使用了CSS3新的属性transform和rotate()值,感兴趣的同学出门直走左拐w3cschool。

界面布局和风格是在写样式时一气呵成的。

模糊滤镜的css写法,在弹出登录注册框时,为整个背景地图容器添加该css样式类即可

/* css模糊滤镜 */
.frosted-glass{
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
-o-filter: blur(3px);
filter: blur(3px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
}

他/我的足迹

在地图上点击&查看我的足迹,点击“Ta的足迹>>”查看其他人的足迹。

足迹会将此人所有足迹显示在地图上,并用弧线连接。(端端说**“足迹连成生命线”**,我觉得如果能在每一处“风景”领略一点旅行的意义生命的意义,好似一次又一次思想的蜕变,绽放新的生命,那么是这样的。

点击“Ta/我的脚印”查看完整信笺的足迹,并可点赞。评论暂不开放。

脚印

脚印列出了最近登录时间逆序排列的所有驴友信息,包括昵称、圆圆的头像、他与你的距离、登录时间,其中他与你的距离也是百度地图提供的API,这个API它可以实现查询附近的人功能。点击“Ta的位置”查看Ta最近登陆的位置。

退出/登录、注册

此处用到的H5 API的本地存储技术之一——localstorage,在用户首次进入界面登陆/注册成功后,JS会将用户名、密码、头像等信息放入本地存储中,当下次再次进入webapp时,JS会先查找本地是否有存储登录信息以判断是否显示登录/注册框。

当选择退出登录后,JS会清空本webapp在本地的存储信息,并在不刷新页面的前提下将相应DOM元素初始化到首次进入状态。
在注册时有一个技术点,就是上传图片,我使用了H5新的API FormData类,用它实例化一个要POST的对象,作为AJAX的send()方法的参数,在PHP使用$_POST[]即可接受到POST的内容,更多帮助自行出门直走右拐Google。

由于整个webapp需要用到异步请求的地方非常多,且都需要使用FormData()来POST数据,所以自定义了一个专门用来异步发送数据的函数,这个函数接受一个回调函数,用来处理接收到的数据

/* postData() */
function postData(arr, url, callback){
formData = new FormData();
for(var i = 0; i < arr.length; i++){
formData.append(arr[i].key,arr[i].value);
}
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
callback(xhr.responseText,xhr.responseText);
}
}
xhr.open('POST', url, true);
xhr.send(formData);
}

我要感谢帮助测试webapp的好友,谢谢你们的耐心,并反馈了许多宝贵的意见和建议。

我知道不会有很多人喜欢我为人的方式、表达的方式、做事的方式,就像我也不喜欢我自己一样。我的“世界”被寂寞绑票,“大雨”让整个“世界”颠倒。

在写文章的时候,间歇从网易云音乐听了一首有情怀的民谣,学到了一个词——脑放,大概意思是说音乐重新在自己脑海中被诠释并在脑中回放拥有超震撼的力量。这让我想到《道德经》中的一句话——“大音希声”,最美妙的旋律是听不见的,我手握一块破木头抚弄正欢,在你看来像个傻子,可我的脑海里有你听不到的这世间最美的天籁之音。最本质的东西肉眼看不到。

再分享几个类似的句子,同样出自《道德经》,**“大象无形”“大成若缺”“大巧若拙”“大智若愚”“大器晚成”