首頁  >  文章  >  微信小程式  >  微信小程式-仿盒馬鮮生

微信小程式-仿盒馬鮮生

小云云
小云云原創
2017-12-05 16:39:324455瀏覽

小程式是一個容易上手的東西, 對於新手來說,多看官方文檔,可以初步做出比較完整的小程序,正是因為簡單上手,功能實現簡單,小程序是越來越火,商業價值也越來越大。本文我們將教大家一種微信小程式-仿盒馬鮮生。

專案初覽

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

微信小程式-仿盒馬鮮生

微信小程式-仿盒馬鮮生

微信小程式-仿盒馬鮮生

微信小程式-仿盒馬鮮生
微信小程式-仿盒馬鮮生

專案功能

* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面
小程式設計流程

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

  2. 微信web開發者工具:微信小程式官網  這是個比較好用的編輯器,對於小程式編輯很方便。

  3. 開發文件:微信小程式寶典秘籍 透過這個尋找微信小程式的API,元件,框架等等。

  4. 圖示庫: Iconfont-阿里巴巴向量圖示庫 這個可以找到自己想要的幾乎所有的小圖標,十分方便。

  5. 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,
    })
  },
4 .weui框架引入

在全局CSS樣式中添加的CSS適配於所有的頁面,由此可以引入weui ,做一些介面真的很方便
    @import './styles/weui.wxss';
  1. 總結

  2. #微信小程式的元件,API很強大,需要不斷的探索,不斷的學習,多看文件

  3. 善於利用有效資源,像是iconfont  esay -moc weui等

  4. 切頁面要細心,善於利用彈性佈局等佈局方法,小程式的rpx確實很好用

不要一股腦的寫程式碼, 當函數具有復用性,應該要抽像出來,封裝好,這樣程式碼才易於維護,易讀

專案位址:

https: //github.com/fishman17/...   內含詳細註解


個人簡介

github : https://github.com/fishman17

信箱: 734583898@qq.com


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

專案初覽

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


#########

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

微信小程式-仿盒馬鮮生

微信小程式-仿盒馬鮮生

微信小程式-仿盒馬鮮生

微信小程式-仿盒馬鮮生
微信小程式-仿盒馬鮮生

專案功能

* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面

小程式設計過程

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

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. 不要一股腦的寫程式碼, 當函數具有復用性,應該要抽像出來,封裝好,這樣程式碼才易於維護,易讀。

以上內容就是仿盒馬鮮生微信小程序,希望能幫助大家。

相關推薦:

微信小程式開發入門實例

#微信小程式視頻,音樂,圖片組件詳解

微信小程式如何實現獲取微信運動步數的案例(圖)

#

以上是微信小程式-仿盒馬鮮生的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn