一個微信小程序

前言

微信小程序在當前比較火熱，秉着學習的目的和態度，仿「CoCo均可手機點餐」寫了一個微信小程序，實現了大體功能。那麼，我給你們介紹下這個微信小程序。

---

使用到的工具：

1.Visual Studio Code 編譯器
2.微信web開發者工具
3.Easy Mock 建立後臺數據
4.Iconfont-阿里巴巴矢量圖標庫
5.微信小程序開發文檔

---

實現的功能重點

1.頁面宣傳圖片自動手動切換功能
2.自助點餐功能
3.加入購物車功能
4.清空購物車，購物車增長減小飲品功能
5.選擇彈窗功能

---

頁面宣傳圖片自動手動切換功能實現如圖

這個效果是用微信小程序自帶的swiper（滑塊視圖容器）作的，能夠多張圖片輪播，設置值就行了，圖片是網上下載的。具體代碼以下：
WXML(HTML)代碼

CSS代碼

自助點餐功能如圖

這個自助點餐點擊跳轉到商品列表頁面是用bindtap綁定函數，再用小程序自帶的api，wx.navigateTo導航實現的，wx.navigateTo能夠保留當前頁面，跳轉到應用內的某個頁面
WXML代碼

js代碼

加入購物車彈窗功能

這個加入購物車是經過easy-mock後臺建立數據，在用wx.request請求數據。用數組添加商品就加入數組。

WXML代碼

js代碼 數據請求

購物車操做

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

對於寫微信小程序的幾點心得：
1.多看文檔，微信小程序自帶了不少api組件什麼的，不要寫着寫着發現本身寫的都是自帶的組件什麼的。推薦一個文檔連接：https://mp.weixin.qq.com/debu...
2.小圖標啥的，能夠摳圖，也能夠到網上下載，我是從一個圖標庫裏下載的，樣式很全，很好用。連接：http://www.iconfont.cn/collec...
3.後臺數據建立，用easy mock，這個也好用。連接：http://www.easy-mock.com
4.css樣式能夠引用weui，在全局樣式app.wxss中引用，適用於全部界面，能夠省不少時間寫css代碼。
5.若是有不懂的多百度，多問前輩，，
6.學如逆水行舟，不進則退啊。多敲代碼。

完整項目地址
https://github.com/Everglow1/... 僅供學習交流使用，謝謝！