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

boyanx7个月前技术教程33

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

标签: 轮播图插件

相关文章

为什么说前端转全栈比Java程序员更容易?这3个思维优势太致命

前几天和老同事吃饭,听他吐槽:"我们组那个Java架构师,讨论个接口文档磨蹭了三天,结果隔壁组的前端小哥用Node.js搭了个中间层,一上午就把问题解决了!" 这让我突然意识到:前端开...

DataV - 免费开源的 Vue / React 大屏数据展示组件库

最近有粉丝留言说想找一款数据大屏组件,这篇文章推荐的这款还不错, Vue / React 都可以用。关于 DataVDataV 是一款基于 Vue 开发的数据可视化组件库,主要用于开发大屏数据展示页面...

DevExpress Demo示例展示:满足各种应用场景的图片浏览器

DevExpress ASP.NET MVC有一个集成了很多功能的图片浏览工具,能满足各种业务使用场景。下面通过几个示例介绍几种功能:你也可以下载Universal安装包或者访问DevExpress中...

源码推荐(01.11B):iOS项目分层,Widget手机任务栏

iOS项目分层(上传者:踏浪帅)主项目中的分层主要包含四个模块,Main(主要)、Expand(扩展)、Resource(资源)、Vender(第三方),还有本项目是有多个Tag,用于区分不同的版本,...

十大初学者须知的web前端开发框架,知道几个

近几年随着 jQuery、Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架,极大丰富了...

网约车管理系统源码 打车APP源码 顺风车源码

系统功能简介:控制台会员管理一、会员分组二、会员规则认证管理三、实名认证管理四、驾驶证认证管理五、车主认证管理理代驾管理六、订单管理七、轮播图管理八、话题列表九、话题评论顺风车管理十、顺风车订单十一、...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。