【開源】小程式And公眾號商城，外加後臺，功能齊全！

geekape發表於2018-12-01

前言

一個集微信公眾號商城/小程式商城/商城後臺的一個開源專案，後臺是基於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(微信小程式）專案

  1. 下載整個包之後，進行根目錄mpvue/weiapp資料夾。
  2. 執行npm install，如果你安裝了cnpm，你就可以使用cnpm install
  3. 除錯專案：執行npm run dev命令，開啟微信開發者工具，把整個weiapp目錄選進去，就可以邊改邊看程式碼
  4. 打包上傳專案：使用命令npm run build，然後在微信開發者工具右上角點選上傳就可以上傳開發版本了。

wap(微信公眾號）專案

  1. 同上，進入根目錄mpvue/wap資料夾。
  2. 同上，執行npm install或cnpm install
  3. 本地除錯：專案採用的是Vue3，所以執行npm run serve命令，預設開啟localhost:8080，就可以直接除錯了
  4. 打包上傳專案：使用命令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，也歡迎加入我們的內測群，一起交流！

【開源】小程式And公眾號商城，外加後臺，功能齊全！

  • 掃碼預覽，要用微信掃碼開啟，不然獲取不到使用者資訊

【開源】小程式And公眾號商城，外加後臺，功能齊全！

【開源】小程式And公眾號商城，外加後臺，功能齊全！

相關文章