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

發表時(shí)間：2021-3-31

發布人(rén)：融晨科技

浏覽次數：128

盒馬鮮生是(shì)阿裏巴巴對線下超市完全重構的(de)新零售業态，熱度十分

項目功能

* 用戶信息注冊
* 首頁幾個(gè)輪播和(hé / huò)界面交互
* 分類商品管理購買
* 購物車界面交互及其操作
* 個(gè)人(rén)信息界面

小程序設計過程

小程序是(shì)一個(gè)易上(shàng)手的(de)東西，對于(yú)新手來(lái)說(shuō)，多看官方文檔，可以(yǐ)初步做出(chū)比較完整的(de)小程序，正是(shì)因爲(wéi / wèi)簡單上(shàng)手，功能實現簡單，小程序是(shì)越來(lái)越火，商業價值也(yě)越來(lái)越大(dà)。

1.項目工具和(hé / huò)文檔

微信web開發者工具：微信小程序官網這(zhè)是(shì)個(gè)比較好用的(de)編輯器，對于(yú)小程序編輯很方便。
開發文檔：微信小程序寶典秘籍通過這(zhè)個(gè)查找微信小程序的(de)API，組件，框架等等。
圖标庫： Iconfont-阿裏巴巴矢量圖标庫這(zhè)個(gè)可以(yǐ)找到(dào)自己想要(yào / yāo)的(de)幾乎所有的(de)小圖标，十分方便。
Easy Mork： easy-mock 用于(yú)後台的(de)模拟，得到(dào)JSON數據；
weui框架引入，例如個(gè)人(rén)信息界面，用weui可以(yǐ)很快很方便的(de)做

2.項目開發

微信小程序開發和(hé / huò)傳統的(de)H5開發還是(shì)有些不(bù)同的(de)，容易踩坑。
小程序是(shì)基于(yú)MVVM的(de)的(de)框架，合理利用數據綁定實現界面的(de)更新是(shì)很關鍵的(de)
開發時(shí)不(bù)要(yào / yāo)一股腦的(de)寫寫寫，多看看文檔，你會發現你不(bù)小心原生寫了(le／liǎo)個(gè)組件。。

3.項目發布

進入開發平台，注冊項目信息->在(zài)編輯器中上(shàng)傳版本->在(zài)開發版本中選擇提交審核->審核通過->項目上(shàng)線

部分功能解析

先看看我的(de)項目目錄

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

1.首頁輪播圖

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

        <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>

然而(ér)橫向滑動需要(yào / yāo)注意些别的(de)細節
首先要(yào / yāo)給swiper組件加上(shàng)scroll-x-="true"
然後給輪播的(de)子(zǐ)元素父容器設置display: inline-block; white-space: nowrap;

頭條信息框轉換采用上(shàng)下輪換，使用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.分類商品管理

首先在(zài)index界面通過onLoad生命周期函數，
通過easy-moc獲取後台數據，将必要(yào / yāo)的(de)信息送給全局的(de)globalData

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

對于(yú)數據處理，需要(yào / yāo)理清哪些是(shì)全局信息，哪些是(shì)局部信息
比如所有商品的(de)信息，購物車裏的(de)商品，就(jiù)得放到(dào)全局中，而(ér)有些比如當前界面的(de)狀态，一般放到(dào)當前界面的(de)Data裏面保存

而(ér)有些個(gè)人(rén)信息，比如出(chū)生年月，賬号信息則可以(yǐ)通過wx.setStorage 和(hé / huò)wx.getStorage放入本地(dì / de)存儲

3.購物車操作

購物車中的(de)操作無非是(shì)些加加減減，需要(yào / yāo)自己不(bù)斷調試，找出(chū)哪裏不(bù)合常理
通過view，button裏的(de)bindtap等操作，實現對商品信息的(de)修改，購物車狀态的(de)處理

舉個(gè)例子(zǐ) 減少購物車中的(de)商品的(de)數量操作

reduceItems: function (e) {
    let carts = app.globalData.carts;    //獲取購物車的(de)信息
    let classifyList = app.globalData.classifyList;  //獲取商品的(de)信息
    for (let key of carts) {                        //遍曆購物車數組
      if (key.id === e.target.dataset.id) {         //通過WXML中 view裏面的(de)bind-id傳過來(lái)的(de)參數進行查找
        key.cartSelected = true;
        if (key.num === 1) {                  //如果數量爲(wéi / wèi)1還要(yào / yāo)減
          key.num--;
          key.cartSelected = false;           //購物車不(bù)選中
          key.selected = false;               //商品中不(bù)選中
          app.globalData.carts = carts.filter((item) => {    //進行購物車中商品剔除
            return item.id != e.target.dataset.id;
          })
        } else {
          key.num--;
        }
      }
    }
    let num = 0;                                 //實時(shí)更新購物車小計界面顯示
    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框架引入

在(zài)全局CSS樣式中添加的(de)CSS适配于(yú)所有的(de)頁面，由此可以(yǐ)引入weui ,做一些界面真的(de)很方便

@import './styles/weui.wxss';

總結

微信小程序的(de)組件，API很強大(dà)，需要(yào / yāo)不(bù)斷的(de)探索，不(bù)斷的(de)學習，多看文檔
善于(yú)利用有效資源，比如iconfont esay-moc weui等
切頁面要(yào / yāo)細心，善于(yú)利用彈性布局等布局方法，小程序的(de)rpx确實很好用
不(bù)要(yào / yāo)一股腦的(de)寫代碼，當函數具有複用性，應該抽象出(chū)來(lái)，封裝好，這(zhè)樣代碼才易于(yú)維護，易讀