微信小程序的零食商城

概述

这是一个微信小程序的商城应用,功能包括了首页、分类、购物车、个人中心、商品列表、商品详情、订单、地址管理等

详细

 

一、准备工作

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大师发表,拒绝转载,转载需要作者授权
├── api │   └── api.js //接口 ├── app.wpy //入口文件 ├── components //组件 │   ├── address_add.wpy //新增地址组件 │   ├── address_edit.wpy //编辑地址组件 │   ├── address_list.wpy //地址列表组件 │   ├── bomb_screen.wpy //首页弹屏组件 │   ├── collection_list.wpy //收藏列表组件 │   ├── comment_list.wpy //评论列表组件 │   ├── common //公共组件 │   │   ├── bottomLoadMore.wpy //底部加载更多组件 │   │   ├── placeholder.wpy //空列表显示组件 │   │   ├── timer.wpy //倒计时组件 │   │   ├── wepy-area-picker.wpy //省市区组件 │   │   ├── wepy-sign-time.wpy //签到组件 │   │   └── wepy-swipe-delete.wpy //左滑删除组件 │   ├── discover.wpy //发现列表 │   ├── filterSlider.wpy //筛选右侧栏组件 │   ├── filter_bar.wpy //分类排序组件 │   ├── order_item.wpy //订单列表组件 │   ├── points_detail.wpy //列表组件 │   ├── points_rule.wpy //列表组件 │   ├── rate.wpy //评分组件 │   ├── search.wpy //搜索组件 │   ├── shop_cart.wpy //购物车组件 │   ├── shop_grid_list.wpy //矩阵列表 │   ├── shop_item_list.wpy //条形列表 │   └── tab.wpy //选项卡组件 ├── images //图片文件夹 ├── pages //页面 │   ├── address.wpy //地址 │   ├── classify.wpy //分类 │   ├── collection.wpy //收藏 │   ├── comfire_order.wpy //确认订单 │   ├── comment.wpy //评论列表 │   ├── comment_add.wpy //添加评论 │   ├── exchange_goods.wpy //换货 │   ├── filter.wpy //筛选 │   ├── goods_detail.wpy //商品详情 │   ├── home.wpy //首页 │   ├── home_detail.wpy //首页详情 │   ├── info.wpy //我的 │   ├── logistics.wpy //物流 │   ├── messages.wpy //我的消息 │   ├── order.wpy //订单列表 │   ├── order_detail.wpy //订单详情 │   ├── pay_success.wpy //支付结果 │   ├── points.wpy //积分 │   ├── points_more.wpy //更多积分 │   ├── points_rule.wpy //积分规则 │   ├── register.wpy //注册 │   ├── reorder.wpy //-- │   ├── replenishment_goods.wpy //补货 │   ├── search.wpy //搜索 │   ├── setting.wpy //设置 │   ├── shop_cart.wpy //购物车 │   ├── sign_in.wpy //签到 │   ├── test.wpy //--- │   └── wholesale.wpy //现货批发 ├── plugins //插件 │   └── wxParse //富文本 │   ├── html2json.js │   ├── htmlparser.js │   ├── showdown.js │   ├── wxDiscode.js │   ├── wxParse.js │   ├── wxParse.wxml │   └── wxParse.wxss ├── styles //样式 │   ├── base.less │   ├── icon.less // 图标文件 │   └── style.less └── utils //工具类 ├── constant.js //常量 ├── md5.js //md5 ├── regions.js //省市区数据 ├── tip.js //提示弹框组件 ├── util.js //工具 └── wxRequest.js //ajax请求
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值