一个微信小程序

klinson 发布于2019-08-02 16:00 / 1775人阅读

摘要：前言微信小程序在当前比较火热，秉着学习的目的和态度，仿都可手机点餐写了一个微信小程序，实现了大致功能。那么，我给大家介绍下这个微信小程序。

前言

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

idc机房托管云服务器做一个微信小程序怎么开发一个微信小程序如何做一个微信小程序微信小程序做一个多少钱

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54491.html

微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
微信应用号（小程序）资源汇总（1010更新）

摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

赵春朋 2019-08-29 11:20 评论0 收藏0
微信应用号（小程序）资源汇总（1010更新）

摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

objc94 2019-08-05 10:11 评论0 收藏0
微信应用号（小程序）资源汇总（1010更新）

摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

piapia 2019-08-20 11:12 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

seanlook 2019-08-05 10:11 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

paney129 2019-08-20 11:14 评论0 收藏0