資訊專欄INFORMATION COLUMN
摘要：前言微信小程序在當前比較火熱，秉著學習的目的和態(tài)度，仿都可手機點餐寫了一個微信小程序，實現(xiàn)了大致功能。那么，我給大家介紹下這個微信小程序。
前言
微信小程序在當前比較火熱，秉著學習的目的和態(tài)度，仿“CoCo都可手機點餐”寫了一個微信小程序，實現(xiàn)了大致功能。那么，我給大家介紹下這個微信小程序。
1.Visual Studio Code 編譯器
2.微信web開發(fā)者工具
3.Easy Mock 創(chuàng)建后臺數(shù)據(jù)
4.Iconfont-阿里巴巴矢量圖標庫
5.微信小程序開發(fā)文檔
1.頁面宣傳圖片自動手動切換功能
2.自助點餐功能
3.加入購物車功能
4.清空購物車，購物車增加減少飲品功能
5.選擇彈窗功能
頁面宣傳圖片自動手動切換功能實現(xiàn)如圖
這個效果是用微信小程序自帶的swiper（滑塊視圖容器）做的，可以多張圖片輪播，設置值就好了，圖片是網(wǎng)上下載的。具體代碼如下：
WXML(HTML)代碼
CSS代碼
自助點餐功能如圖
這個自助點餐點擊跳轉到商品列表頁面是用bindtap綁定函數(shù)，再用小程序自帶的api，wx.navigateTo導航實現(xiàn)的，wx.navigateTo可以保留當前頁面，跳轉到應用內的某個頁面
WXML代碼
js代碼
加入購物車彈窗功能
這個加入購物車是通過easy-mock后臺創(chuàng)建數(shù)據(jù)，在用wx.request請求數(shù)據(jù)。用數(shù)組添加商品就加入數(shù)組。
WXML代碼
js代碼 數(shù)據(jù)請求
購物車操作
還有一些功能就不一一展示了，如下所示：
對于寫微信小程序的幾點心得：
1.多看文檔，微信小程序自帶了很多api組件什么的，不要寫著寫著發(fā)現(xiàn)自己寫的都是自帶的組件什么的。推薦一個文檔鏈接：https://mp.weixin.qq.com/debu...
2.小圖標啥的，可以摳圖，也可以到網(wǎng)上下載，我是從一個圖標庫里下載的，樣式很全，很好用。鏈接：http://www.iconfont.cn/collec...
3.后臺數(shù)據(jù)創(chuàng)建，用easy mock，這個也好用。鏈接：http://www.easy-mock.com
4.css樣式可以引用weui，在全局樣式app.wxss中引用，適用于所有界面，可以省很多時間寫css代碼。
5.如果有不懂的多百度，多問前輩，，
6.學如逆水行舟，不進則退啊。多敲代碼。
完整項目地址
https://github.com/Everglow1/... 僅供學習交流使用，謝謝！
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/54491.html
摘要：微信應用號小程序資源匯總。每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要：微信應用號小程序資源匯總。每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要：微信小程序應用號開發(fā)資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發(fā)文檔小程序設計指南工具小程序開發(fā)者工具官方支持微信小程序實時預覽的支持的微信小程序組件化開發(fā)框架轉在線工具小程序云端增強社區(qū)微信小程序 微信(小程序or應用號)開發(fā)資源匯總-文檔-工具-教程-代碼-插件-組件 文檔 從搭建一個微信小程序開始 小程序開發(fā)文檔 小程序設計指南 工具 小程序開發(fā)者...
閱讀 2735·2021-11-11 16:54
閱讀 2369·2021-10-09 09:44
閱讀 2593·2019-08-30 15:54
閱讀 1961·2019-08-30 11:24
閱讀 1209·2019-08-29 17:03
閱讀 2135·2019-08-29 16:22
閱讀 2114·2019-08-29 13:11
閱讀 1080·2019-08-29 12:14
