小程式是一個容易上手的東西， 對於新手來說，多看官方文檔，可以初步做出比較完整的小程序，正是因為簡單上手，功能實現簡單，小程序是越來越火，商業價值也越來越大。本文我們將教大家一種微信小程式-仿盒馬鮮生。
專案初覽
盒馬鮮生是阿里巴巴對線下超市完全重構的新零售業態，熱度十分。
* 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面小程式設計流程小程式是一個容易上手的東西， 對於新手來說，多看官方文檔，可以初步做出比較完整的小程序，正是因為簡單上手，功能實現簡單，小程式是越來越火，商業價值也越來越大。
- 1.專案工具與文件
- 微信web開發者工具：微信小程式官網 這是個比較好用的編輯器，對於小程式編輯很方便。
- 開發文件：微信小程式寶典秘籍 透過這個尋找微信小程式的API，元件，框架等等。
- 圖示庫： Iconfont-阿里巴巴向量圖示庫 這個可以找到自己想要的幾乎所有的小圖標，十分方便。
- Easy Mork: easy-mock 用於後台的模擬，得到JSON資料；
2.專案開發
小程式是基於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> <block> <swiper-item> <image></image> </swiper-item> </block> </swiper>然而橫向滑動需要注意些別的細節
首先要給swiper元件加上scroll-x-="true"
然後給輪播的子元素父容器設定display: inline-block; white-space: nowrap;頭條資訊框轉換採用上下輪換， 使用scroll-view嵌套swiper完成<scroll-view> <swiper> <block> //内容 </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 ,做一些介面真的很方便- 總結
- #微信小程式的元件，API很強大，需要不斷的探索，不斷的學習，多看文件
- 善於利用有效資源，像是iconfont esay -moc weui等
- 切頁面要細心，善於利用彈性佈局等佈局方法，小程式的rpx確實很好用
@import './styles/weui.wxss';
個人簡介
github : https://github.com/fishman17
信箱: 734583898@qq.com
最後如果您喜歡這個專案的話，給個star哦謝謝！
仿造盒馬鮮生，實現了部分功能。專案初覽
盒馬鮮生是阿里巴巴對線下超市完全重構的新零售業態，熱度十分
專案功能
* 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面
小程式設計過程
小程式是一個容易上手的東西， 對於新手來說，多看官方文檔，可以初步做出比較完整的小程序，正是因為簡單上手，功能實現簡單，小程序是越來越火，商業價值也越來越大。
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> <block> <swiper-item> <image></image> </swiper-item> </block> </swiper>
然而橫向滑動需要注意些別的細節
首先要給swiper元件加上scroll-x-="true"
然後給輪播的子元素父容器設定display: inline-block; white-space: nowrap;
頭條資訊框轉換採用上下輪換， 使用scroll-view嵌套swiper完成
<scroll-view> <swiper> <block> //内容 </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';
總結
#微信小程式的元件，API很強大，需要不斷的探索，不斷的學習，多看文件
善於利用有效資源，像是iconfont esay -moc weui等
切頁面要細心，善於利用彈性佈局等佈局方法，小程式的rpx確實很好用
不要一股腦的寫程式碼， 當函數具有復用性，應該要抽像出來，封裝好，這樣程式碼才易於維護，易讀。
以上內容就是仿盒馬鮮生微信小程序，希望能幫助大家。
相關推薦：
#以上是微信小程式-仿盒馬鮮生的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
WebStorm Mac版
好用的JavaScript開發工具
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Atom編輯器mac版下載
最受歡迎的的開源編輯器
