[开源] 小程序 And 公众号商城，外加后台，功能齐全！

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2220 天前的主题，其中的信息可能已经有所发展或是发生改变。

前言

一个集微信公众号商城/小程序商城/商城后台的一个开源项目，后台是基于WeiPHP5.0开发的，WeiPHP是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发,多公众号管理,配置简单。

这里主要介绍下前端方面（实在是后端的不太懂～），没图没真相，上图（图片有点大），文章结尾有源码地址和公众号商城体验地址：

前端页面思维导图

前端页面部分 UI 图

商城后台部分界面

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 开发小程序，方便移植 H5
VueCli3：公众号商城的脚手架，和小程序代码大致相同
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.localStorage API 添加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 群：361979424，有兴趣可以加

第 1 条附言 · 2018-12-01 15:08:36 +08:00

扫码预览，要用微信扫码打开，不然获取不到用户信息

第 2 条附言 · 2018-12-01 17:41:43 +08:00

已经上传了部分遗漏的文件，可正常安装了

第 3 条附言 · 2018-12-03 10:29:51 +08:00

**内测群超 100 就需要邀请了，有兴趣进群的可以扫码加好友，有人会邀请你进群的**

![]( https://user-gold-cdn.xitu.io/2018/12/3/16771e5ff9d58fd6?w=1080&h=1920&f=jpeg&s=103503)

第 4 条附言 · 2018-12-03 10:30:30 +08:00

内测群超100就需要邀请了，有兴趣进群的可以扫码加好友，有人会邀请你进群的

15 条回复 • 2018-12-04 09:06:14 +08:00

hzlzh

2018-12-01 14:55:49 +08:00

试一下，看起来挺不错的
小建议：项目 repo 的预览 Demo 直接留一个二维码方面查看会更方便

geekape

2018-12-01 15:08:57 +08:00

@hzlzh 谢谢，已经生成一个了

mzsongyan

2018-12-01 15:51:31 +08:00

报错：未定义数组索引：state

slwl

2018-12-01 15:54:03 +08:00 via iPhone

错误

Tink

2018-12-01 16:39:37 +08:00 via iPhone

make

Tink

2018-12-01 16:39:41 +08:00 via iPhone

mark

Rcnaec

2018-12-01 16:56:26 +08:00

mark

geekape

2018-12-01 17:42:15 +08:00

@slwl
@mzsongyan
@Tink
@Rcnaec 已经上传了部分遗漏的文件，可正常安装了

binghe

2018-12-01 18:18:35 +08:00 via Android

安卓微信 6.6.7
![]( https://ww1.sinaimg.cn/large/007iUjdily1fxrewnr7ljj30u01hc179)

SingeeKing

2018-12-01 18:48:05 +08:00

扫码打开的，一直都是「自动获取用户信息中…」，多次刷新、重新打开问题一样

iOS 12.1

SingeeKing

2018-12-01 18:48:44 +08:00

嗯。。。重启微信后打开了🌚
然后报错「未定义数组索引：state 」

likai

2018-12-01 19:56:53 +08:00

只说一个.
https://www.weiphp.cn/home/index/product/pbid/21#
这个页面有个二手开发手册

zdb1115

2018-12-02 22:50:34 +08:00

微信群方便拉下吗，方便的话，私信下微信。谢谢。

geekape

2018-12-03 10:31:16 +08:00

@zdb1115 看上面新增的码

maemolee

2018-12-04 09:06:14 +08:00

mark