AppCan 移动应用开发项目源码分享：嗡嗡旅游App开发

Posted 2020-06-16

开发者介绍：老家湖北巴东好山好水，神农溪、巴人河、三里城等都是旅游好去处。中秋节回了趟老家，看到家乡的原生态景色吸引了大批游客，由此萌发了想法：用移动技术开发一个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只有在线打包才能看到效果。