微信小程序---电商家具入门篇

2018-06-13 admin

微信小程序—电商家具入门篇

今年是小程序很火的一年,所以最近在自学微信小程序,所以打算自己撸一个小程序出来,由于自己才刚刚自学不久。就做了一个相对简单的家具小程序。当然在这其中也遇到了一些问题和bug,在这就和大家分享一下,这样才能帮助更多的朋友。如有不足之处,希望大家提出宝贵的建议哈。这样才能一起成长,一起进步。 u=289489651,2285252710&fm=27&gp=0.jpg

简单介绍一下微信小程序

众所周知,随着越来越多的app出现在了App商城,导致手机下载多了app会导致手机卡,所以这时微信小程序腾空而出。只要用户扫一扫或者搜索一下就能打开应用,减少了我们下载app的次数。 u=296068801,2558057152&fm=27&gp=0.jpg

  • 开发环境: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;
}

1:家具的轮播效果实现

小程序的轮播实现是用了swiper组件,滑块视图容器里面有indicator-dots,autoplay,setinterval等属性,可以设置自动播放,时间间隔。 插入的图片可以用wx:for来循环。

wxml代码:

<swiper class="section "indicator-dots="{{true}}" autoplay="autoplay" setInterval="3000" duration="500">
  <view class="img-box">
    <block wx:for="{{slides}}" wx:key="id">
      <swiper-item>
        <image src="{{item.image}}" mode="aspectFill" />
      </swiper-item>
    </block>
  </view>
</swiper>

我这里把图片放在了js里面遍历。效果如图所示 图片描述

2:navigate的跳转问题

在点击加入购物车以后,加入绑定事件本该跳转到另一个页面的,但是迟迟没有出现效果也没有报错,我以为我拼写或路径有问题,但我检查之后没有问题啊,后来终于发现了一个坑。 这里要跳转的是tabBar的页面,按照默认的跳转是不允许的,查看了一下开发文档才发现了问题的所在。

解决办法:把navigateTo换成switchTab就可以了 跳转有很多种方法,具体可以查看开发文档。跳转页面的api

3:商品如何加入购物车之后如何控制购买商品的数量并计算价格

本来想做的是点击图片进入详情再点击加入购物车就能保存到后台的购物车里 但是由于自学的知识有限,后端目前还没学,只能加入一个绑定事件跳转到购物车。 u=1654774462,4033204537&amp;fm=27&amp;gp=0.jpg

接下来计入正题:如何控制购物车购买的数量和计算总价?先在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++){
      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++){
      // total += carts[i].num *carts[i].price;
      if(carts[i].selected){
        total+= carts[i].num * carts[i].price;

      }
    }
    this.setData({
      totalPrice:total.toFixed(2)
    })
  }

4:如何获取登录微信的用户的头像和信息

  1. 使用wx.getUserInfo直接获取微信头像,昵称。
  2. 我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如微信用户的openid。 我这里是用的第一种方法

wxml代码:

<view class="userinfo">
          <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
          <block wx:else>
            <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
            <text class="userinfo-nickname">{{userInfo.nickName}}</text>
          </block>
        </view>
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
    })
  }

整体效果

图片描述

最后 这个小程序还有一些功能还没有实现,比如购物车,用户信息的保存在后台的问题,以后等自学完后端的一些知识,我还是得把这个小程序完整的做出来,喜欢的话大家可以关注我的github,我们可以一起学习,一起搞基哈,也希望可以给我提出一些宝贵的意见 u=1852459734,3366209779&amp;fm=27&amp;gp=0.jpg

源文件:github地址 期待你的star和fork哦

第一次写文章,项目可能不是很好,表达的也未必清楚,请给新手多一点的鼓励,点个赞,留下你的建议吧

原文链接:https://segmentfault.com/a/1190000015258507

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33916.html

文章标题:微信小程序---电商家具入门篇

相关文章
微信火了HTML5,技术革新才是未来
Html5小游戏自从诞生以来,以其玩法简单、内容娱乐等特点,而深受玩家的欢迎。就像音乐领域的《小苹果》和《最炫名族风》一样,Html5小游戏也曾经有多款神作,在微信朋友圈如病毒式疯传。 微信让H5火了 去年,H5游戏“围住神经猫”上线微信朋...
2015-11-12
JavaScript开发工具
常用的有sublime,webstorm,notepad++等 ...
2015-11-12
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给up...
2017-03-29
五款超实用的开源SVG工具
本文我们将分享5款超实用的开源的SVG工具:   1. SharpVectorGraphics (SVG)   SVG是基于Microsoft .Net开源项目设计而来,是建立在.Net framework上使用SVG的一款应用,支持生成、...
2016-01-13
Ajax入门手册chm
下载地址:Ajax入门手册chm ...
2015-11-12
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
本文实例讲述了JS常见创建类的方法。分享给大家供大家参考,具体如下: Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引...
2017-04-05
15个提高编程技巧的JavaScript工具
JavaScript鑴氭湰搴撴槸涓€涓�棰勫厛鐢↗avaScript璇�瑷€鍐欏ソ鐨勫簱锛屽畠鏂逛究浜嗘垜浠�寮€鍙戝熀浜嶫avaScript鐨勫簲鐢ㄧ▼搴忥紝鐗瑰埆閫傚悎AJAX鍜屽叾浠栦竴浜涗互Web涓轰腑蹇冪殑鎶€鏈�銆侸avaScr...
2015-11-12
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
12个Web设计师必备的Bootstrap工具
作为一位设计师,会经常追寻新鲜有趣的设计工具,这些工具会提高工作的效率,使得工作更有效, 最重要的是使工作变得更方便。非常肯定的说,随着日益增长的工具和应用的数量,设计和开发变得越来越简单了。其中最普遍使用的最终框架 之一是 Bootstr...
2015-12-24
回到顶部