因为最近在自学微信小程序,就记录一下开发一个模仿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