微信民众号商城/小顺序商城开源项目介绍及使用教程

媒介

一个集微信民众号商城/小顺序商城/商城背景的一个开源项目，背景是基于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：小顺序富文件剖析库
• &＃8230;.

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组件的运用要领
• 组件化开辟
• 等等等等&＃8230;.

5. 末了

末了说几句，项目经内部多人测试，完全能够用于商用，固然因为环境的差别，开辟人员的差别另有许多潜伏的题目，假如你有兴致运用这个开源的项目，能够先看看weiphp5.0二次开辟手册，运用过程中遇到任何的题目，都能够在在线提交Bug，也迎接到场我们的内测群，一同交换！

• 线上预览，复制链接到微信浏览器翻开，不然猎取不到信息
• Github商城源码，迎接star！
• 前端交换的QQ群：361979424，有兴致能够加