小程式是一個(gè)容易上手的東西， 對(duì)於新手來說，多看官方文檔，可以初步做出比較完整的小程序，正是因?yàn)楹唵紊鲜郑δ軐?shí)現(xiàn)簡單，小程序是越來越火，商業(yè)價(jià)值也越來越大。本文我們將教大家一種微信小程式-仿盒馬鮮生。

專案初覽

盒馬鮮生是阿里巴巴對(duì)線下超市完全重構(gòu)的新零售業(yè)態(tài)，熱度十分。

專案功能

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

小程式設(shè)計(jì)流程

小程式是一個(gè)容易上手的東西， 對(duì)於新手來說，多看官方文檔，可以初步做出比較完整的小程序，正是因?yàn)楹唵紊鲜郑δ軐?shí)現(xiàn)簡單，小程式是越來越火，商業(yè)價(jià)值也越來越大。

1. 1.專案工具與文件

2. 微信web開發(fā)者工具：微信小程式官網(wǎng) ?這是個(gè)比較好用的編輯器，對(duì)於小程式編輯很方便。

3. 開發(fā)文件：微信小程式寶典秘籍 透過這個(gè)尋找微信小程式的API，元件，框架等等。

4. 圖示庫： Iconfont-阿里巴巴向量圖示庫 這個(gè)可以找到自己想要的幾乎所有的小圖標(biāo)，十分方便。

5. Easy Mork: easy-mock 用於後臺(tái)的模擬，得到JSON資料；

weui框架引入， 例如個(gè)人資訊介面，用weui可以很快很方便的做

2.專案開發(fā)

微信小程式開發(fā)和傳統(tǒng)的H5開發(fā)還是有些不同的， 容易踩坑。

小程式是基於MVVM的的框架，合理利用資料綁定實(shí)現(xiàn)介面的更新是很關(guān)鍵的

開發(fā)時(shí)不要一股腦的寫寫寫，多看看文檔，你會(huì)發(fā)現(xiàn)你不小心原生寫了個(gè)組件。 。

3.專案發(fā)布

進(jìn)入開發(fā)平臺(tái)，註冊(cè)專案資訊->在編輯器中上傳版本->在開發(fā)版本中選擇提交審核->審核通過->專案上線

部分功能解析

先看看我的專案目錄

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

1.首頁輪播圖

輪播有幾種形式，例如常見的橫向海報(bào)圖片展示， 還有橫縱向商品列表展示，頭條信息框輪換
siwper組件很好的實(shí)現(xiàn)了橫向海報(bà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>

然而橫向滑動(dòng)需要注意些別的細(xì)節(jié)?

首先要給swiper元件加上scroll-x-="true" ?

然後給輪播的子元素父容器設(shè)定display: inline-block; white-space: nowrap;

頭條資訊框轉(zhuǎn)換採用上下輪換， 使用scroll-view嵌套swiper完成

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

2.分類商品管理

首先在index介面透過onLoad生命週期函數(shù)，
透過easy -moc取得後臺(tái)數(shù)據(jù)，將必要的資訊送給全域的globalData

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

對(duì)於資料處理，需要理清哪些是全域資訊， 哪些是局部資訊

例如所有商品的資訊，購物車裡的商品，就得放到全局中，而有些比如當(dāng)前界面的狀態(tài)，一般放到當(dāng)前界面的Data裡面保存

而有些個(gè)人信息，比如出生年月，帳號(hào)信息? 則可以通過wx. setStorage 和wx.getStorage放入本地存儲(chǔ)

3.購物車操作

購物車中的操作無非是些加加減減，需要自己不斷調(diào)試，找出哪裡不合常理

透過view，button裡的bindtap等操作，實(shí)現(xiàn)對(duì)商品資訊的修改，購物車狀態(tài)的處理

舉個(gè)例子?減少購物車中的商品的數(shù)量操作

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

4 .weui框架引入

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

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

1. 總結(jié)

2. #微信小程式的元件，API很強(qiáng)大，需要不斷的探索，不斷的學(xué)習(xí)，多看文件

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

4. 切頁面要細(xì)心，善於利用彈性佈局等佈局方法，小程式的rpx確實(shí)很好用

不要一股腦的寫程式碼， 當(dāng)函數(shù)具有復(fù)用性，應(yīng)該要抽像出來，封裝好，這樣程式碼才易於維護(hù)，易讀

專案位址:

https: //github.com/fishman17/... ? 內(nèi)含詳細(xì)註解

個(gè)人簡介

github : https://github.com/fishman17

信箱: 734583898@qq.com

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

專案初覽

仿造盒馬鮮生，實(shí)現(xiàn)了部分功能。

#########

盒馬鮮生是阿里巴巴對(duì)線下超市完全重構(gòu)的新零售業(yè)態(tài)，熱度十分

專案功能

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

小程式設(shè)計(jì)過程

小程式是一個(gè)容易上手的東西， 對(duì)於新手來說，多看官方文檔，可以初步做出比較完整的小程序，正是因?yàn)楹唵紊鲜?，功能?shí)現(xiàn)簡單，小程序是越來越火，商業(yè)價(jià)值也越來越大。

1.專案工具與文件

1. 微信web開發(fā)者工具：微信小程式官網(wǎng) ?這是個(gè)比較好用的編輯器，對(duì)於小程式編輯很方便。

2. 開發(fā)文件：微信小程式寶典秘籍 透過這個(gè)尋找微信小程式的API，元件，框架等等。

3. 圖示庫： Iconfont-阿里巴巴向量圖示庫 這個(gè)可以找到自己想要的幾乎所有的小圖標(biāo)，十分方便。

4. Easy Mork: easy-mock 用於後臺(tái)的模擬，得到JSON資料；

5. weui框架引入， 例如個(gè)人資訊介面，用weui可以很快很方便的做

2.專案開發(fā)

微信小程式開發(fā)和傳統(tǒng)的H5開發(fā)還是有些不同的， 容易踩坑。
小程式是基於MVVM的的框架，合理利用資料綁定實(shí)現(xiàn)介面的更新是很關(guān)鍵的
開發(fā)時(shí)不要一股腦的寫寫寫，多看看文檔，你會(huì)發(fā)現(xiàn)你不小心原生寫了個(gè)組件。 。

3.專案發(fā)布

進(jìn)入開發(fā)平臺(tái)，註冊(cè)專案資訊->在編輯器中上傳版本->在開發(fā)版本中選擇提交審核->審核通過->專案上線

部分功能解析

先看看我的專案目錄

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

1.首頁輪播圖

輪播有幾種形式，例如常見的橫向海報(bào)圖片展示， 還有橫縱向商品列表展示，頭條信息框輪換
siwper組件很好的實(shí)現(xiàn)了橫向海報(bà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>

然而橫向滑動(dòng)需要注意些別的細(xì)節(jié)?
首先要給swiper元件加上scroll-x-="true" ?
然後給輪播的子元素父容器設(shè)定display: inline-block; white-space: nowrap;

頭條資訊框轉(zhuǎn)換採用上下輪換， 使用scroll-view嵌套swiper完成

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

2.分類商品管理

首先在index介面透過onLoad生命週期函數(shù)，
透過easy -moc取得後臺(tái)數(shù)據(jù)，將必要的資訊送給全域的globalData

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

對(duì)於資料處理，需要理清哪些是全域資訊， 哪些是局部資訊
例如所有商品的資訊，購物車裡的商品，就得放到全局中，而有些比如當(dāng)前界面的狀態(tài)，一般放到當(dāng)前界面的Data裡面保存

而有些個(gè)人信息，比如出生年月，帳號(hào)信息? 則可以通過wx. setStorage 和wx.getStorage放入本地存儲(chǔ)

3.購物車操作

購物車中的操作無非是些加加減減，需要自己不斷調(diào)試，找出哪裡不合常理
透過view，button裡的bindtap等操作，實(shí)現(xiàn)對(duì)商品資訊的修改，購物車狀態(tài)的處理

舉個(gè)例子?減少購物車中的商品的數(shù)量操作

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

4 .weui框架引入

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

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

總結(jié)

1. #微信小程式的元件，API很強(qiáng)大，需要不斷的探索，不斷的學(xué)習(xí)，多看文件

2. 善於利用有效資源，像是iconfont ?esay -moc weui等

3. 切頁面要細(xì)心，善於利用彈性佈局等佈局方法，小程式的rpx確實(shí)很好用

4. 不要一股腦的寫程式碼， 當(dāng)函數(shù)具有復(fù)用性，應(yīng)該要抽像出來，封裝好，這樣程式碼才易於維護(hù)，易讀。

以上內(nèi)容就是仿盒馬鮮生微信小程序，希望能幫助大家。

相關(guān)推薦：

微信小程式開發(fā)入門實(shí)例

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

微信小程式如何實(shí)現(xiàn)獲取微信運(yùn)動(dòng)步數(shù)的案例（圖）

#

以上是微信小程式-仿盒馬鮮生的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！