返回 登录
0

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

基于AppCan开发的移动电商App,详细源码如下:

图片描述

项目实现功能

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

项目使用插件
图片描述

整个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请求,获取相应的内容。

详细案例讲解文档请戳:http://newdocx.appcan.cn/newdocx/docx?type=1726_1720

评论