【开源】小程序And公众号商城,外加后台,功能齐全!

原创 猿梦 教程 web前端 177阅读 15 天前 举报

前言

一个集微信公众号商城/小程序商城/商城后台的一个开源项目,后台是基于WeiPHP5.0开发的,WeiPHP是一个简洁而强大的开源微信公众平台开发框架,微信功能插件化开发,多公众号管理,配置简单。

这里主要介绍下前端方面(实在是后端的不太懂~),没图没真相,上图(图片有点大),文章结尾有源码地址公众号商城体验地址

前端页面思维导图

前端页面部分UI图

商城后台部分界面

1. 目录结构

开源项目第一层的目录结构:

以下是商城前端页面的三层的目录结构:

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值。

4. 阅读代码你将收获的知识

  • Vue项目本地开发接口调试的代理配置
  • Mpvue 转 H5需要修改的地方
  • Scss 样式文件的分类,公共Scss样式的配置
  • VueRouter 的基本使用
  • Vuex 的简单例子
  • 页面适配的方案(px转rpx/px转rem)
  • 小程序UI组件的使用方法
  • 组件化开发
  • 等等等等....

5. 最后

最后说几句,项目经内部多人测试,完全可以用于商用,当然由于环境的不同,开发人员的不同还有很多潜在的问题,如果你有兴趣使用这个开源的项目,可以先看看weiphp5.0二次开发手册,使用过程中碰到任何的问题,都可以在在线提交Bug,也欢迎加入我们的内测群,一起交流!

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

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复