前言
一個集微信公衆號商城/小程序商城/商城後臺的一個開源項目,後臺是基於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開發小程序,方便移植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,有興趣可以加