AppCan开源案例:移动电商 APP《海外购》超详源码

开发者自述:女朋友喜欢用国外护肤品,尤其喜欢日韩美妆,但苦于没有正规渠道购买。听说国内专柜里卖的不如原产地进口的好,现在各种代购各种坑,在某宝上更是假货一大堆。怎么办?自己出国背回来?这一来一回飞机钱得能买多少护肤品!我一大老爷们也不太懂那些,但看着女朋友三天两头的淘得还挺累,恨不得帮她装上一双火眼金睛,于是这激发了我开发一个海外淘货的App,某东某猫全球购,对不住了!秉着好东西大家分享的精神,在此分享出App源码。好了,不BB了,进入正题。

项目实现功能

用户注册、登录,商品查看和发布,加入购物车、在线支付,交易确认,地理定位,商品查询、评论和分享、关注商家等。

项目使用插件

整个APP大体的框架,尝试采用4个window,没有使用浮动窗口,打开首页的时候把4个window都打开,但是在打开window的时候window
flags传的是36=32+4,即uex.cWindowFlagHidden=32//标记被open的window为隐藏的。隐藏的window不会显示到屏幕上,只存在于后台。每次点击底部栏切换,只是把相应的window显示出来。

首页

首次登陆APP或进入现场详情页面,跳出提示层:

在首页和点击现场进入详情页时判断opentimes来判断是否跳出弹出层。

主要代码如下:

var w=screen.availWidth;

$("#content").css("width",w+"px");

首页效果图:

头部轮播图效果使用uexScrollPicture插件实现,轮播图的点击事件代码如下:

uexScrollPicture.onPicItemClick= function(data){

var count=JSON.parse(data).index;

appcan.locStorage.setVal("linkurl",urls[count]);

appcan.window.open("link","link.html",0);

}

这里实现的是点击不同的图片连接到不同的页面。

轮播图下面是种类及地域分类栏,全部由div组成,分类、轮播图及商品信息展示的数据都从后台获取。

底部栏并没有采用tab,采用的是4个div横向显示,点击其中任何一个,显示出相对应的window,点击后三个window时判断用户是否登录,未登录调到登录页面,js代码如下:

appcan.button("#search", "btn-act", function() {

uexWindow.open("search","0","search.html","0","0","0","0","200");

})

appcan.button("#publish", "btn-act", function() {

uexWindow.open("publish","0","publish.html","0","0","0","0","200");

} else{

appcan.window.open("login","login.html",16);

}

})

appcan.button("#cart", "btn-act", function() {

if(userId!=null){

uexWindow.open("cart","0","cart.html","0","0","0","0","200");

} else{

appcan.window.open("login","login.html",16);

}

})

appcan.button("#my", "btn-act", function() {

if(userId!=null){

uexWindow.open("my","0","my.html","0","0","0","0","200");

} else{

appcan.window.open("login","login.html",16);

}

})

查询页

这个页面通过调用后台接口获取种类列表内容以及全部种类的热门品牌,具体实现代码会在提供的文档中,这里不做详解。(详情请见官网《文档中心 - 案例详解 -
海外购案例》。)

发布页

作为一个海外淘货+代沟App,用户在发布商品时,本项目会进行地理位置识别,位置检测在国外或港澳台地区时,跳转到发布页;如果在大陆,跳出温馨提示,不能发布商品。

这里贴出实现拍照或从相册选取图片的代码,使用到uexImage和uexCamera:

function choosepic(){

var data = {

min:1,

max:1,

quality:0.5,

detailedInfo:false

}

var json = JSON.stringify(data);

uexImage.openPicker(json);

uexImage.onPickerClosed=function(info){

img_url = JSON.parse(info).data[0];

uploadimg();

}

}

function takephoto(){

if(uexWidgetOne.platformName == "iOS" || uexWidgetOne.platformName
=="ios"){

uexCamera.cbOpen=function (opCode, dataType, data){

img_url=data;

uploadimg();

}

uexCamera.open(0,50);

}else{

uexCamera.cbOpenInternal=function (opCode, dataType, data){//仅Android

img_url=data;

uploadimg();

}

uexCamera.openInternal(0,50);

}

}

