摘要:前言一个集微信公众号商城小程序商城商城后台的一个开源项目,后台是基于开发的,是一个简洁而强大的开源微信公众平台开发框架,微信功能插件化开发多公众号管理配置简单。微信小程序项目下载整个包之后,进行根目录文件夹。
前言
一个集微信公众号商城/小程序商城/商城后台的一个开源项目,后台是基于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下,上传打包好的文件夹就可以访问了
本地调试: 由于是微信公众号项目,要跳转获取用户信息,所以在本地调试的时候,在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群:361979424,有兴趣可以加
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/29727.html
摘要:前言一个集微信公众号商城小程序商城商城后台的一个开源项目,后台是基于开发的,是一个简洁而强大的开源微信公众平台开发框架,微信功能插件化开发多公众号管理配置简单。微信小程序项目下载整个包之后,进行根目录文件夹。 前言 一个集微信公众号商城/小程序商城/商城后台的一个开源项目,后台是基于WeiPHP5.0开发的,WeiPHP是一个简洁而强大的开源微信公众平台开发框架,微信功能插件化开发,多...
摘要:从版本开始,技术架构全新换代更名捷微。这是一款开源免费的微信运营平台,是的新一代产品,平台涵盖了微信公众号管理各种微信活动小程序微网站微商城分销商城小程序商城小程序网站砍价投票会员等等功能,是一套成熟的互联网运营产品。 JEEWX 从4.0版本开始,技术架构全新换代更名捷微H5。这是一款开源免费的微信运营平台,是jeewx的新一代产品,平台涵盖了:微信公众号管理、各种微信活动、小程序、...
摘要:源码地址功能简介商品能够对商品的状态分类管理出售中待上架库存中已售馨库存警戒回收站添加产品添加商品分类等功能会员站内会员的管理发放优惠劵发通知发图文消息增加余额会员行为详情站内通知微信端用户管理微信用户的管理分组行为观察添加标签等功能营销能 源码地址 功能简介 1.商品: 能够对商品的状态分类管理 (出售中、待上架、库存中、已售馨、库存警戒、回收站)、添加产品、添加商品分类等功能 2...
摘要:掘金非官方的知乎日报,一款基于的。项目实战跟小一起做菜鸟音乐高仿网易云音乐今日力推厨客趣刻掘金一厨客简介,厨客,是一款查询搜索分类收藏菜谱功能的。 Android 教你打造独一无二的刷新加载框架 - Android - 掘金其实早在去年七月,群里小伙伴就有让我共享这个。但我当时绝的技术不纯熟。代码有bug什么的。没有写出来。现在感觉整理的差不多了。就写出来让大家看看,有问题一起讨论解决...
摘要:没有耐心阅读的同学,可以直接前往学习全栈最后一公里。我下面会罗列一些,我自己录制过的一些项目,或者其他的我觉得可以按照这个路线继续深入学习的项目资源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技术软文,阅读需谨慎,长约 7000 字,通读需 5 分钟 大家好,我是 Scott,本文通过提供给大家学习的方法,...
阅读 799·2023-04-26 03:02
阅读 905·2023-04-25 19:18
阅读 2369·2021-11-23 09:51
阅读 2382·2021-11-11 16:55
阅读 2401·2021-10-21 09:39
阅读 1476·2021-10-09 09:59
阅读 1767·2021-09-26 09:55
阅读 3244·2021-09-26 09:55