微信小程序仿饮品外卖(附前后端代码)

因为最近在自学微信小程序,就记录一下开发一个模仿coco外卖Demo过程中实现的功能,和遇到的坑并附上源码。

预览说明

1.将服务端和客户端项目的代码下拉至本地。

2.下载微信官方开发者工具。(微信官方开发者工具编辑器代码提示较少,工具经常出现莫名的bug,编辑卡顿等。所以在编辑代码的时候大多数开发者会选择vscode编辑器进行编辑,vscode中有大量插件如minapp、wechat-snippet、wxml等对开发者友好的插件工具,然后在微信官方开发者工具上进行预览,提高开发效率)
微信开发者工具的下载地址:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
在这里插入图片描述
这里建议开发者选择稳定版下载。

3.将项目导入到开发者工具中,点击测试号自动生成APPID即可。(如果需要自己开发项目建议在开发者设置中注册账号使用自己的APPID)
在这里插入图片描述
4.在导航栏上点击详情,在本地设置中勾选“不检验合法域名…”的选项,因为微信小程序是不允许随便访问 URL 的,需要在小程序的“设置”->“开发设置”中,把域名配置进去。但是在开发环境下可以暂时不配置。
在这里插入图片描述
5.如果需要使用手机进行预览,若在本地服务端环境下,需要将测试手机与服务端放在同一个局域网中,以本项目为例,需在network.js文件中,将ip改为本地IP地址。(请求的地址不得使用localhost,而应改成本地服务器所在的电脑IP)
在这里插入图片描述
点击预览开发工具会自动打包当前项目,并上传小程序代码到微信服务器上,成功之后就会显示一个二维码。使用微信扫描二维码进行页面展示。

6.也可直接再开发者工具的模拟器模块上进行预览,但是部分后台API功能受限不能正确的显示。

功能界面展示

授权登录:
在这里插入图片描述
首页展示:

在这里插入图片描述个人信息:
在这里插入图片描述
修改收货地址信息:包括授权获取地址信息,移动选点获取地址
在这里插入图片描述在这里插入图片描述
菜单界面:左右联动菜单,购物车,实时搜索
在这里插入图片描述
目前仅实现客户端基本订单流程的功能,还有部分功能善未完善。本人也是小程序初级小白,欢迎各位大佬进行指点、交流。代码上有什么问题也可以直接留言问我。
下面给出前后端代码:
https://github.com/winsonLong/drink_wx_mini_program/tree/master

评论 29
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值