【开源】小程序And公众号商城,外加后台,功能齐全!
前言
一个集微信公众号商城/小程序商城/商城后台的一个开源项目,后台是基于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开发小程序,方便移植H5VueCli3
:公众号商城的脚手架,和小程序代码大致相同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,也欢迎加入我们的内测群,一起交流!
- 扫码预览,要用微信扫码打开,不然获取不到用户信息
- Github商城源码,欢迎star!
- 前端交流的QQ群,福利多多,QQ扫码加入
【开源】小程序And公众号商城,外加后台,功能齐全!相关推荐
- 微信小程序+微信公众号商城
五分钟搭建微信小程序+微信公众号商城, 码云最有价值开源项目之一? 开源地址 演示地址:
- 基于thinkPHP5.0开发,傻瓜式安装小程序及公众号商城
CRMEB小程序商城,是我们开发的一款开源电商系统,为中小企业提供最佳的新零售解决方案.采用thinkPHP5.0框架开发,执行效率.扩展性.稳定性值得信赖.永久更新维护,界面美观大方,一键式傻瓜安装 ...
- 小程序和公众号商城【免费开源+小白式安装】
小程序公众号免费开源下载 1.开源免费: 2.实时更新: 3.随时决解你的所有问题: 小程序源码下载地址:https://github.crmeb.net/u/weidong
- 小程序、公众号商城(vue、php)从小白学起;
基于tp5.0开发的小程序公众号打通商城系统. 1.免费源码,完善文档支持,五分钟快速安装: 2.官方持续更新升级: 3.代码规范,易读性强,适合二次开发: 4.拼团.秒杀.砍价.推广等营销功能完善: ...
- 微信小程序+直播+公众号,新商云商城系统,免费试用
随着电商行业的发展,小程序+直播+公众号商城变得越来越流行.很多企业都开发了专属的小程序直播商城,不仅有利于宣传推广商城店铺,会可以利用移动用户流量创建私域流量.那么究竟小程序直播商城应该如何搭建呢? ...
- 开源免费微信小程序、公众号打通商城
开源免费微信小程序.公众号打通商城 源码地址 : http://github.crmeb.net/u/blue 新的UI 功能简介 源码地址 : http://github.crmeb.net/u/b ...
- 开源版商城源码V2.0【小程序 + H5+ 公众号 + APP】
内容目录 一.详细介绍 二.效果展示 1.部分代码 2.效果图展示 三.学习资料下载 一.详细介绍 这是一款轻量级.高性能.前后端分离的电商系统,,支持微信小程序 + H5+ 公众号 + APP,前后 ...
- PHP开发B2C商城 微信小程序商城系统源码+数据库,轻量级前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP
项目介绍 一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
- 创业开花店一年多的感想-逐步完成了一套完整的鲜花商城系统,包含前端、后端、移动端、小程序、公众号
创业开花店一年多的感想-逐步完成了一套完整的鲜花商城系统,包含前端.后端.移动端.小程序.公众号 初心 时间节点 遇到的问题和解决办法 我们做了什么 我们做了一套完整的鲜花商城系统 官网介绍 后端介绍 ...
最新文章
- 随笔 | 抢红包不是一件小事
- 5、优化MySQL服务器
- 给力!神策数据创新推出数字化运营闭环解决方案!
- C/C++中extern关键字详解与应用
- php 字符串的比较大小,PHP如何比较字符串的大小?
- 计算机组成与系统结构名词解释,北京邮电大学 计算机系统结构(体系结构) 期末复习 术语解释...
- System.Xml名称空间下的支持DOM的类型
- 17-取石子-hdu1846(巴什博奕)
- access和mysql4注入小技巧
- linux session存储目录,Linux session(会话)
- 智能商业20讲--曾明.听后感悟
- win10原版操作系统安装过程【超详细】
- Oracle导入导出二进制文件,你不知道的事
- 微信强制使用本机浏览器打开指定链接是怎么做的
- 四川省乐山市谷歌高清卫星地图下载
- c语言——常见占位符(格式说明)
- 三星Note 7惊魂48天:产品质量比创新和体验更重要
- Centos7搭建SpringBlade的前端Saber
- GCSE英语语言考试-角色定位
- 录入设备(3)——51单片机原理图及PCB设计