文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

小程序商城开发实例分析

2023-06-26 08:27

关注

这篇文章主要介绍了小程序商城开发实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇小程序商城开发实例分析文章都会有所收获,下面我们一起来看看吧。

开发环境: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<carts.length;i++){< span="">
      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<carts.length;i++){< span="">
      // 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
    })
  }

关于“小程序商城开发实例分析”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“小程序商城开发实例分析”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