开发者介绍:老家湖北巴东好山好水,神农溪、巴人河、三里城等都是旅游好去处。中秋节回了趟老家,看到家乡的原生态景色吸引了大批游客,由此萌发了想法:用移动技术开发一个App试水,把家乡景点介绍给更多的人。于是,耗时一个月的《嗡嗡旅游》应运而生,特此将项目源码分享给广大AppCan开发者。
项目实现功能
用户注册、登录,游记查看和发布,查看辖区内景区、酒店、交通、攻略等信息,内容收藏、评论和分享,查看地图,景区门票、酒店电话预定等。
项目使用插件
引导页
引导页3张图片采用的是全屏显示的slider,控制图片滑动。
首页
头部轮播图,使用的是uexScrollPicture插件,图片地址从后台获取,动态显示在页面上。轮播图下面的菜单栏,全部由div组成;景点及攻略的图片信息展示,数据全部从后台获取,用到了缓存方法。底部栏并没有采用tab,而是使用4个div横向显示,点击其中任何一个,显示出相对应的window。
注册页
景点页
景点详细页面中,订票模块调用了uexCall插件,点击可拨打电话。另外,地址模块调用了高德地图插件,使用了高德地图的设置中心点、添加标注、开启、关闭指南针、设置自定义按钮、打开地图及关闭地图方法,使用高德地图之前需要到高德地图的官网上申请为开发者,根据包名及签名申请key,具体步骤可以参考AppCan官方文档。
另外,分享功能的整个页面是一个浮动窗口,实现分享到微信、朋友圈、QQ好友、QQ空间,同时也能内容复制到剪切板和发送短信。效果图如下:
分享模块调用了uexWeiXin、uexQQ、uexSMS、uexClipboard插件,其中微信和QQ属于第三方插件,使用之前需要到相关网站上申请为开发者,获取到AppId。
发现页
该页面主要使用tab做导航栏, 5个浮动窗口之间可以通过滑动切换页面,也可以点击切换。
游记页
游记页面中,用户可查看热门游记,点击写游记时若是没有登录,则提示用户需要登录,进而跳到登录页面。游记撰写页面,添加图片模块调用了uexActionSheet、uexUploaderMgr、uexImage以及uexCamera插件,值得注意的是uexActionSheet和uexImage只有在线打包才能看到效果。