一个微信小程序

前言

微信小程序在当前比较火热，秉着学习的目的和态度，仿“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/... 仅供学习交流使用，谢谢！