GitHub - geekape/applet-h5-shop: 小程序And公众号商城,外加后台,功能齐全!
source link: https://github.com/geekape/applet-h5-shop
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
前言
一个集微信公众号商城/小程序商城/商城后台的一个开源项目,后台是基于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扫码加入
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK