前言
一个集微信公众号商城/小程序商城/商城后台的一个开源项目，后台是基于WeiPHP5.0开发的，WeiPHP是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发,多公众号管理,配置简单。
这里主要介绍下前端方面（实在是后端的不太懂～），没图没真相，上图（图片有点大），文章结尾有源码地址和公众号商城体验地址：
1. 目录结构
开源项目第一层的目录结构：
├── LICENSE.txt├── README.md├── application├── build.php├── composer.json├── composer.lock├── config├── images├── mpvue // 小程序和公众号商城源码在这├── public├── route├── server.php├── think├── thinkphp├── vendor└── weiapp_demo复制代码
以下是商城前端页面的三层的目录结构：
├── wap // 公众号商城（VueCli3脚手架）│ ├── README.md│ ├── babel.config.js│ ├── package-lock.json│ ├── package.json // 所有的npm包│ ├── postcss.config.js // px转rem│ ├── public│ │ ├── favicon.ico│ │ └── index.html │ ├── src // 源码目录│ │ ├── App.vue│ │ ├── assets│ │ ├── components // 公共组件│ │ ├── main.js // 公共配置文件│ │ ├── pages // 所有页面│ │ ├── router // 页面路由│ │ ├── store // 全局状态│ │ └── utils // 一些公用方法│ ├── static│ │ ├── img //图片资源│ │ └── styles // 样式资源，主要是Scss│ └── vue.config.js // 项目的配置，代理/打包等└── weiapp // 小程序商城（Mpvue脚手架）├── README.md├── build│ ├── build.js│ ├── check-versions.js│ ├── dev-client.js│ ├── dev-server.js│ ├── utils.js│ ├── vue-loader.conf.js│ ├── webpack.base.conf.js│ ├── webpack.dev.conf.js│ └── webpack.prod.conf.js├── config│ ├── dev.env.js│ ├── index.js│ └── prod.env.js├── dist // 打包的目录│ ├── app.js│ ├── app.js.map│ ├── app.json│ ├── app.wxss│ ├── common│ ├── components│ ├── modules│ ├── pages│ └── static├── index.html├── package-lock.json├── package.json├── project.config.json├── src // 源码目录（以下同wap一样）│ ├── App.vue│ ├── app.json│ ├── common│ ├── components│ ├── main.js│ ├── pages│ ├── router│ ├── store│ └── utils├── static // 一些UI组件和资源│ ├── img│ ├── iview│ ├── styles│ ├── vant│ └── wxParse // 富文本解析复制代码
2. 技术栈
前端是使用到的技术栈有Mpvue,Vue全家桶(Vue/VueRouter/Vuex/VueCli3)；后端主要是WeiPHP,ThinkPHP，Mysql等。
Mpvue：使用Vue开发小程序，方便移植H5VueCli3：公众号商城的脚手架，和小程序代码大致相同VueRouter：公众号商城的路由VueX：商城的全局状态Vant: 有赞的UI组件库WEUI：微信小程序的UI组件库Flyio：兼容小程序和网页端等等的请求库WxParse：小程序富文件解析库....
3. 项目运行和打包
项目是基于Mpvue（根目录mpvue/weiapp）和Vue(根目录mpvue/wap)开发的，你必须选安装好NodeJs和npm，建议到NodeJs官网直接下载安装包。
weiapp(微信小程序）项目
下载整个包之后，进行根目录mpvue/weiapp文件夹。运行npm install，如果你安装了cnpm，你就可以使用cnpm install调试项目：运行npm run dev命令，打开微信开发者工具，把整个weiapp目录选进去，就可以边改边看代码打包上传项目：使用命令npm run build，然后在微信开发者工具右上角点击上传就可以上传开发版本了。wap(微信公众号）项目
同上，进入根目录mpvue/wap文件夹。同上，运行npm install或cnpm install本地调试：项目采用的是Vue3，所以运行npm run serve命令，默认打开localhost:8080，就可以直接调试了打包上传项目：使用命令npm run build,默认生成的文件夹是在根目录public/wap下,上传打包好的文件夹就可以访问了Tips:
本地调试:由于是微信公众号项目，要跳转获取用户信息，所以在本地调试的时候，在wap/src/app.vue文件中注释掉跳转，并且手动使用window.localStorageAPI 添加openid,默认 -3；打开微信开发者工具在小程序项目Storage中获取PHPSSEEID值。window.localStorage.setItem("PHPSESSID", "xxxxxxxxxxxxxxxxxxxxxxx");window.localStorage.setItem("openid", -3);复制代码
4. 阅读代码你将收获的知识
Vue项目本地开发接口调试的代理配置Mpvue 转 H5需要修改的地方Scss 样式文件的分类，公共Scss样式的配置VueRouter 的基本使用Vuex 的简单例子页面适配的方案（px转rpx/px转rem)小程序UI组件的使用方法组件化开发等等等等....5. 最后
最后说几句，项目经内部多人测试，完全可以用于商用，当然由于环境的不同，开发人员的不同还有很多潜在的问题，如果你有兴趣使用这个开源的项目，可以先看看weiphp5.0二次开发手册，使用过程中碰到任何的问题，都可以在在线提交Bug，也欢迎加入我们的内测群，一起交流！
扫码预览，要用微信扫码打开，不然获取不到用户信息
Github商城源码，欢迎star！前端交流的QQ群，福利多多，QQ扫码加入
