小程序模板網(wǎng)

微信小程序-高仿vivo商城

發(fā)布時(shí)間：2018-01-06 11:39 所屬欄目：小程序開(kāi)發(fā)教程

說(shuō)明最近微信小程序也是挺火的了，看了微信官方文檔語(yǔ)法和vue.js有點(diǎn)相似，正好學(xué)過(guò)vue 也用vue寫(xiě)過(guò)一個(gè)商城項(xiàng)目，就嘗試用小程序?qū)憘€(gè)商城，一般來(lái)說(shuō)你學(xué)過(guò)vue.js寫(xiě)個(gè)小程序那是很簡(jiǎn)單的，小程序和vue.js無(wú)非就是路 ...

 
 
 

說(shuō)明

最近微信小程序也是挺火的了，看了微信官方文檔語(yǔ)法和vue.js有點(diǎn)相似，正好學(xué)過(guò)vue 也用vue寫(xiě)過(guò)一個(gè)商城項(xiàng)目，就嘗試用小程序?qū)憘€(gè)商城，一般來(lái)說(shuō)你學(xué)過(guò)vue.js寫(xiě)個(gè)小程序那是很簡(jiǎn)單的，小程序和vue.js無(wú)非就是路由跳轉(zhuǎn)、傳參、傳數(shù)據(jù)。

如果你想學(xué)vue.js可以來(lái)看看我用vue.js寫(xiě)的一個(gè)商城項(xiàng)目 地址在這里 運(yùn)行需要安裝微信開(kāi)發(fā)者工具，在開(kāi)發(fā)者工具中打開(kāi)該項(xiàng)目則可預(yù)覽 下載地址 另外：此程序會(huì)持續(xù)更新 如果覺(jué)可以歡迎各位satr fork Dome地址在這里 謝謝大家了~~~

圖片預(yù)覽

 

微信登陸

Page({

  /* 頁(yè)面的初始數(shù)據(jù) */
  data: {
    UserImage: '',
    Username: '',
  },
  
  /* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */
  onLoad: function (options) {
    var _this=this
    wx.getUserInfo({
      success:function(res){
        _this.setData({
          UserImage: res.userInfo.avatarUrl,
          Username: res.userInfo.nickName
        })
      }
    })
  },
  about:function(){
    wx.navigateTo({
      url: '../../pages/about/about' ,
    })
  }
})

加入購(gòu)物車(chē)

var json = require('../../data/Home_data.js')

Page({
  data:{
    HomeIndex:0
  },
  goPay:function(e){
    var Id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: '../../pages/pay/pay?id=' + Id
    })
  },
  boxtwo: function (e) {
    var index = parseInt(e.currentTarget.dataset.index) 
    this.setData({
      HomeIndex: index
    })
  },
  addcart: function (e) {
    var cartItems = wx.getStorageSync("cartItems") || []
    var exist = cartItems.find(function (el) {
      return el.id == e.target.dataset.id
    })

    //如果購(gòu)物車(chē)?yán)锩嬗性撋唐纺敲此臄?shù)量每次加一 if (exist){
      exist.value = parseInt(exist.value) + 1
    }else{
      cartItems.push({
        id: e.target.dataset.id,
        title:e.target.dataset.title,
        image: e.target.dataset.image,
        price: e.target.dataset.price,
        value:1,
        selected:true
      })
    }

    wx.showToast({
      title: "加入購(gòu)物車(chē)成功！",
      duration: 1000
    })
        
    //更新緩存數(shù)據(jù)
    wx.setStorageSync("cartItems", cartItems)

  },

  onLoad: function (option){
    var homeid = option.id
    var Homedata = json.homeIndex[homeid];
    this.setData({
      data: Homedata
    })
  }

})

購(gòu)物車(chē)功能

var json = require('../../data/Home_data.js')

Page({
  data: {
    cartItems:[],
    total:0,
    CheckAll:true
  },
  onLoad:function(e){
    
  },
   onShow: function () {
     var cartItems = wx.getStorageSync("cartItems")
     this.setData({
       cartList: false,
       cartItems: cartItems
     })
     this.getsumTotal()
     
   },

  //選擇
   select:function(e){
    var CheckAll = this.data.CheckAll;
    CheckAll = !CheckAll
    var cartItems = this.data.cartItems

    for(var i=0;i<cartItems.length;i++){
      cartItems[i].selected = CheckAll
    }

    this.setData({
      cartItems: cartItems,
      CheckAll: CheckAll
    })
    this.getsumTotal()
   },
   add:function (e) {
     var cartItems = this.data.cartItems   //獲取購(gòu)物車(chē)列表 var index = e.currentTarget.dataset.index //獲取當(dāng)前點(diǎn)擊事件的下標(biāo)索引 var value = cartItems[index].value  //獲取購(gòu)物車(chē)?yán)锩娴膙alue值
     
     value++
     cartItems[index].value = value;
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()
     
     wx.setStorageSync("cartItems", cartItems)  //存緩存
   },
   
    //減
   reduce: function (e){
     var cartItems = this.data.cartItems  //獲取購(gòu)物車(chē)列表 var index = e.currentTarget.dataset.index  //獲取當(dāng)前點(diǎn)擊事件的下標(biāo)索引 var value = cartItems[index].value  //獲取購(gòu)物車(chē)?yán)锩娴膙alue值 if(value==1){
       value --
       cartItems[index].value = 1
     }else{
       value --
       cartItems[index].value = value;
     }
     this.setData({
       cartItems: cartItems
     });
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },
  
    // 選擇
   selectedCart:function(e){
     
    var cartItems = this.data.cartItems   //獲取購(gòu)物車(chē)列表 var index = e.currentTarget.dataset.index;  //獲取當(dāng)前點(diǎn)擊事件的下標(biāo)索引 var selected = cartItems[index].selected;    //獲取購(gòu)物車(chē)?yán)锩娴膙alue值 //取反
    cartItems[index].selected =! selected;
    this.setData({
      cartItems: cartItems
    })
    this.getsumTotal();   
    wx.setStorageSync("cartItems", cartItems)
   },

  
   

   //刪除
   shanchu:function(e){
     var cartItems = this.data.cartItems  //獲取購(gòu)物車(chē)列表 var index = e.currentTarget.dataset.index  //獲取當(dāng)前點(diǎn)擊事件的下標(biāo)索引
     cartItems.splice(index,1)
     this.setData({
       cartItems: cartItems
     });
     if (cartItems.length) {
       this.setData({
         cartList: false
       });
     }
     this.getsumTotal()
     wx.setStorageSync("cartItems", cartItems)
   },

      //提示
   go:function(e){
     this.setData({
       cartItems:[]
     })
     wx.setStorageSync("cartItems", [])
   },


   //合計(jì)
   getsumTotal: function () {
     var sum = 0 for (var i = 0; i < this.data.cartItems.length; i++) {
       if (this.data.cartItems[i].selected) {
         sum += this.data.cartItems[i].value * this.data.cartItems[i].price
       }
     }
     //更新數(shù)據(jù) this.setData({
       total: sum
     })
   },
})


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址：http://www.u-renovate.com/wxmini/doc/course/18399.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)：800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)
AI智能客服 ×