618購物節來襲，電商陪你浪浪浪

前言

購物節又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小夥伴們準備好買買買了嗎！！！讓我看看我還多少餘額哈！（滿心期待(*￣︶￣)）


（10秒後......）

好吧我仍是寫個電商小程序過過癮好了。[冷漠臉]


咳咳，讓咱們進入正題。本人做爲一個前端新手，終於完成了一個小項目——電商平臺的開發——以此文記錄一下個人開發歷程，但願在本身總結的同時也能幫助到其餘小夥伴。（你們一塊兒加油啦~）

詳細介紹

一、主頁

話很少說先上動圖




           （！上錯了上錯了！圖在下面在下面！！！看官們千萬別棄文！[一本正經臉]）

主頁包括導航欄、輪播圖、圖標導航（中間那部分不知道應該怎麼形容。。）以及底下用wx:for循環的商品列表。

• 導航欄

導航欄用的scroll-view組件，設置其水平方向滑動，點擊到的字體會變換樣式。並且，導航欄點擊不一樣的類別會將主頁替換成不一樣的結構，這就要將最開始的主頁結構隱藏起來。我在data中設置 curTag: 0 （默認選中熱門類別），點擊各個類別會動態改變curTag值；再經過wx:if="{{curTag == 0}}"的判斷來隱藏結構。


代碼以下：

wxml

    <view class="Block1">
        <scroll-view class="block1" scroll-x="true">
            <view wx:for="{{tabblock}}" data-id="{{index}}" class="blk1tab {{curNav == index? 'selected': ''}}" bindtap="tabClick">{{item.name}}</view>
        </scroll-view>
        <block wx:if="{{curTag == 1}}"><include src="../one/one"/></block>
    </view>
<br>wxss

    .block1 .blk1tab {
        display: inline-block;
        font-size: 22rpx;
        color: #58595b;
        margin: auto 14rpx;
        padding-top: 20rpx;
        border-bottom: 2rpx solid transparent;
    }
    .block1 .selected {
        color: red;
        border-color: red;
    }
<br>js

    tabClick: function(e) {
        var id = e.currentTarget.dataset.id;
        this.setData({
            curNav: id,
            curTag: id
        });
    },
<br>

• 圖標導航

