一個(gè)微信小程序

moven_j 發(fā)布于2019-08-29 13:59 / 3103人閱讀

摘要：前言微信小程序在當(dāng)前比較火熱，秉著學(xué)習(xí)的目的和態(tài)度，仿都可手機(jī)點(diǎn)餐寫了一個(gè)微信小程序，實(shí)現(xiàn)了大致功能。那么，我給大家介紹下這個(gè)微信小程序。

前言

微信小程序在當(dāng)前比較火熱，秉著學(xué)習(xí)的目的和態(tài)度，仿“CoCo都可手機(jī)點(diǎn)餐”寫了一個(gè)微信小程序，實(shí)現(xiàn)了大致功能。那么，我給大家介紹下這個(gè)微信小程序。

使用到的工具：

1.Visual Studio Code 編譯器
2.微信web開發(fā)者工具
3.Easy Mock 創(chuàng)建后臺數(shù)據(jù)
4.Iconfont-阿里巴巴矢量圖標(biāo)庫
5.微信小程序開發(fā)文檔

實(shí)現(xiàn)的功能重點(diǎn)

1.頁面宣傳圖片自動(dòng)手動(dòng)切換功能
2.自助點(diǎn)餐功能
3.加入購物車功能
4.清空購物車，購物車增加減少飲品功能
5.選擇彈窗功能

頁面宣傳圖片自動(dòng)手動(dòng)切換功能實(shí)現(xiàn)如圖

這個(gè)效果是用微信小程序自帶的swiper（滑塊視圖容器）做的，可以多張圖片輪播，設(shè)置值就好了，圖片是網(wǎng)上下載的。具體代碼如下：
WXML(HTML)代碼

CSS代碼

自助點(diǎn)餐功能如圖

這個(gè)自助點(diǎn)餐點(diǎn)擊跳轉(zhuǎn)到商品列表頁面是用bindtap綁定函數(shù)，再用小程序自帶的api，wx.navigateTo導(dǎo)航實(shí)現(xiàn)的，wx.navigateTo可以保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面
WXML代碼

js代碼

加入購物車彈窗功能

這個(gè)加入購物車是通過easy-mock后臺創(chuàng)建數(shù)據(jù)，在用wx.request請求數(shù)據(jù)。用數(shù)組添加商品就加入數(shù)組。

WXML代碼

js代碼數(shù)據(jù)請求

購物車操作

還有一些功能就不一一展示了，如下所示：

對于寫微信小程序的幾點(diǎn)心得：
1.多看文檔，微信小程序自帶了很多api組件什么的，不要寫著寫著發(fā)現(xiàn)自己寫的都是自帶的組件什么的。推薦一個(gè)文檔鏈接：https://mp.weixin.qq.com/debu...
2.小圖標(biāo)啥的，可以摳圖，也可以到網(wǎng)上下載，我是從一個(gè)圖標(biāo)庫里下載的，樣式很全，很好用。鏈接：http://www.iconfont.cn/collec...
3.后臺數(shù)據(jù)創(chuàng)建，用easy mock，這個(gè)也好用。鏈接：http://www.easy-mock.com
4.css樣式可以引用weui，在全局樣式app.wxss中引用，適用于所有界面，可以省很多時(shí)間寫css代碼。
5.如果有不懂的多百度，多問前輩，，
6.學(xué)如逆水行舟，不進(jìn)則退啊。多敲代碼。

完整項(xiàng)目地址
https://github.com/Everglow1/... 僅供學(xué)習(xí)交流使用，謝謝！