一个微信小程序

原文链接:https://segmentfault.com/a/1190000012358576

前言

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

展开阅读全文

没有更多推荐了,返回首页