微信小程序-高仿vivo商城
發布時間：2018-01-06 11:39 所屬欄目：小程序開發教程
說明最近微信小程序也是挺火的了，看了微信官方文檔語法和vue.js有點相似，正好學過vue 也用vue寫過一個商城項目，就嘗試用小程序寫個商城，一般來說你學過vue.js寫個小程序那是很簡單的，小程序和vue.js無非就是路 ...
說明
最近微信小程序也是挺火的了，看了微信官方文檔語法和vue.js有點相似，正好學過vue 也用vue寫過一個商城項目，就嘗試用小程序寫個商城，一般來說你學過vue.js寫個小程序那是很簡單的，小程序和vue.js無非就是路由跳轉、傳參、傳數據。
如果你想學vue.js可以來看看我用vue.js寫的一個商城項目 地址在這里 運行需要安裝微信開發者工具，在開發者工具中打開該項目則可預覽 下載地址 另外：此程序會持續更新 如果覺可以歡迎各位satr fork Dome地址在這里 謝謝大家了~~~
圖片預覽
微信登陸
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
})
},
})
