mpvue-xbyjShop
基于mpvue的微信小程序商城（小程序端，服务端）
小程序端
技术栈
mpvue + mpvue-router-patch + mpvue-entry + vuex + webpack + ES6/7 + flyio + mpvue-wxparse
项目运行
微信开发中工具选中mpvue-xbyjShop/buyer作为项目目录即可
功能列表
页面
- 首页 -- 完成
- 分类商品 -- 完成
- 商家品牌、品牌详情 -- 完成
- 新品首发 -- 完成
- 人气推荐 -- 完成
- 专题商品、专题详情 -- 完成
- 分类首页 -- 完成
- 搜索页 -- 完成
- 商品详情 -- 完成
- 评论页 -- 完成
- 购物车 -- 完成
- 下单页 -- 完成
- 支付页、支付结果页 -- 完成
- 我的订单、订单详情页 -- 完成
- 优惠卷
- 我的收藏 -- 完成
- 我的足迹 -- 完成
- 地址管理页 -- 完成
- 意见反馈
- 物流查询
组件
- 商品筛选组件 -- 综合、价格、分类
功能
- 专题评论
- 搜索商品
- 商品收藏
- 加入购物车
- 购物车商品的编辑、删除、批量操作
- 浏览记录
- 收货地址的增、删、改
- 下单支付.....
效果展示
首页、商品分类页
品牌详情页、人气推荐页
专题、专题详情
分类首页、搜索页
商品详情、购物车
确认订单、付款页
付款结果、个人中心
我的订单、订单详情
优惠卷、我的收藏
我的足迹、地址管理
意见反馈、物流查询
服务端
服务端api基于Ｎode.js+ThinkJS+MySQL
项目运行
创建数据库xbyjshop
导入mpvue-xbyjShop/server目录下的xbyjShop.sql数据
修改两个配置文件，见下面
安装依赖 npm install
启动项目 npm start
修改数据库配置文件
server/src/common/config/database.js
const mysql = require('think-model-mysql');
module.exports = {
handle: mysql,
database: 'xbyjshop',
prefix: 'xbyjshop_',
encoding: 'utf8mb4',
host: '127.0.0.1',
port: '3306',
user: 'root',
password: '你的密码',
dateStrings: true
};
修改微信登录和微信支付配置文件
server/src/common/config/config.js
// default config
module.exports = {
default_module: 'api',
weixin: {
appid: '', // 小程序 appid
secret: '', // 小程序密钥
mch_id: '', // 商户帐号ID
partner_key: '', // 微信支付密钥
notify_url: '' // 微信异步通知
}
};
上线部署
腾讯云ECS CentOS 7.3 64
PM2管理nodejs进程
Nginx反向代理
配置HTTPS（微信小程序接口必须是HTTPS）
数据接口： https://www.xuanbiyijue.com/api/具体的步骤，之后有空详细补一篇吧；
说明
如果本项目对您有帮助，欢迎 "Star" 支持一下 谢谢~
参考的原生微信小程序tumobi/nideshop-mini-program
最后
1、欢迎关注我的公众号，还有个技术交流群(备注自己github账号哦)
公众号、技术交流群
2、捐赠 Donate
如果我的项目对你有帮助，也可以给我打赏一下哦~
支付宝和微信支付
License
[GPL]
-
mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。 实践案例 美团旗下小程序：美团汽车票 和 美团充电，此外，正有一大批小程序正在接入中。 名称由来 mp：mini program 的
-
针对很多需要h5和小程序页面同构开发的场景，开发者会出现很多h5的vue组件直接搬到mpvue中调试的开发流程。虽然mpvue支持大部分的vue语法，但是仍有些边界 情况需要开发者自行处理。为了提升开发效率，我们提供mpvue-lint插件。目前有两个功能模块，语法检查模块和内存检查模块 mpvue-lint 语法检查 语法检查模块,mpvue-lint检测h5版本的vue组件是否符合mpvue语
-
我们是在 vue-loader 上做的修改，增加了建构到微信小程序 的若干能力。除此之外与原 vue-loader 文档 保持一致，所以本文档只列下修改的地方。 如果你对 vue-loader 不是很熟悉的话，强烈建议先阅读原文档一遍，下面的内容会默认你已经知道了什么是 vue-loader 和她能做什么。 开始 mpvue-loader 是 vue-loader 的一个扩展延伸版，类似于超集的关
-
辅助 mpvue 快速开发 Page 级小程序页面的工具，所以也需要有一定的小程序开发经验。 mpvue QuickStart 只支持项目级应用开发，对 Page 级和自定义组件 Component 级小程序页面开发场景缺少支持，而 simple 刚好来填补这部分需求，用以支持 mpvue 和原生小程序（或者其他方式小程序）的混用。 工具用法 command line # install by g
-
This package is auto-generated. For pull requests please see src/platforms/mp/entry-compiler.js. This package can be used to pre-compile Vue 2.0 templates into render functions to avoid runtime-compil
-
mpvue 资源路径解析插件 使用示例： const MpvuePlugin = require('webpack-mpvue-asset-plugin') // webpack config { entry: [], output: { path: path.resolve(__dirname, 'dist'), filename: 'foo.bundle.js' }