您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
微信小程序實戰(一)之仿美麗(lì)說
發表時間:2021-3-31
發布人:葵宇科技
浏覽次數:59
被美麗(lì)說少(shǎo)女粉吸引,就想着自己也寫一個(gè)來練練手,正好最近在學習微信小程序。接下(xià)來讓我們分享一下(xià)我的學習曆程吧!
選題
其實糾結了好久該仿什麼,看到别人都寫的差不多了,自己卻還沒有動(dòng)手,很着急,那兩天一直在思考在查找,弄得自己特别煩躁,後來想明白了,其實寫什麼都不要緊,關(guān)鍵在于這個(gè)過程中(zhōng)學到了什麼,之前覺得要選一個(gè)看起來高大上的小程序,其實不然,隻要自己喜歡,願意認真的去完成它,它就是值得你(nǐ)去做的。好啦,我們還是一起來看看我項目吧!!!
已實現功能
- 圖片自動(dòng)切換
- 頁面跳轉
- 加入購物車(chē)
- 商(shāng)品數量的增減
- 商(shāng)品展示
- 使用easy-mock獲取數據
部分功能展示
tabBar切換
加入購物車(chē)
購物車(chē)界面
頁面跳轉
部分功能介紹
圖片自動(dòng)切換
<swiper class="page-header" indicator-dots="true" autoplay="true" interval="2000" duration="1000">
<swiper-item>
<image src="static/picture/file_59c081abe9cff.png" mode="aspectFill" bindtap="swiperView1"/>
</swiper-item>
<swiper-item>
<image src="static/picture/file_59b102f038b65.png" mode="aspectFill" bindtap="swiperView2"/>
</swiper-item>
</swiper>
使用swiper标簽實現圖片輪播,indicator-dots為小圓點,autoplay為true是圖片自動(dòng)切換。微信小程序的組件真的很強大,以前寫圖片切換功能都好麻煩,小圓點的切換都要自己寫。
加入購物車(chē)
wxml
<view class="buy-head">
<image src="{{good.img}}" style="width:375px;height:360px;"></image>
</view>
<view class="buy-body">
<view class="title"><text>{{good.name}}</text></view>
<view class="price"><text>¥{{good.price}}</text></view>
<view class="count"><text>庫存:{{good.count}}</text></view>
<view class="freight"><text>運費:{{good.freight}}</text></view>
</view>
<view class="buy-evaluate">
<text class="line"></text>
<text class="text">評價</text>
<text class="line"></text>
</view>
<view class="evaluate-content">
<text class="text">評價(0)</text>
<text class="line"></text>
</view>
<view class="buy-details">
<text class="line"></text>
<text class="text">詳情</text>
<text class="line"></text>
</view>
<view class="details-content">
<text class="text">産品詳情</text>
<text class="line"></text>
<text class="name">{{good.name}}</text>
</view>
<view class="buy-foot">
<view class="cart" bindtap="cartView">
<image src="../../images/cart2.png" style="width:50rpx;height:50rpx;"></image>
<text>購物車(chē)</text>
</view>
<view class="shop" bindtap="shopView">
<image src="../../images/shop.png" style="width:50rpx;height:50rpx;"></image>
<text class="text">店鋪</text>
</view>
<view class="addCart" bindtap="addInCart" id="{{index}}">
<text>加入購物車(chē)</text>
</view>
<view class="buy" bindtap="buyBtn">
<text>立即購買</text>
</view>
</view>
js
addInCart: function (e) {
console.log( app.globalData.id);
console.log(e);
const good = this.data.good; // 根據index,判斷用戶點擊了哪個(gè)商(shāng)品加入購物車(chē)
const cart = app.globalData.cartList; // 獲取購物車(chē)列表
cart.push(good); // 用戶選擇商(shāng)品加入購物車(chē)後,将該商(shāng)品加入購物車(chē)列表
console.log(cart);
console.log(app.globalData.cartList);
wx.showModal({
title: '是否加入購物車(chē)?',
content:'數量為1',
duration: 2000
})
},
app.js
globalData: {
id:null,
cartList:[]
}
這個(gè)功能其實困擾了我一下(xià),還去求助了同學(無奈),起初問(wèn)題就是當點擊一件商(shāng)品時,不知道怎麼讓另一個(gè)界面獲取到這個(gè)信息,後來同學告訴我要設置一個(gè)id,并且是在全局上設置id,當點擊某件商(shāng)品時給id賦值,這樣顯示商(shāng)品信息的頁面就可(kě)以通(tōng)過這個(gè)id來展示這件商(shāng)品。
購物車(chē)商(shāng)品數量增減功能
wxml 這裡引用了weui框架,使用了mvvm功能
<view class="weui-cells">
<block wx:for="{{goodsList}}" wx:key="index" data-index="index">
<view class="weui-cell weui-cell_assess">
<view class="weui-cell__hd">
<icon type="success" color="#ff7100"></icon>
</view>
<view class="weui-cell__bd">
<image src="{{item.img}}" />
</view>
<view class="weui-cell__ft">
<text class="name">{{item.name}}</text>
<text class="price">價格:¥{{item.price}}</text>
<view class="count">
<text class="reduce" bindtap="reduceCount" id="{{index}}">-</text>
<text class="number">{{item.num}}</text>
<text class="add" bindtap="addCount" id="{{index}}">+</text>
</view>
</view>
</view>
</block>
</view>
wx:for 在這裡是循環數組,key設為index,這樣子(zǐ)我們就不用重複定義那麼多的view。 雖然說初學者自己寫原生代碼會提升的快點,可(kě)是還是要學會使用框架的,框架會給我們帶來便利,不過這個(gè)項目中(zhōng)wxss大部分都還是自己一點點磨出來的,其實很痛苦,但也從中(zhōng)學到了很多東西。 js
addCount:function (e) {
var that = this;
console.log(e);
const goodId = e.currentTarget.id;
console.log(that.data.goodsList[goodId]);
that.data.goodsList[goodId].num++;
console.log(that.data.goodsList[goodId]);
this.setData({
goodsList: that.data.goodsList
})
this.sumMoney();
},
// 減少(shǎo)商(shāng)品數量
reduceCount: function(e) {
var that = this;
const goodId = e.currentTarget.id;
// console.log(that.data.goodsList[goodId]);
if(that.data.goodsList[goodId].num <= 1) {
that.data.goodsList[goodId].num = 1;
wx.showModal({
title: '數量小于1',
content: '不允許操作',
duration: 2000
})
} else {
that.data.goodsList[goodId].num--;
}
// console.log(that.data.goodsList[goodId]);
this.setData({
goodsList: that.data.goodsList
})
this.sumMoney();
},
// 計算所有商(shāng)品的錢數
sumMoney: function() {
var count = 0;
const goods = this.data.goodsList;
console.log(goods);
for(let i = 0; i < goods.length; i++) {
count += goods[i].num*goods[i].price;
}
this.setData({
sum: count
})
}
給界面上的加減号添加了點擊事件,通(tōng)過獲取id來判斷操作的是哪件商(shāng)品,進而使後台數據同步。 有個(gè)重點需要說說!! var that = this; 這就涉及到this的指向問(wèn)題了,在增減函數中(zhōng),this的指向會發生改變,所以需要先把它賦值給that。 this真的很重要,需要把它弄得透徹,這樣子(zǐ)在敲代碼時才不會暈頭轉向。
easy-mock獲取數據
// 獲取商(shāng)品信息
onLoad: function () {
wx.request({
url: "https://www.easy-mock.com/mock/5a27c7a27bf3ee170dc24b18/buygoods/buygoods",
success: (res) => {
console.log(res.data.data.goods);
this.setData({
goods: res.data.data.goods
})
}
})
}
})
總結
通(tōng)過這次的項目,學到了很多,首先就是需要靜下(xià)心來,遇到不懂學會查文(wén)檔,自學能力很重要,遇到bug也不要急,慢慢調試,一步一步跟蹤,需要耐心和(hé)細心。在這個(gè)過程中(zhōng)發現自己還有很多地方不足,查文(wén)檔的能力,解決問(wèn)題的能力,代碼規範等等,都有待加強。 做每件事都需要給自己定個(gè)目标和(hé)結束時間,不然一拖再拖,人都是有惰性的,需要逼自己一把,才能有提升。 這個(gè)項目不會停下(xià),還會不斷改善,還有很多功能沒有寫,還有很多的知識沒有學習,作為一個(gè)初學者還有很長的路(lù)要走,堅持吧,總會看到曙光~~~:grin:
最後附上這個(gè)項目的github地址和(hé)個(gè)人的聯系方式,一起學習,一起交流,一起進步 項目地址:https://github.com/KingJons/beautiful
如(rú)果覺得不錯的話,給個(gè)小星星鼓勵一下(xià)吧!