微信小程序實戰-仿盒馬鮮生

發布時間：2018-04-25 11:09 所屬欄目：小程序開發教程

盒馬鮮生是阿里巴巴對線下超市完全重構的新零售業態，熱度十分

項目功能


* 用戶信息注冊
* 首頁幾個輪播和界面交互
* 分類商品管理購買
* 購物車界面交互及其操作
* 個人信息界面

小程序設計過程

小程序是一個易上手的東西，對于新手來說，多看官方文檔，可以初步做出比較完整的小程序，正是因為簡單上手，功能實現簡單，小程序是越來越火，商業價值也越來越大。

1.項目工具和文檔

微信web開發者工具：微信小程序官網這是個比較好用的編輯器，對于小程序編輯很方便。
開發文檔：微信小程序寶典秘籍通過這個查找微信小程序的API，組件，框架等等。
圖標庫： Iconfont-阿里巴巴矢量圖標庫這個可以找到自己想要的幾乎所有的小圖標，十分方便。
Easy Mork： easy-mock 用于后臺的模擬，得到JSON數據；
- weui框架引入，例如個人信息界面，用weui可以很快很方便的做

2.項目開發

微信小程序開發和傳統的H5開發還是有些不同的，容易踩坑。
小程序是基于MVVM的的框架，合理利用數據綁定實現界面的更新是很關鍵的
開發時不要一股腦的寫寫寫，多看看文檔，你會發現你不小心原生寫了個組件。。

3.項目發布

進入開發平臺，注冊項目信息->在編輯器中上傳版本->在開發版本中選擇提交審核->審核通過->項目上線

部分功能解析

先看看我的項目目錄


    "pages": [
     "pages/index/index",  //主界面
      "pages/person/person", //個人界面
     "pages/classify/classify", //分類商品界面
     "pages/class/myFruits/myFruits", //水果商店
     "pages/class/myMeat/myMeat", //肉類食品商店
     "pages/myCart/myCart"    //購物車
     ],

1.首頁輪播圖

輪播有幾種形式，比如常見的橫向海報圖片展示，還有橫縱向商品列表展示，頭條信息框輪換
siwper組件很好的實現了橫向海報圖片展示，比如


        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
            <block wx:for="{{imgUrls}}" wx:key="index">
                <swiper-item>
                    <image src="{{item}}" class="slide-image"  />
                swiper-item>
            block>
        swiper>

然而橫向滑動需要注意些別的細節
首先要給swiper組件加上scroll-x-="true"
然后給輪播的子元素父容器設置display: inline-block; white-space: nowrap;

頭條信息框轉換采用上下輪換，使用scroll-view嵌套swiper完成


    <scroll-view scroll-y-="true"  >
                <swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">
                    <block wx:for="{{something}}" wx:key="index">
                         //內容 
                    block>
                swiper>
    scroll-view>

2.分類商品管理

首先在index界面通過onLoad生命周期函數，
通過easy-moc獲取后臺數據，將必要的信息送給全局的globalData


wx.request({
      url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
      complete: res => {
        this.globalData.classifyList = res.data;
      },
    })

對于數據處理，需要理清哪些是全局信息，哪些是局部信息
比如所有商品的信息，購物車里的商品，就得放到全局中，而有些比如當前界面的狀態，一般放到當前界面的Data里面保存

而有些個人信息，比如出生年月，賬號信息則可以通過wx.setStorage 和wx.getStorage放入本地存儲

3.購物車操作

購物車中的操作無非是些加加減減，需要自己不斷調試，找出哪里不合常理
通過view，button里的bindtap等操作，實現對商品信息的修改，購物車狀態的處理

舉個例子減少購物車中的商品的數量操作


reduceItems: function (e) {
    let carts = app.globalData.carts;    //獲取購物車的信息
    let classifyList = app.globalData.classifyList;  //獲取商品的信息
    for (let key of carts) {                        //遍歷購物車數組
      if (key.id === e.target.dataset.id) {         //通過WXML中 view里面的bind-id傳過來的參數進行查找
        key.cartSelected = true;
        if (key.num === 1) {                  //如果數量為1還要減
          key.num--;
          key.cartSelected = false;           //購物車不選中
          key.selected = false;               //商品中不選中
          app.globalData.carts = carts.filter((item) => {    //進行購物車中商品剔除
            return item.id != e.target.dataset.id;
          })
        } else {
          key.num--;
        }
      }
    }
    let num = 0;                                 //實時更新購物車小計界面顯示
    let totalPrice = 0;
    for (let key of carts) {
      if (key.cartSelected) {
        num += key.num;
        totalPrice += key.num * key.price;
      }
    }
    this.setData({                          //通過setData進行當前頁面Data數據管理
      cart: app.globalData.carts,
      cartTotal: num,
      cartTotalPrice: totalPrice,
    })
  },