資訊專欄INFORMATION COLUMN
摘要：前言微信小程序在當前比較火熱，秉著學習的目的和態度，仿都可手機點餐寫了一個微信小程序，實現了大致功能。那么，我給大家介紹下這個微信小程序。
前言
微信小程序在當前比較火熱，秉著學習的目的和態度，仿“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/... 僅供學習交流使用，謝謝！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90322.html
摘要：微信應用號小程序資源匯總。每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要：微信應用號小程序資源匯總。每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要：微信小程序應用號開發資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發文檔小程序設計指南工具小程序開發者工具官方支持微信小程序實時預覽的支持的微信小程序組件化開發框架轉在線工具小程序云端增強社區微信小程序 微信(小程序or應用號)開發資源匯總-文檔-工具-教程-代碼-插件-組件 文檔 從搭建一個微信小程序開始 小程序開發文檔 小程序設計指南 工具 小程序開發者...
閱讀 2993·2021-10-13 09:39
閱讀 2694·2021-09-27 13:34
閱讀 2031·2019-08-30 15:55
閱讀 3260·2019-08-30 15:43
閱讀 3631·2019-08-30 11:16
閱讀 1748·2019-08-26 18:28
閱讀 1283·2019-08-26 13:56
閱讀 914·2019-08-26 13:35
