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请求,获取相应的内容。
AppCan开源案例：移动电商 APP《海外购》超详源码相关推荐
- Java开源生鲜电商平台-深刻理解电商的库存架构与解决方案(源码可下载）
https://www.cnblogs.com/jurendage/p/9227283.html 说明:一般电商的库存都是跟SKU相关联的,那么怎么样才能进行SKU的库存管理呢?有以下几种方式与方法: ...
- 计算机毕业设计Java基于的电商平台的设计与实现(源码+系统+mysql数据库+lW文档)
计算机毕业设计Java基于的电商平台的设计与实现(源码+系统+mysql数据库+lW文档) 计算机毕业设计Java基于的电商平台的设计与实现(源码+系统+mysql数据库+lW文档) 本源码技术栈: ...
- 计算机毕业设计ssm电商后台系统c83si系统+程序+源码+lw+远程部署
计算机毕业设计ssm电商后台系统c83si系统+程序+源码+lw+远程部署 计算机毕业设计ssm电商后台系统c83si系统+程序+源码+lw+远程部署 本源码技术栈: 项目架构:B/S架构 开发语言: ...
- SpringBoot+SpringCloud+Mybatis+Vue 电商项目实战，附视频+源码+文档，包含所有主流技术栈。...
大家好,我是树哥. 今天给大家分享一个电商项目--- 畅购商城.项目采用前后端分离的技术架构. 采用SpringBoot+SpringCloud+Mybatis+Vue为主要技术栈,包括了大型商城的主 ...
- SpringBoot+SpringCloud+Mybatis+Vue电商项目实战，附视频+源码+文档，包含所有主流技术栈...
今天给大家分享一个电商项目--- 畅购商城.项目采用前后端分离的技术架构. 采用SpringBoot+SpringCloud+Mybatis+Vue为主要技术栈,包括了大型商城的主要功能.难点功能以及 ...
- 无货源亚马逊跨境电商erp系统开发_独立源码_采集铺货
一.什么是亚马逊跨境电商erp系统? 亚马逊无货源跨境电商ERP系统为卖家提供的电子商务解决方案,帮助管理在亚马逊跨境电商平台上的业务操作.欢迎探讨 二.功能框架 多语言切换 出海跨境 无货源 商品上 ...
- 电商淘宝补单系统源码程序的开发与部署
一.电商淘宝补单的定义 电商平台业界人士常谈到补单一词,那么什么是他们常说的电商淘宝补单呢?作为一个入门级别的电商小白需要看一看了解了解. 电商补单是指根据平台算法和每日订单计划,根据基数触发流量推荐 ...
- 计算机毕业设计SSM电商直播订单管理系统【附源码数据库】
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- ionic3 php 电商视频,ionic3仿京东商城源码
[实例简介] ionic3仿京东商城源码,非常好用的ionic3学习参考资料. [实例截图] [核心代码] ionic3仿京东商城源码 ├── README.md ├── config.xml ├── ...
最新文章
- Android JNI 第三篇 Java参数类型与本地参数类型对照
- 找出两个数组相同的元素
- Linux卸载minikube命令整理
- 每周分享第 19 期（20190426）
- 关于tcmalloc\malloc和new
- mysql全文索引中文问题的解决（转）
- java验证码限流_Java实现系统限流
- 如何建立自己的工作库，把分散信息有效整理？
- JavaSE复习（二）集合
- 基于Linux的系统的文件/文件夹的权限
- 十二客推出新版邮箱批量注册
- 【BZOJ4837】LRU算法 [模拟]
- 职业规划计算机专业1500字,【计算机职业生涯规划书2000字】_计算机专业职业生涯规划书2000字...
- 计算机二级C语言选择题总结
- QListView自定义Item
- Unity 预编译选项
- oracle数据库的大字段,Oracle数据库大字段问题
- 在线免费一键将头像转换卡通形象
- 【PAT乙级】1020 月饼
- python复制单元格格式太多_你觉得复制粘贴excel浪费时间，那你该学这些技巧