前言
一个集微信公众号商城/小程序商城/商城后台的一个开源项目,后台是基于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,也欢迎加入我们的内测群,一起交流!
image- 线上预览,复制链接到微信浏览器打开,不然获取不到信息
- Github商城源码,欢迎star!
- 前端交流的QQ群:361979424,有兴趣可以加
网友评论