說在前面
從打仗微信小順序到第一次着手完成一個商城小順序,我發明我們怕的不是不會寫,而是不敢着手去寫,每個人都是從無到有,所以英勇踏出我們的第一步吧,看官方文檔去吧騷年!
踏出第一步吧
說的簡樸,那怎樣踏出去呢?在這裏我來分享下我寫商城小順序碰到的一些題目,踩得一些坑。
1、商城小順序的輪播完成
小順序的輪播圖完成真是太輕易了swiper,就是這麼簡樸粗獷。一個滑塊視圖容器,說的簡樸,那我們得注重什麼呢 swiper-item僅可放在</swiper>組件中 indicatorDots: false,用來設置有沒有輪播點,autoplay: false,設置自動播放。wx:for設置圖片的輪迴。詳細的能夠點點這裏看看。
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
<block wx:for="{{movies}}" wx:for-index="index" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
我在這裏直接設置了輪播狀況,圖片放在js里遍歷。
2、搜刮要領
怎樣完成小順序的搜刮呢,我在這裏運用的是正則遍歷搜刮,在這裏就碰到了一個坑
js 婚配字符串的要領有許多
在最先的時刻我直接運用 search()要領
var n = str.search(“Runoob”);
運用這個要領我一向婚配不了,上網看文檔發明運用這個要領會直接把輸入值算作字符串,如許就致使搜刮的難以完成,那怎樣辦?摒棄是不可能摒棄的,那咱繼承干吧,又是一波查資料,終究發明能夠運用test()函數 RegExpObject.test(string)來完成輸入值的遍歷婚配
<view class='search'>
<view class='search-value'>
<input placeholder='搜刮商品' value='{{searchVal}}' bindconfirm="search" bindinput="bindKeyInput"></input>
<view class='clear' wx:if="{{ searchVal != '' }}" bindtap='clear'>
<image src='../../images/clear.png'></image>
</view>
</view>
<view class='search-button' bindtap='search'>
<image src='../../images/search.png'></image>
</view>
</view>
search: function(){
// var pattern = /和/;
// var str = "和";
// console.log(str.search(pattern));
var tem=[];
for(var i=0;i<this.data.goods.length;i++)
{
var re = new RegExp(this.data.searchVal);
if(re.test(this.data.goods[i].title))
{
tem.push(this.data.goods[i]);
}
}
this.setData({
goods : tem
})
},
如許我們就完成了搜刮婚配。
3.商品怎樣到場購物車?
既然咱是一個商城類小順序,那怎樣到場購物車呢?mvvm形式
在到場之前我們是不是是有一個疑問,我在購物車界面怎樣能獵取你商品的信息啊?好難啊?怎樣去做呢?運用mvvm形式
他是將邏輯層數據中的name與視圖層的name進行了綁定,當邏輯層中name的值發生變化的時刻,視圖層的值也會隨之變化。然後視圖層的點擊事宜changeName也是和邏輯層的changeName綁定的,當點擊視圖按鈕的時刻,邏輯層的changeName要領會相應並轉變邏輯層的數據,視圖層的數據又隨之變化。說的彷佛很叼啊,詳細怎樣做呢?咱照樣不太清晰啊
來,我們繼承聊。
不能忘了另有個app.js這個全局js在這裏發揮了中轉站的作用
globalData: {
cartList: [],
}
在app.js內里定義一個全局的空數組,在購物車取值時,我們先把值賦給這個空數組,在取這個值,如許的話我們就能夠獲得這個值。話不多說,看看結果
那代碼是怎樣完成的呢?
addCart: function () {
var good = this.data.good_info;
var cartList = app.globalData.cartList;
var cartItem = {
id: good.id,
name: good.title,
url: good.image,
price: good.price,
num: 1,
select: 'circle',
};
//推斷購物車為空
if (cartList.length > 0) {
//不為空
var index = null;//紀錄id商品在購物車的下標
for (let i = 0; i < cartList.length; i++) {
if(good.id == cartList[i].id){
index = i;
}
}
//假如index即是null,申明第二次增加id商品不在購物車裡,直接Push進去
if(index == null){
cartList.push(cartItem);
}else{
//index不即是Null,那末第二次增加id商品在購物車,num++
cartList[index].num++;
}
} else {
//購物車為空直接Push進去
cartList.push(cartItem);
}
// console.log(cartList);
wx.showToast({
title: '增加勝利',
icon: 'success',
duration: 2000
})
}
})
在這裏我想說的是怎樣完成邏輯呢?最先我碰到一個題目,第二次增加雷同商品時不會再數量上加一,而是由增加了一個新的商品,那末怎樣處理這個題目呢?我們運用了for輪迴的嵌套推斷
在數據中遍歷一次,然後再比較選出商品id做比較再一次遍歷,但是 又碰到一個題目,第一個商品遍歷出來,第二個商品選數量時卻致使遍歷失足,難熬痛苦,那末邏輯怎樣處理呢?
將addCart要領的邏輯重構
第一步照樣推斷購物車是不是為空,保證第一件增加商品勝利
第二步,不為空的狀況,定義一個索引index
然後,遍歷購物車數組,假如good.id==cartList[i].id,把這個i複製給index
遍歷完成后對index推斷
假如index==null,申明第二次增加商品不在購物車,直接push進去
假如不為空,申明第二次增加的商品在購物車,將cartList[index].num++
如許就處理邏輯題目。
4、購物車功用的完成
購物車功用有哪些呢?剖析下,商品的勾選,價錢的盤算,總價盤算,全選功用。來
讓我們逐一完成。
再這裏封裝一個總價,輕易挪用。
遍曆數組,把即選的num 加起來。
countNum: function () {
var that = this
//遍曆數組,把既選中的num加起來
var newList = that.data.list
var allNum = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
allNum += parseInt(newList[i].num)
}
}
parseInt
console.log(allNum)
that.setData({
num: allNum
})
},
//盤算金額要領
count: function () {
var that = this
//思緒和上面一致
//選中的定單,數量*價錢加起來
var newList = that.data.list
var newCount = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
newCount += newList[i].num * newList[i].price
}
}
that.setData({
count: newCount
})
},
再來剖斷全選
allSelect: function (e) {
var that = this
//先推斷如今選中沒
var allSelect = e.currentTarget.dataset.select
var newList = that.data.list
if (allSelect == "circle") {
//先把數組遍歷一遍,然後改掉select值
for (var i = 0; i < newList.length; i++) {
newList[i].select = "success"
}
var select = "success"
} else {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "circle"
}
var select = "circle"
}
that.setData({
list: newList,
allSelect: select
})
//挪用盤算數量要領
that.countNum()
//盤算金額
that.count()
},
不論咱ui有多醜,該有的邏輯咱都有。
5、商品的分類
商品分類中主如果依據商品id推斷挑選種別,在這裏參考了林鑫大神的分類。這裏就不多空話,主如果界面的設想
6、用戶我的table功用的完成
在這裏我想說的是兄弟,在這裏咱能夠偷下懶了,為何這麼說呢?咱有微信UI
不bb直接上地點https://github.com/Tencent/weui-wxss
同時在這方面有贊也有個,老例子https://github.com/youzan/zanui-weapp
7、咱還會碰到哪寫題目呢?
頁面的跳轉題目
你是不是是有時刻定名綁定了頁面卻跳轉不過去呢?是的,有的,那為何會湧現這類狀況呢?
官方文檔寫的很清晰
- 跳轉tabBar
{
"tabBar": {
"list": [{
"pagePath": "index",
"text": "首頁"
},{
"pagePath": "other",
"text": "其他"
}]
}
}
wx.switchTab({
url: '/index'
})
- 跳轉運用內界面 wx.navigateTo
wx.navigateTo({
url: 'test?id=1'
})
//test.js
Page({
onLoad: function(option){
console.log(option.query)
}
})
- 跳轉革新主頁
wx.reLaunch({
url: 'test?id=1'
})
//test.js
Page({
onLoad: function(option){
console.log(option.query)
}
})
咱詳細的能夠看看文檔
前端數據怎樣得?
有時刻我們並不能獲得數據,寫在代碼里有顯得太冗餘,不怕嘗嘗Easy mock本身寫個假數據。
scoll-view scoll-x scoll-y
scoll-y人人都曉得scoll-x實在就是橫向划屏,須要注重的是圖片題目。
說再多都是虛的咱貼個gitHub地點
既然都看到這裏了,咱點個贊再關注一波吧老鐵。
代碼固然另有許多不足的處所,另有許多功用須要完美,作為一個年青的順序猿,咱也算走出了第一步,俗語說萬事開首,搖搖晃晃的總得有個最先
作為前端小白手藝固然不是很好,願望在這裡有你們的陪同,我一點點紀錄,你們一點點見證。