【開源】小プログラムAnd公衆号ショッピングモール、バックグラウンドを加えて、機能がそろっています!

前言
1つの集微信公衆番号商城/小プログラム商城/商城バックグラウンドの1つのオープンソースプロジェクトで、バックグラウンドはWeiPHP5.0に基づいて開発され、WeiPHPは簡潔で強大なオープンソース微信公衆プラットフォーム開発フレームワークであり、微信機能プラグイン化開発、多公衆番号管理、配置簡単である.
ここでは主にフロントエンドについて紹介します(本当にバックエンドがよくわかりません～)、図がなくて真相がなくて、上図(画像が少し大きい)、文章の終わりは と です.
1.ディレクトリ構造
オープンソースプロジェクトの階層1のディレクトリ構造:

├── LICENSE.txt
├── README.md
├── application
├── build.php
├── composer.json
├── composer.lock
├── config
├── images
├── mpvue //              
├── public
├── route
├── server.php
├── think
├── thinkphp
├── vendor
└── weiapp_demo

以下は、ショッピングモールのフロントエンドページの3階建てのディレクトリ構造です.

├── 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/VueCli 3)である.バックエンドは主にWeiPHP,ThinkPHPMysqlなどである.

Mpvue:Vueを使用してウィジェットを開発し、H 5

の移植を容易にする

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

を実行する.

ローカルデバッグ:プロジェクトはVue 3を採用しているので、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.最後に
最後に、プロジェクトは内部の複数の人のテストを経て、完全に商用に使用することができます.もちろん、環境の違いによって、開発者の違いには潜在的な問題がたくさんあります.もしこのオープンソースのプロジェクトに興味があれば、weiphp 5を見てみましょう.0二次開発マニュアル、使用中にどんな問題があっても、オンラインでBugを提出することができます.私たちの内測群に参加して、一緒に交流することを歓迎します.

オンラインプレビュー、コピーリンクを微信ブラウザに開いて、さもなくば情報

を取得できません.

Github商城ソース、starを歓迎します!

先端交流のQQ群:3619,79424、興味があれば

を加えることができます