微信小程序的零食商城
2023-09-11 14:18:03 时间
概述
这是一个微信小程序的商城应用,功能包括了首页、分类、购物车、个人中心、商品列表、商品详情、订单、地址管理等
详细
一、准备工作
1、电脑需要安装有 微信web开发者工具,如果没有请点击这里安装:下载地址
2、成为微信小程序开发者,到微信公众号平台注册一个账号。需要用到appkey
二、程序实现
1、项目目录如下:
主要页面代码都放在components文件夹下面,每个页面包含wxml,wxss,js,json四种格式的文件。
模块说明:
index即主页,
address是地址管理,
cart是购物车,
category是分类,
detail是商品详情,
list是商品列表,
orders是订单管理,
user是用户中心。
最外层的app.json 是小程序的配置文件。
可以设置小程序的基础配置。不清楚的可以查看官方文档
(注意:页面里面的数据为静态写死的数据。)
三、运行效果
只需打开微信web开发者工具,打开时选择本项目文件夹,就会在开发者工具中打开了,可以正常的运行了。如果需要在手机上预览,可以在微信开发者工具中打开预览,通过手机扫描二维码即可预览。要预览就需要appkey,也就是上面准备说要先注册一个小程序开发者账号才有appkey.
运行截图如下:
四、其他补充
1、现在也有一些小程序商城是基于我这个项目代码稍微改造一下然后上线的。比较方便快捷。
2、关于购物车的功能,我有一篇文章让你更熟悉使用代码:微信小程序之购物车功能
注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
相关文章
- 微信小程序 - 沉浸式抽屉(非组件)
- 微信小程序 - 自定义swiper dots样式(非组件)
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
- 【小程序】微信小程序中安装配置LinUi组件库
- 【微信小程序】-- npm包总结 --- 基础篇完结(四十七)
- 【微信小程序】-- 分包(四十四)
- 微信小程序 - 实现获取手机验证码倒计时 60 秒(手机号+验证码登录功能)
- 微信小程序 - 深 / 浅拷贝实现方法
- 微信小程序 - 图像加载时渐隐淡入效果(image)
- Vue - 判断终端是否为:IE内核、opera内核、苹果、谷歌内核、火狐内核、是否为移动终端、ios终端、android终端、是否为iPhone或者QQHD浏览器、是否iPad、是否微信、是否QQ
- JavaDemo——使用机器人发送微信消息
- 获取微信小程序页面路径【保姆级教程】
- 微信公众号开发系列教程一(调试环境部署)
- 微信小程序七夕节礼物
- 全栈开发工程师微信小程序-中
- 全栈开发工程师微信小程序-上
- 微信小程序实现标签页滑块效果
- 微信小程序之----接口调用方式
- 微信 小程序组件 分页加强版
- 如何在微信公众号优雅的展示代码
- 微信小程序-自定义底部导航
- 自动回复消息-微信公众平台开发4(asp.net)
- 微信小程序云开发项目实战之商城开发日记 01
- 微信小程序图片上传(土豆温床)
- 微信小程序~获取网络状态
- 微信小程序自定义组件的坑之 hidden、boolean 属性和花括号
- 微信小程序实战–集阅读与电影于一体的小程序项目(四)
- 微信小程序之圆形进度条(自定义组件)
- 微信小程序 自定义单选复选按钮组的实现(用于实现购物车产品列表功能)
- 微信小程序下拉刷新PullDownRefresh的一些坑
- 微信小程序学习第4天:实现9宫格内容水平垂直居中