6.18將近降臨傢具電商大戰劍拔弩張

微信小順序&＃8212;電商傢具入門篇

本年是小順序很火的一年，所以最近在自學微信小順序，所以盤算本身擼一個小順序出來，因為本身才方才自學不久。就做了一個相對簡樸的傢具小順序。固然在這个中也碰到了一些題目和bug,在這就和人人分享一下，如許才協助更多的朋儕。若有不足之處，願望人人提出珍貴的發起哈。如許才一同生長，一同提高。

簡樸引見一下微信小順序

盡人皆知，跟着越來越多的app湧現在了App商城，致使手機下載多了app會致使手機卡，所以這時刻微信小順序騰空而出。只需用戶掃一掃或許搜刮一下就能夠翻開運用，減少了我們下載app的次數。

• 開闢環境：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代碼：

我這裏把圖片放在了js內里遍歷。結果如圖所示

2：navigate的跳轉題目

在點擊到場購物車今後，到場綁定事宜本該跳轉到另一個頁面的，然則遲遲沒有湧現結果也沒有報錯，我以為我拼寫或途徑有題目，但我搜檢今後沒有題目啊，厥後終究發現了一個坑。 這裏要跳轉的是tabBar的頁面，根據默許的跳轉是不允許的，檢察了一下開闢文檔才發現了題目的地點。

解決辦法：把navigateTo換成switchTab就能夠夠了 跳轉有許多種方法，詳細能夠檢察開闢文檔。跳轉頁面的api

3：商品怎樣到場購物車今後怎樣掌握購置商品的數目並盤算價錢

原本想做的是點擊圖片進入概況再點擊到場購物車就能夠保留到背景的購物車裡 然則因為自學的學問有限，後端現在還沒學，只能到場一個綁定事宜跳轉到購物車。

接下來計入正題：怎樣掌握購物車購置的數目和盤算總價？先在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 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 // 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代碼：


獵取頭像昵稱


{{userInfo.nickName}}


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，我們能夠一同進修，一同搞基哈，也願望能夠給我提出一些珍貴的看法

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

第一次寫文章，項目能夠不是很好，表達的也未必清晰，請給新手多一點的勉勵，點個贊，留下你的發起吧