商品详情

商品详情页,买家点击咨询,会跳出输入框,可发表咨询信息;如果是卖家,则不显示底部悬浮窗,可以点击买家发布的咨询信息,在跳出的输入框内回复买家。这里头部轮播图同样使用uexScrollPicture插件,调用uexImage.openBrowser浏览大图,代码如下:

uexScrollPicture.onPicItemClick= function(data){

var count=JSON.parse(data).index;

var len = bigimage.length;

var datas=[];

var url_imgb;

for (var i = 0; i < len; i++) {

url_imgb = api+bigimage[i];

datas[i] ={"src" : url_imgb};

}

var params = {

"displayActionButton" : false,

"displayNavArrows" : false,

"enableGrid" : false,

"startOnGrid" : false,

"startIndex" : count,

data :datas

};

var data = JSON.stringify(params);

uexImage.openBrowser(data);

}

此外,用户还可以将商品分享到微信、朋友圈、QQ好友、QQ空间和新浪微博,调用了uexWeiXin、uexQQ、uexSina插件,这三个都属于第三方插件,使用之前需要到相关网站上申请为开发者,获取到AppId。

购物车

进入购物车页面,如果购物车内没有商品则如右图显示。添加商品到购物车后,点击编辑,头部右侧文字变为完成,底部按钮变成删除,这个部分的代码如下:

