摘要：前言一個(gè)集微信公眾號(hào)商城小程序商城商城后臺(tái)的一個(gè)開(kāi)源項(xiàng)目，后臺(tái)是基于開(kāi)發(fā)的，是一個(gè)簡(jiǎn)潔而強(qiáng)大的開(kāi)源微信公眾平臺(tái)開(kāi)發(fā)框架，微信功能插件化開(kāi)發(fā)多公眾號(hào)管理配置簡(jiǎn)單。微信小程序項(xiàng)目下載整個(gè)包之后，進(jìn)行根目錄文件夾。

一個(gè)集微信公眾號(hào)商城/小程序商城/商城后臺(tái)的一個(gè)開(kāi)源項(xiàng)目，后臺(tái)是基于WeiPHP5.0開(kāi)發(fā)的，WeiPHP是一個(gè)簡(jiǎn)潔而強(qiáng)大的開(kāi)源微信公眾平臺(tái)開(kāi)發(fā)框架，微信功能插件化開(kāi)發(fā),多公眾號(hào)管理,配置簡(jiǎn)單。

這里主要介紹下前端方面（實(shí)在是后端的不太懂～），沒(méi)圖沒(méi)真相，上圖（圖片有點(diǎn)大），文章結(jié)尾有源碼地址和公眾號(hào)商城體驗(yàn)地址：

開(kāi)源項(xiàng)目第一層的目錄結(jié)構(gòu)：

├── LICENSE.txt
├── README.md
├── application
├── build.php
├── composer.json
├── composer.lock
├── config
├── images
├── mpvue // 小程序和公眾號(hào)商城源碼在這
├── public
├── route
├── server.php
├── think
├── thinkphp
├── vendor
└── weiapp_demo

以下是商城前端頁(yè)面的三層的目錄結(jié)構(gòu)：

├── wap // 公眾號(hào)商城（VueCli3腳手架）
│   ├── README.md
│   ├── babel.config.js
│   ├── package-lock.json
│   ├── package.json // 所有的npm包
│   ├── postcss.config.js // px轉(zhuǎn)rem
│   ├── public
│   │   ├── favicon.ico
│   │   └── index.html 
│   ├── src // 源碼目錄
│   │   ├── App.vue
│   │   ├── assets
│   │   ├── components // 公共組件
│   │   ├── main.js // 公共配置文件
│   │   ├── pages // 所有頁(yè)面
│   │   ├── router // 頁(yè)面路由
│   │   ├── store // 全局狀態(tài)
│   │   └── utils // 一些公用方法
│   ├── static
│   │   ├── img //圖片資源
│   │   └── styles // 樣式資源，主要是Scss
│   └── vue.config.js // 項(xiàng)目的配置，代理/打包等
└── 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 // 富文本解析

前端是使用到的技術(shù)棧有Mpvue,Vue全家桶(Vue/VueRouter/Vuex/VueCli3)；后端主要是WeiPHP,ThinkPHP，Mysql等。

Mpvue ：使用Vue開(kāi)發(fā)小程序，方便移植H5

VueCli3：公眾號(hào)商城的腳手架，和小程序代碼大致相同

VueRouter：公眾號(hào)商城的路由

VueX：商城的全局狀態(tài)

Vant: 有贊的UI組件庫(kù)

WEUI：微信小程序的UI組件庫(kù)

Flyio：兼容小程序和網(wǎng)頁(yè)端等等的請(qǐng)求庫(kù)

WxParse：小程序富文件解析庫(kù)

....

項(xiàng)目是基于Mpvue（根目錄mpvue/weiapp）和Vue(根目錄mpvue/wap)開(kāi)發(fā)的，你必須選安裝好NodeJs和npm，建議到NodeJs官網(wǎng)直接下載安裝包。

下載整個(gè)包之后，進(jìn)行根目錄mpvue/weiapp文件夾。

運(yùn)行npm install，如果你安裝了cnpm，你就可以使用cnpm install

調(diào)試項(xiàng)目：運(yùn)行npm run dev命令，打開(kāi)微信開(kāi)發(fā)者工具，把整個(gè)weiapp目錄選進(jìn)去，就可以邊改邊看代碼

打包上傳項(xiàng)目：使用命令npm run build，然后在微信開(kāi)發(fā)者工具右上角點(diǎn)擊上傳就可以上傳開(kāi)發(fā)版本了。

同上，進(jìn)入根目錄mpvue/wap文件夾。

同上，運(yùn)行npm install或cnpm install

本地調(diào)試：項(xiàng)目采用的是Vue3，所以運(yùn)行npm run serve命令，默認(rèn)打開(kāi)localhost:8080，就可以直接調(diào)試了

打包上傳項(xiàng)目：使用命令npm run build,默認(rèn)生成的文件夾是在根目錄public/wap下,上傳打包好的文件夾就可以訪問(wèn)了

Tips:

本地調(diào)試: 由于是微信公眾號(hào)項(xiàng)目，要跳轉(zhuǎn)獲取用戶信息，所以在本地調(diào)試的時(shí)候，在wap/src/app.vue文件中注釋掉跳轉(zhuǎn)，并且手動(dòng)使用window.localStorage API 添加openid,默認(rèn) -3；打開(kāi)微信開(kāi)發(fā)者工具在小程序項(xiàng)目Storage中獲取PHPSSEEID值。

window.localStorage.setItem("PHPSESSID", "xxxxxxxxxxxxxxxxxxxxxxx");
window.localStorage.setItem("openid", -3);

Vue項(xiàng)目本地開(kāi)發(fā)接口調(diào)試的代理配置

Mpvue 轉(zhuǎn) H5 需要修改的地方

Scss 樣式文件的分類，公共Scss樣式的配置

VueRouter 的基本使用

Vuex 的簡(jiǎn)單例子

頁(yè)面適配的方案（px轉(zhuǎn)rpx/px轉(zhuǎn)rem)

小程序UI組件的使用方法

組件化開(kāi)發(fā)

等等等等....

最后說(shuō)幾句，項(xiàng)目經(jīng)內(nèi)部多人測(cè)試，完全可以用于商用，當(dāng)然由于環(huán)境的不同，開(kāi)發(fā)人員的不同還有很多潛在的問(wèn)題，如果你有興趣使用這個(gè)開(kāi)源的項(xiàng)目，可以先看看weiphp5.0二次開(kāi)發(fā)手冊(cè)，使用過(guò)程中碰到任何的問(wèn)題，都可以在在線提交Bug，也歡迎加入我們的內(nèi)測(cè)群，一起交流！

線上預(yù)覽，復(fù)制鏈接到微信瀏覽器打開(kāi)，不然獲取不到信息

Github商城源碼，歡迎star！

前端交流的QQ群：361979424，有興趣可以加