# 小小米(vue-store 微信小程序版)
## 前言
前段时间模仿小米商城做了一个PC端的商城网站[vue-store]( https://github.com/hai-27/vue-store ),最近看了下微信小程序的文档,所以就动手做了个微信小程序版的。
## 说明
> 本项目复用了 [vue-store]( https://github.com/hai-27/vue-store ) 的后端,在 [store-server](https://github.com/hai-27/store-server) 原来的基础上添加了微信小程序的登录api。
> 利用网课的空余时间边学边做,略为粗糙,有问题或者有好的建议欢迎提Issues。
> 由于是用测试号做的,没有线上预览版。
> PC端Web版:[vue-store]( https://github.com/hai-27/vue-store )。
> 后端: [store-server](https://github.com/hai-27/store-server) 。
> 如果觉得这个项目还不错,您可以点右上角 `Star`支持一下, 谢谢! ^_^
## 项目简介
为区分小米商城官方小程序,该项目我命名为小小米。该项目与小米官方没有关系,纯属个人瞎搞,若需要购买小米产品请到小米官方商城。
项目包含4个tabBar:首页、发现页(即商品展示页)、购物车、我的。另有商品详情页、我的收藏、订单结算页面、我的订单。
实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、用户购物车、订单结算、用户订单、用户收藏列表。
该项目整体参考了 [vue-store]( https://github.com/hai-27/vue-store ) 实现,基本实现了其所有功能,可以说是其的微信小程序版。
后端复用了 [vue-store]( https://github.com/hai-27/vue-store ) 的后端,在 [store-server](https://github.com/hai-27/store-server) 原来的基础上添加了微信小程序的登录api。
## 技术栈
- **前端:** 原生微信小程序
- **后端:**`Node.js`、`Koa框架`
- **数据库:**`Mysql`
## 功能模块
### 登录
小程序在启动的时候调用 **wx.login** 获取登录凭证(**code**),然后把code回传到项目的后端服务器 ,调用**auth.code2Session**接口,换取用户唯一标识 **OpenID** 和 会话密钥 **session_key**。 然后把 **OpenID** 注册到项目数据库生成本系统的唯一 **user_id** ,用于在本项目的业务验证。
### 首页
首页主要是对商品的展示,有轮播图展示推荐的商品,热门商品分类九宫格、分类别对热门商品进行展示。
![](https://raw.githubusercontent.com/hai-27/vue-store/master/public/screenshots/weChatMiniProgramScreenshots/home.png)
### 发现(即全部商品)
全部商品页面集成了全部商品展示、商品分类查询,以及根据关键字搜索商品结果展示。
![](https://raw.githubusercontent.com/hai-27/vue-store/master/public/screenshots/weChatMiniProgramScreenshots/goods.png)
### 商品详情页
商品详情页主要是对某个商品的详细信息进行展示,用户可以在这里把喜欢的商品加入购物车或收藏列表。
![](https://raw.githubusercontent.com/hai-27/vue-store/master/public/screenshots/weChatMiniProgramScreenshots/detail.png)
### 我的购物车
购物车采用[omix](https://github.com/Tencent/omi)进行全局状态管理,实现了购物车商品的添加、删除、增加商品数量、选择结算商品、全选购物车商品结算等功能。
![](https://raw.githubusercontent.com/hai-27/vue-store/master/public/screenshots/weChatMiniProgramScreenshots/shoppingCart.png)
### 订单结算
用户在购物车选择了准备购买的商品后,点击“去结算”按钮,会来到该页面。
用户在这里选择收货地址,确认订单的相关信息,然后确认购买。
![](https://raw.githubusercontent.com/hai-27/vue-store/master/public/screenshots/weChatMiniProgramScreenshots/confirmOrder.png)
### 我的收藏
用户在商品的详情页,可以通过点击加入 喜欢 按钮,把喜欢的商品加入到收藏列表。
![](https://raw.githubusercontent.com/hai-27/vue-store/master/public/screenshots/weChatMiniProgramScreenshots/collection.png)
### 我的订单
对用户的所有订单进行展示。
![](https://raw.githubusercontent.com/hai-27/vue-store/master/public/screenshots/weChatMiniProgramScreenshots/orders.png)
### 我的
![](https://raw.githubusercontent.com/hai-27/vue-store/master/public/screenshots/weChatMiniProgramScreenshots/mine.png)
## 运行项目
```
请clone项目到本地
git clone https://github.com/hai-27/store-miniprogram.git
导入项目到微信开发者工具即可
```
**作者** [hai-27](https://github.com/hai-27)
2020年3月31日
没有合适的资源?快使用搜索试试~ 我知道了~
仿小米商城微信小程序源码+项目说明.zip
共131个文件
js:33个
json:28个
wxss:27个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 200 浏览量
2024-05-14
19:38:33
上传
评论
收藏 206KB ZIP 举报
温馨提示
为区分小米商城官方小程序,该项目我命名为小小米。该项目与小米官方没有关系,纯属个人瞎搞,若需要购买小米产品请到小米官方商城。 项目包含4个tabBar:首页、发现页(即商品展示页)、购物车、我的。另有商品详情页、我的收藏、订单结算页面、我的订单。 实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、用户购物车、订单结算、用户订单、用户收藏列表。
资源推荐
资源详情
资源评论
收起资源包目录
仿小米商城微信小程序源码+项目说明.zip (131个子文件)
cart-empty.jpg 48KB
create.js 9KB
obaa.js 8KB
details.js 4KB
shoppingCart.js 4KB
shoppingCart.js 4KB
path.js 4KB
goods.js 3KB
index.js 3KB
ConfirmOrder.js 3KB
index.js 2KB
index.js 2KB
orders.js 2KB
app.js 2KB
searchbar.js 2KB
util.js 2KB
mine.js 1KB
index.js 1KB
index.js 1KB
index.js 1KB
collection.js 1KB
index.js 1KB
index.js 968B
index.js 817B
index.js 675B
index.js 427B
index.js 399B
Mylist.js 306B
index.js 297B
logs.js 276B
index.js 267B
index.js 244B
index.js 155B
index.js 155B
project.config.json 2KB
app.json 1KB
index.json 322B
goods.json 309B
details.json 305B
shoppingCart.json 262B
ConfirmOrder.json 239B
orders.json 239B
sitemap.json 197B
mine.json 188B
collection.json 127B
index.json 125B
index.json 93B
logs.json 80B
Mylist.json 51B
searchbar.json 51B
index.json 27B
index.json 27B
index.json 27B
index.json 27B
index.json 27B
index.json 27B
index.json 27B
index.json 27B
index.json 27B
index.json 27B
index.json 27B
index.json 27B
README.md 5KB
category_3.png 12KB
user.png 11KB
user_fill.png 9KB
category_4.png 8KB
search.png 7KB
category_5.png 7KB
shoppingCart.png 7KB
search_fill.png 6KB
shoppingCart_fill.png 5KB
category_8.png 5KB
home.png 5KB
category_2.png 4KB
home_fill.png 4KB
category_7.png 3KB
category_1.png 3KB
category_6.png 3KB
details.wxml 2KB
shoppingCart.wxml 2KB
searchbar.wxml 2KB
index.wxml 1KB
ConfirmOrder.wxml 1KB
mine.wxml 1KB
Mylist.wxml 964B
index.wxml 793B
orders.wxml 701B
goods.wxml 700B
index.wxml 665B
index.wxml 653B
index.wxml 583B
index.wxml 570B
index.wxml 388B
collection.wxml 305B
index.wxml 241B
index.wxml 216B
logs.wxml 179B
index.wxml 161B
index.wxml 117B
共 131 条
- 1
- 2
资源评论
FL1768317420
- 粉丝: 4312
- 资源: 4730
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- c51_2_2.c
- ASCII American Standard Code for Information Interchange
- 一个chm格式的 SQL 函数手册-SQL语言手册文档
- 计算当前月份的天数和剩余天数
- 基于ARM的指令调度和延迟分支
- 基于Vue和TypeScript的极简聊天应用设计源码 - HasChat
- 基于Vue2全家桶和Zcool数据的图片收集网站设计源码 - cool-picture
- 基于C和C++的二维绘制工具设计源码 - DrawPro
- Object.defineProperty 的 IE 补丁object-defineproperty-ie-master.zip
- 整卷预览.mhtml
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功