function edit(){

var action = $(’#changeEdit’).html();

if (action == ’编辑’) {

$(’#changeEdit’).html(’完成’);

uexWindow.evaluatePopoverScript("cart", "content", "removeUhide()");

} else if (action == ’完成’) {

$(’#changeEdit’).html(’编辑’);

uexWindow.evaluatePopoverScript("cart", "content", "addUhide()");

}

}

我的

这个页面买家卖家订单根据状态不同显示相应的数据,使用appcan.ajax(options)发起ajax请求,获取相应的内容。

时间: 2024-10-08 02:45:51

AppCan开源案例:移动电商 APP《海外购》超详源码的相关文章

Java开源生鲜电商平台-销售管理设计与架构(源码可下载)

Java开源生鲜电商平台-销售管理设计与架构(源码可下载) 说明:在Java开源生鲜电商平台中,销售人员我们称为跟餐饮店老板沟通与下载APP的一类地推人员.(所谓地推指的就是一个一个上门拜访.) 由于销售人员有以下几类特性: 1. 时间随意性,他们并不类似技术或者性质人员,需要天天呆在办公室,他们是需要去外面,时间上具有随意性. 2. 行动随意性 ,他们的行动过于随意,每天也不用来打卡,每天就是按照计划去拜访客户,然后推销生鲜电商APP,让客户来进行下单,那么行为很随意,站在公司的角度 我们是没

Java开源生鲜电商平台-用户表的设计(源码可下载)

Java开源生鲜电商平台-用户表的设计(源码可下载) 说明:由于该系统属于B2B平台,不设计到B2C的架构. 角色分析:买家与卖家. 由于买家与卖家所填写的资料都不一样,需要建立两站表进行维护,比如:buyer,seller. 这样进行数据库的解耦,任何一方的变动都互不影响,但是我想集中式管理,以及一些业务个性化要求,我就增加了一个users表.表结构如下: 账号唯一键,所以做了唯一键索引, 账号的准确性采用手机短信验证. 根据类型区分买家与卖家,登陆的时候,采用的就是users这种表进行维护

电商app功能开发流程+方案

hello,各位大咖!开发一款app到底有哪些流程?从零到完善运营,还有版本择选,方向度可精准?分享分享感想: 一款移动电商APP开发从零到完善运营,大概要经历一下几个步骤流程:1.电商APP开发需求:要开发制作一款移动电商APP,不仅仅要了解用户可以在APP上实现什么功能,还要了解企业为什么要制作一款电商APP,在这个基础上,要了解满足上面的功能,APP需要支持哪些功能.如果APP的功能仅仅与网页端的功能没有太大差异的话,那么开发的意义也不大.当这些确定后,再去跟开发制作公司去谈. 2.电商A

电商APP制作,平台选的好流量自然少不了

随着互联网的崛起和迅猛发展,电子商务在我国的发展也进入了密集发展和创新发展的新阶段.电商巨头阿里巴巴.京东.聚美优品.唯品会等均开发了专属的APP应用,并积累了大量忠实用户,取得了可观的收益.纵观整个电商行业,移动化.互联网化成为大趋势.越来越多的商家开始投身投身于"互联网+"的大潮中,而从事电商运营,电商APP制作是不可或缺的一个环节.但从公司运营成本及团队结构设置等方面考虑,很多企业并没有配备APP应用开发团队.如何才能够拥有一款属于自己的电商APP,成了很多商家的面临的难题. 为

您有一份专业电商APP制作指南

如今电商APP盛行,为了提供客户更方便快捷的服务,也为了更迅速全面的打开自己的市场,不少商家都不约而同的选择了电商APP,作为专业电商APP制作平台,APICloud可以帮助客户快速完成App全链条的开发和上线. APICloud以快速.高效.成熟的移动应用开发技术作为基础,结合服务于数万企业客户的丰富经验,目前已有上万款APP基于APICloud平台开发并发布到苹果等各大应用商店,是目前中国领先的"云端一体"的移动应用云服务提供商. 在电商APP制作方面,APICloud 用标准We

从电商平台促销活动看电商app开发趋势

据亿合科技小编了解到:尽管各大电商平台都进入了品质和品牌时代,但对于消费者来说,低价依然是一个有吸引力的因素.尼尔森<网络购物者趋势研究>报告显示,2016年价格敏感型购物者的比例从15%上升至19%.网店产品低价对购物的影响大幅提升,从去年的42%跃至今年的61%,可见进行电商app开发也是趋之所向,电商促销活动版块的功能更受用户喜欢,这样创造出更受用户喜爱的app网购平台,从而实现利益的转化.能开发提供更多促销活动的电商app显然更具开发优势,常用的促销开发功能形式有优惠券.满多少减多少.

如何设计电商APP首页

我这里分析的"产品陈列设计"并非建立在专业领域的概念,而是通过实战总结的经验. 关于产品陈列设计要把握的几个原则是: 1. 让新用户轻松找到产品,快速熟悉产品目录 2. 让老用户第一时间看到上架的新品 3. 陈列的目的是让用户快速找到自己想找的商品 4. 在APP内形成逛的氛围 5. 在合适的位置推出主打产品! 6. 每个功能模块所展示的产品数量要合理 7. 陈列的图片规格既要节省空间又要清晰表达产品特征! 8. 陈列中巧用文字和数据的影响 9. 不要滥用广告图! 10. 把握陈列中引

Objective-C 【电商APP应用项目-系统分析-详细注释-代码实现】

------------------------------------------- 电商APP应用 *************************************************Goods.h***************************************************** #import <Foundation/Foundation.h> //结构体定义 typedef struct { int year; int month; int day

电商APP开发我们要注意哪些

电商APP是最近几年新兴起的一个行业,且增长速度很快,这都得益于移动流量的暴增,企业纷纷想在这个市场分一杯羹.我们先不说开发电商APP应该注意哪些,先来聊聊开发电商APP能够带来什么?专业APP开发公司小编为您简单介绍一下. 我们可以从几个方面来说说开发电商APP能够带来什么? 1.可以在用户桌面占有一席之地,提高客户对我们的忠诚度; 2.用户手机或者移动设备基本随身携带,碎片时间都可以浏览,增加商业机会; 3.新品信息.促销信息第一时间推送到客户手中,精准营销,占领先机; 4.可以知道用户地理