微信小程式-仿盒馬鮮生

fishman17發表於2017-12-04
微信小程式

專案初覽

仿造盒馬鮮生，實現了部分功能。

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


專案功能

* 使用者資訊註冊
* 首頁幾個輪播和介面互動
* 分類商品管理購買
* 購物車介面互動及其操作
* 個人資訊介面複製程式碼

小程式設計過程

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

1.專案工具和文件

  1. 微信web開發者工具：微信小程式官網 這是個比較好用的編輯器，對於小程式編輯很方便。
  2. 開發文件：微信小程式寶典祕籍 通過這個查詢微信小程式的API，元件，框架等等。
  3. 圖示庫： Iconfont-阿里巴巴向量圖示庫 這個可以找到自己想要的幾乎所有的小圖示，十分方便。
  4. Easy Mork： easy-mock 用於後臺的模擬，得到JSON資料；
  5. 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,
    })
  },複製程式碼

4.weui框架引入

在全域性CSS樣式中 新增的CSS適配於所有的頁面，由此可以引入weui ,做一些介面真的很方便

@import './styles/weui.wxss';複製程式碼

總結

  1. 微信小程式的元件，API很強大，需要不斷的探索，不斷的學習，多看文件
  2. 善於利用有效資源， 比如iconfont esay-moc weui等
  3. 切頁面要細心，善於利用彈性佈局等佈局方法，小程式的rpx確實很好用
  4. 不要一股腦的寫程式碼， 當函式具有複用性，應該抽象出來，封裝好，這樣程式碼才易於維護，易讀

專案地址:

github.com/fishman17/w… 內含詳細註釋

個人簡介

github : github.com/fishman17
郵箱 : 734583898@qq.com

最後 如果您喜歡這個專案的話，給個star哦 謝謝！

相關文章