最近微信小程序也是挺火的了,看了微信官方文檔語法和vue.js有點類似,正好學過vue 也用vue寫過一個商城項目,就嘗試用小程序寫個商城,通常來講你學過vue.js寫個小程序那是很簡單的,小程序和vue.js無非就是路由跳轉、傳參、傳數據.html
若是你想學vue.js能夠來看看我用vue.js寫的一個商城項目 地址在這裏
運行須要安裝微信開發者工具,在開發者工具中打開該項目則可預覽 下載地址
另外:此程序會持續更新 若是覺能夠歡迎各位satr fork Dome地址在這裏 謝謝你們了~~~vue
Page({ /* 頁面的初始數據 */ data: { UserImage: '', Username: '', }, /* 生命週期函數--監聽頁面加載 */ 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' , }) } })
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 }) //若是購物車裏面有該商品那麼他的數量每次加一 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: "加入購物車成功!", duration: 1000 }) //更新緩存數據 wx.setStorageSync("cartItems", cartItems) }, onLoad: function (option){ var homeid = option.id var Homedata = json.homeIndex[homeid]; this.setData({ data: Homedata }) } })
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 //獲取購物車列表 var index = e.currentTarget.dataset.index //獲取當前點擊事件的下標索引 var value = cartItems[index].value //獲取購物車裏面的value值 value++ cartItems[index].value = value; this.setData({ cartItems: cartItems }); this.getsumTotal() wx.setStorageSync("cartItems", cartItems) //存緩存 }, //減 reduce: function (e){ var cartItems = this.data.cartItems //獲取購物車列表 var index = e.currentTarget.dataset.index //獲取當前點擊事件的下標索引 var value = cartItems[index].value //獲取購物車裏面的value值 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 //獲取購物車列表 var index = e.currentTarget.dataset.index; //獲取當前點擊事件的下標索引 var selected = cartItems[index].selected; //獲取購物車裏面的value值 //取反 cartItems[index].selected =! selected; this.setData({ cartItems: cartItems }) this.getsumTotal(); wx.setStorageSync("cartItems", cartItems) }, //刪除 shanchu:function(e){ var cartItems = this.data.cartItems //獲取購物車列表 var index = e.currentTarget.dataset.index //獲取當前點擊事件的下標索引 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", []) }, //合計 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 } } //更新數據 this.setData({ total: sum }) }, })