当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 小程序商城开发教程入门篇

小程序商城开发教程入门篇

2018-08-29 12:02 来源: 霸界科技

摘要:微商城的简易,无需下载app商城的简便,让许多传统电商逐渐开始开发微商城,如今加上时微信小程序腾空而出。只要用户扫一扫或者搜索一下就能打开应用,小程序商城开发更是满足...

期权保本理财
  微商城的简易,无需下载app商城的简便,让许多传统电商逐渐开始开发微商城,如今加上时微信小程序腾空而出。只要用户扫一扫或者搜索一下就能打开应用,小程序商城开发更是满足了传统电商的需求。下面以一个普通的家具商城小程序为例,为大家介绍小程序商城开发教程入门篇
 
小程序商城开发教程入门篇
 
  小程序商城开发教程入门篇
 
  开发环境:WXML(HTML),WXSS(CSS),Javascript
 
  开发工具:vscode,微信开发者工具
 
  开发流程:下载微信开发者工具之后注册一下就会有自己的AppID,微信小程序有官方的微信小程序开发文档 开发文档
 
  代码实现,主页东西也不多,主要是布局问题。 wxss代码:
 
  .img-box image{
 
  width: 100%;
 
  height: 100%;
 
  }
 
  .img-box image:after{
 
  content: ;
 
  position: absolute;
 
  bottom: 0;
 
  width: 100%;
 
  color: #fff;
 
  padding: 50px 20px;
 
  }
 
  家具的轮播效果实现
 
  小程序的轮播实现是用了swiper组件,滑块视图容器里面有indicator-dots,autoplay,setinterval等属性,可以设置自动播放,时间间隔。 插入的图片可以用wx:for来循环。
 
  navigate的跳转问题
 
  在点击加入购物车以后,加入绑定事件本该跳转到另一个页面的,但是迟迟没有出现效果也没有报错,我以为我拼写或路径有问题,但我检查之后没有问题啊,后来终于发现了一个坑。 这里要跳转的是tabBar的页面,按照默认的跳转是不允许的,查看了一下开发文档才发现了问题的所在。
 
  解决办法:把navigateTo换成switchTab就可以了 跳转有很多种方法,具体可以查看开发文档。
 
  商品如何加入购物车之后如何控制购买商品的数量并计算价格
 
  本来想做的是点击图片进入详情再点击加入购物车就能保存到后台的购物车里 但是由于自学的知识有限,后端目前还没学,只能加入一个绑定事件跳转到购物车。
 
  接下来计入正题:如何控制购物车购买的数量和计算总价?先在js里面定义一个cart空的数组,我们先把这个值赋给这个空数组,之后再取这个值。之后给商品的状态默认为选择状态,点击一下,就可以把状态变为取消。话不多说,之后计算出选择商品的总价。
 
  js代码:
 
  selectList(e){
 
  let selectAllStatus = this.data.selectAllStatus;
 
  const index=e.currentTarget.dataset.index;
 
  let carts=this.data.carts;
 
  const selected=carts[index].selected;
 
  carts[index].selected=!selected;
 
  selectAllStatus = carts[index].selected;
 
  // if( carts[index].selected=!selected){
 
  //   selectAllStatus:false;
 
  // }
 
  this.setData({
 
  carts,
 
  selectAllStatus,
 
  });
 
  this.getTotalPrice();
 
  },
 
  deleteList(e) {
 
  const index = e.currentTarget.dataset.index;
 
  let carts = this.data.carts;
 
  carts.splice(index,1);
 
  this.setData({
 
  carts: carts
 
  });
 
  if(!carts.length){
 
  this.setData({
 
  hasList: false
 
  });
 
  }else{
 
  this.getTotalPrice();
 
  }
 
  },
 
  addCount (e){
 
  const index = e.currentTarget.dataset.index;
 
  let carts = this.data.carts;
 
  let num = carts[index].num;
 
  num++;
 
  carts[index].num = num
 
  this.setData({
 
  carts
 
  })
 
  this.getTotalPrice();
 
  },
 
  minuCount(e){
 
  const index = e.currentTarget.dataset.index;
 
  let carts = this.data.carts;
 
  let num = carts[index].num;
 
  if(num<=1) return false;
 
  num--;
 
  carts[index].num = num
 
  this.setData({
 
  carts
 
  });
 
  this.getTotalPrice();
 
  },
 
  selectAll(e){
 
  let selectAllStatus = this.data.selectAllStatus;
 
  selectAllStatus = !selectAllStatus;
 
  let carts =this.data.carts;
 
  for(let i=0;i
 
  if( carts[i].selected=!selectAllStatus){
 
  selectAllStatus:false
 
  }
 
  carts[i].selected=selectAllStatus;
 
  }
 
  this.setData({
 
  carts,
 
  selectAllStatus
 
  })
 
  this.getTotalPrice();
 
  },
 
  getTotalPrice(){
 
  let carts = this.data.carts;
 
  let total = 0;
 
  for(let i =0;i
 
  // total += carts[i].num *carts[i].price;
 
  if(carts[i].selected){
 
  total+= carts[i].num * carts[i].price;
 
  }
 
  }
 
  this.setData({
 
  totalPrice:total.toFixed(2)
 
  })
 
  }
 
  如何获取登录微信的用户的头像和信息
 
  使用wx.getUserInfo直接获取微信头像,昵称。
 
  我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如微信用户的openid。 我这里是用的第一种方法
 
  js代码:
 
  onLoad: function () {
 
  if (app.globalData.userInfo) {
 
  this.setData({
 
  userInfo: app.globalData.userInfo,
 
  hasUserInfo: true
 
  })
 
  } else if (this.data.canIUse){
 
  // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
 
  // 所以此处加入 callback 以防止这种情况
 
  app.userInfoReadyCallback = res => {
 
  this.setData({
 
  userInfo: res.userInfo,
 
  hasUserInfo: true
 
  })
 
  }
 
  } else {
 
  // 在没有 open-type=getUserInfo 版本的兼容处理
 
  wx.getUserInfo({
 
  success: res => {
 
  app.globalData.userInfo = res.userInfo
 
  this.setData({
 
  userInfo: res.userInfo,
 
  hasUserInfo: true
 
  })
 
  }
 
  })
 
  }
 
  },
 
  getUserInfo: function(e) {
 
  console.log(e)
 
  app.globalData.userInfo = e.detail.userInfo
 
  this.setData({
 
  userInfo: e.detail.userInfo,
 
  hasUserInfo: true
 
  })
 
  }
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088