前言一个集成微信公众号商城/小程序商城/商城后台的开源项目，后台基于WeiPHP5.0开发，WeiPHP是一个简单而强大的开源微信公众平台开发框架，微信功能插件-在Development中，多重公众号管理，配置简单。这里主要介绍一下前端方面（后端真的不懂~），无图无真相，上图（图有点大），源码地址和公众号商城体验地址在文末：1.目录结构开源项目号一级目录结构：├──LICENSE.txt├──README.md├──application├──build.php├──composer.json├──composer.lock├──config├──images├──mpvue//applet和公众号mall源码在这里├──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-.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├──配置│├──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组件和资源...VueRouter/Vuex/VueCli3);后端主要是WeiPHP、ThinkPHP、Mysql等Mpvue：使用Vue开发小程序，移植方便H5VueCli3：商城的脚手架，和小程序代码大致相同商城路由VueX：商城全局状态Vant：有赞UI组件库WEUI：微信小程序UI组件库Flyio：兼容小程序、网页等的请求库WxParse：富文件解析小程序库....3。项目运行及打包项目基于Mpvue（根目录mpvue/weiapp）和Vue（根目录mpvue/wap）开发。您必须安装NodeJs和npm。推荐直接从NodeJs官网下载安装包。weiapp（微信小程序）项目下载整个包后，进入根目录mpvue/weiapp文件夹。运行npminstall，如果已经安装了cnpm，可以使用cnpminstall调试项目：运行npmrundev命令，打开微信开发者工具，选择整个weiapp目录，边修改边看代码打包和上传项目：使用命令npmrunbuild，然后点击微信开发者工具右上角的上传，上传开发版。wap（微信公众号）项目同上，进入根目录mpvue/wap文件夹。同上，本地调试运行npminstall或cnpminstall：项目使用Vue3，所以运行npmrunserve命令，默认打开localhost:8080，可以直接调试打包上传的项目：使用命令npmrunbuild，默认生成的文件夹在根目录public/wap，上传打包后的文件夹即可访问提示：本地调试：因为是微信公众号项目需要跳转获取用户信息，所以在本地调试时，将wap/src/app.vue文件中的跳转注释掉，手动使用window.localStorageAPI添加openid，默认为-3；打开微信开发者工具获取小程序项目存储中的PHPSSEEID值。window.localStorage.setItem("PHPSESSID","xxxxxxxxxxxxxxxxxxxxxxxx");window.localStorage.setItem("openid",-3);4.阅读代码，学习你将获得的知识Vue项目本地开发接口调试代理配置Mpvue转H5需要修改什么Scss样式文件分类，公共Scss样式配置BasicVueRouter使用Vuex页面适配方案的简单示例（pxtorpx/pxtorem)小程序UI组件的使用组件开发等等等....5。最后，我想说几句。该项目已通过内部多人测试，可用于商业用途。当然，由于环境和开发人员的不同，也存在很多潜在的问题。如果你有兴趣使用这个开源项目，可以先阅读weiphp5.0二次开发手册。如果您在使用过程中遇到任何问题，可以在线提交bug。欢迎加入我们的内测群，一起交流！在线预览，复制链接到微信浏览器打开，否则无法获取Github商城源码，欢迎star！前端交流QQ群：361979424，有兴趣的可以加