圖標來自於[iconfont-阿里巴巴矢量圖標庫](http://www.iconfont.cn/)<br><br>
圖標導航用的也是scroll-view組件，具體講一下導航滑動時，下方紅線進度條跟進的實現。<br>
紅線移動便是要動態改變它在水平方向的位置，這是經過scroll-view組件中bindscroll事件實現的；事件觸發時可在detail中查詢到scrollLeft範圍，根據範圍再設置紅線相應位置便可。<br><br>

代碼以下：


wxml

<scroll-view class="scroll-view" scroll-x="true" bindscroll="scrollMove">
        <view class="block3_blk">
            <block wx:for="{{blkpic1}}">
                <navigator class="blk3pic">
                    <image src="{{item.src}}" class="blkImage" />
                    <view class="blk3title">{{item.title}}</view>
                </navigator>
            </block>
        </view>
        <view class="block3_blk">
            <block wx:for="{{blkpic2}}">
                <navigator class="blk3pic">
                    <image src="{{item.src}}" class="blkImage" />
                    <view class="blk3title">{{item.title}}</view>
                </navigator>
            </block>
        </view>
    </scroll-view>
    <view class="scroll-line">
        <view class="scrollMove" style="left:{{viewleft}}rpx"></view>
    </view>
<br>js

    scrollMove: function(e) {
        var left = e.detail.scrollLeft;
        this.setData({
        viewleft: left
        })
    },

二、商品詳情頁

詳情頁有輪播圖、彈框和自定義的tabBar；輪播圖我就不提了，下面總結下彈框和tabBar的實現。

• 自定義tabBar

要將tabBar固定在頁面底部，只需在樣式中將position設爲fixed，再設置好left和bottom便可。值得注意的是，此處使用navigator標籤跳轉到tabBar首頁，默認的跳轉方式無法實現；須要將navigator的open-type設爲switchTab。


wxml以下：

<navigator class="tabBar_box tabbox" url="../index/index" open-type="switchTab">
        <image class="tab_image" src="../../images/Gshouye.png"></image>
        <view class="tab_name">首頁</view>
    </navigator>
<br>

• 自定義彈框

彈框這部分是兩個結構，前面的信息面和後面透明的蒙層。彈框也是用fixed固定住，它的彈出效果可調用小程序api中的wx.createAnimation來實現。彈框彈出後，點擊蒙層能夠退出彈框；而在這裏我還作了一個小細節：彈出後詳情頁不可滾動。<br><br>
貼上代碼：<br><br>
wxml

    <view class="block_back" wx:if="{{block3click}}" bindtap="hideModal"></view>
    <view class="block3_out" wx:if="{{block3click}}" animation="{{animationData}}">
        <view class="blk_out_title">服務說明</view>
        <view class="blk_out_list">
            <view class="list_item" wx:for="{{lists}}">
                <view>
                    <image src="{{item.src}}"></image>
                </view>
                <view class="list">
                    <text class="list_title">{{item.title}}</text>
                    <text class="list_cnt">{{item.content}}</text>
                </view>
            </view>
        </view>
    </view>

js

    serverContent: function(e) {
        var that = this;
        // console.log(e);
        var animation  = wx.createAnimation({
            // 動畫持續時間
            duration:200,
            // 動畫效果
            timingFunction:'linear'
        });
        that.animation = animation
        //在y軸偏移
        animation.translateY(400).step()
        // 讓彈框出現
        that.setData({
            block3click: true,
            blockclick: true,
            animationData: animation.export()
        });
        setTimeout(function(){
            animation.translateY(0).step()
            that.setData({
                animationData: animation.export()
            })
        },100)
     },
    //隱藏彈框
    hideModal: function() {
        this.setData({
        block3click: false,
        blockclick: false
        })
    }

彈框出現禁止詳情頁滾動，即blockclick爲true時設置overflow爲hidden。

三、選擇和支付頁面

選擇和支付頁面存在許多數據交互，好比不一樣貨號對應不一樣商品圖；兩個頁面中的數據會相互影響，這裏我還踩了幾個小坑（踩坑有益進步┓( ´∀` )┏）讓我慢慢總結。。。

• 未選擇提示

這裏沒有選擇貨號就會出現上圖的彈框，仍然是true or false的設置；沒啥好講噠，直接上代碼啦。


wxml

<view class="confirm" bindtap="purchaseClick">肯定</view>
    <view class="confirmOut" wx:if="{{showOut}}" animation="{{animationData}}">請選擇貨號</view>
<br>js

    purchaseClick: function() {
        //獲取當前選中的貨號
        var a = this.data.curNav;
        var that = this;
        //判斷是否選中 爲空則顯示彈框
        if (a == null) {
            that.setData({
                showOut: true
            }) 
        } else {
            wx.navigateTo({
                url: '../pay/pay',
            })
        };
        var animation  = wx.createAnimation();
        //延時後隱藏彈框
        setTimeout(function(){
            that.setData({
                animationData: animation.export(),
                showOut: false
            })
        },1500)
    }

• 選擇頁和支付頁的數據交互

首先是選擇頁的數據更新，此處都是經過wx:for循環數組來添加信息。

頭部的數組中只有一條元素，包括了圖片、價格和貨號信息，當選擇了不一樣的貨號後，就更替頭部數組中的元素；請見代碼：

頭部wxml:

    <view class="pur_hd" wx:for="{{purContent}}">
        <view class="tabBox pur_pic">
            <image class="goodspic" src="{{item.src}}"></image>
        </view>
        <view class="tabBox">
            <view class="price">￥{{item.price}}</view>
            <view class="content">{{item.title}}</view>
        </view>
    </view>
頭部js:

    //data中
    purContent: [
        {
            src: "//t00img.yangkeduo.com/t05img/images/2018-06-04/e5162f6d8e3ee7bc5620ae4f7c9c4a42.jpeg",
            price: "9.9-27.9",
            title: "請選擇\xa0\xa0貨號"
        }
    ]
    
貨號部分wxml:

    <view class="pur_bd">
        <view class="text">貨號</view>
        <view class="modalLists {{curNav == index? 'selected' : ''}}" bindtap="selected" wx:for="{{modalLists}}" data-index="{{index}}" >{{item.content}}</view>
    </view>
            
js

    //data中
    modalLists: [
        { 
            src: "//t03img.yangkeduo.com/images/2018-04-17/9b022a30f3a9f10b437a1e19defb20fb.jpeg",
            content:"藍色經典18包" ,
            price: "20.26",
            title: "已選：藍色經典18包"
        },
        { 
            src: "//t09img.yangkeduo.com/images/2018-04-17/1225b00e178d9042841170ca70e926b8.jpeg",
            content:"藍色經典27包" ,
            price: "27.9",
            title: "已選：藍色經典27包"
        },
        { 
            src: "//t07img.yangkeduo.com/images/2018-04-17/bcbca6f465fa5e2c1a5628ec10d69089.jpeg",
            content:"藍色經典8包" ,
            price: "10.9",
            title: "已選：藍色經典8包"
        },
    ]
    
    ......
    
    selected: function(e) {
        //獲取當前點中的貨號
        var index = e.currentTarget.dataset.index;
        //聲明一個空數組
        var list = new Array;
        //將當前點中的貨號數組元素添加到list數組中
        list[0] = this.data.modalLists[index];
        //更替頭部purContent數組中元素
        this.setData({
            curNav: index,
            purContent: list,
        });
        //本地存儲，爲支付頁傳數據
        wx.setStorage({
            key: 'list',
            data: list[0]
        })
    }
選擇頁完成後，其數據要傳遞給支付頁，包括商品圖、數量、價格和貨號，同時支付頁要統計商品總價。數據的傳遞我是經過本地存儲完成的。將選擇頁的數據經過wx:setStorage進行存儲，再在支付頁用wx:getStorage獲取數據，經過setData就能夠將數據顯示出來了。

代碼：<br><br>
wxml

    <view class="block3">
        <view class="block3_box">
            <image src="{{src}}"></image>
        </view>
        <view class="box block3_box">
            <view class="box content">27包18包8包 植護原木抽紙300張整箱批發家庭裝3層抽去式面巾紙</view>
            <view class="box modal">貨號：{{modal}}</view>
            <view class="box price">￥{{price}}/件</view>
        </view>
    </view>
    
    <view class="block5">
        <view class="block5_box box1">
            <text class="content1">實付款：</text>
            <text class="content2">￥{{total}}</text>
            <text class="content3">免運費</text>
        </view>
        <view class="block5_box box2" >
            <text>當即支付</text>
        </view>
    </view>
<br>js

    data: {
        modal: '',
        price: '',
        number: '',
        src: '',
        total: ''
    },
    //計算總價
    total: function() {
        var that = this;
        var number = that.data.number,
        var price = that.data.price;
        //.toFixed()保留幾位小數
        var total = (number * price).toFixed(1);
        //顯示數據
        that.setData({
            total: total
        })
    }
    
    ......
    
    //獲取本地存儲中數據
    var that = this;
    wx.getStorage({
        key: 'list',
        success: function(res){
            var modal = res.data.content;
            var price = res.data.price;
            var src = res.data.src;
            //更新數據
            that.setData({
                modal: modal,
                price: price,
                src: src
            });
        //第一次加載時計算一下總價
        that.total()
        }
    })

這裏我加了一個.toFixed()方法，由於沒加時數量變化會讓小數精確度不一（好吧強迫症犯了，我以爲加了就好看多了hhhhh）。<br><br>

• 數量加減
  
  

商品數量變化是雙向的，在選擇頁的加減要更新到支付頁，而在支付頁改變數量後也要更新到選擇頁，這個效果的實現一樣經過本地存儲。


wxml

<view class="stepper">
        <!-- 減號 -->
        <view class="normal" data-index="{{index}}" bindtap="bindMinus">-</view>
        <!-- 數量 -->
        <view class="number">{{number}}</view>
        <!-- 加號 -->
        <view class="normal" data-index="{{index}}" bindtap="bindPlus">+</view>
    </view>
<br>js

        //減法 
        bindMinus: function() {
            // 字符串轉數字類
            var num = parseInt(this.data.number);
            var that = this;
            if (num > 1) {
                num = num - 1;
                that.setData({  
                    number: num
                })
            };
            //存儲一下
            wx.setStorage({
                key: 'number',
                data: num
            })
        }
        
        //經過onShow獲取本地存儲，每次頁面顯示時都能更新數據
        onShow: function (options) {
            var that = this;
            wx.getStorage({
                key: 'number',
                success: function(res){
                    var number = res.data;
                    that.setData({
                        number: number
                    })
                },
            })
        }
        
出於嚴謹性，調動一下parseInt()方法，它可將字符串類型轉換成數字類型。<br><br> 
注意，選擇頁在每次加載前都應清空本地存儲，否則可能存在加載完成後頁面上顯示的是上一次調試的數據；所以，可在onLoad中調用wx.clearStorage()。

    onLoad: function (options) {
        wx.clearStorage({
            key: 'number',
            key: 'list'
        })
    }
<br>

四、setInterval的使用

一直以爲拼多多的拼團提示很好玩，因此最後忍不住去首頁弄一個相似的拼團模塊，而後效果嘛。。。總感受哪裏怪怪的？?......

其實也是不停地設置true or false來控制模塊的顯示與否，經過setInterval()來定時，每隔必定時間就對相應值取反，這樣就能看到模塊閃爍的效果了。


wxml

<view class="invite_container" wx:if="{{show}}">
        <navigator class="invitation" animation="{{animationData}}" url="../invitation/invitation">
            <view class="invite invite_pic">
                <image src="../../images/touxiang.png"></image>
            </view>
            <view class="invite invite_content">Lesta邀請您一塊兒剁手</view>
        </navigator>
    </view>

js

onLoad: function() {
        var that = this;
        var animation = wx.createAnimation();
        setInterval(function () {
            var show = !that.data.show;
            that.setData({
                animationData: animation.export(),
                show: show
            })
        }, 1500)
    }

什麼？你說你想一塊兒剁手嘛？？


零食拼不拼？？衣服拼不拼？水果拼不拼？


好吧你點進去吧....

結束語

學習永不停歇。做爲一個小白，我還有很長的路要去走，還有好多的坑要去跳，那麼就在跌跌撞撞中提高吧~感謝各位小（da）夥（lao）伴將我這篇冗長文章看到最後，有哪裏不足還請各位小（da）夥（lao）伴多多指教和提點。感謝！



附上個人項目地址：Lesta