👄小程序And公众号商城,外加后台,长期更新,点star关注!
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
application first commit Dec 1, 2018
config first commit Dec 1, 2018
images first commit Dec 1, 2018
mpvue first commit Dec 1, 2018
public first commit Dec 1, 2018
route 上传遗漏的部分文件 Dec 1, 2018
thinkphp 上传遗漏的部分文件 Dec 1, 2018
vendor 上传遗漏的部分文件 Dec 1, 2018
weiapp_demo 上传遗漏的部分文件 Dec 1, 2018
LICENSE.txt first commit Dec 1, 2018
README.md Update README.md Dec 1, 2018
build.php first commit Dec 1, 2018
composer.json first commit Dec 1, 2018
composer.lock first commit Dec 1, 2018
server.php 上传遗漏的部分文件 Dec 1, 2018
think 上传遗漏的部分文件 Dec 1, 2018

README.md

前言

一个集微信公众号商城/小程序商城/商城后台的一个开源项目,后台是基于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,ThinkPHPMysql等。

  • 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 installcnpm 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,也欢迎加入我们的内测群,一起交流!

  • 扫码预览,要用微信扫码打开,不然获取不到用户信息