资讯专栏INFORMATION COLUMN

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

linkFly / 2358人阅读

摘要:前言一个集微信公众号商城小程序商城商城后台的一个开源项目,后台是基于开发的,是一个简洁而强大的开源微信公众平台开发框架,微信功能插件化开发多公众号管理配置简单。微信小程序项目下载整个包之后,进行根目录文件夹。

前言

一个集微信公众号商城/小程序商城/商城后台的一个开源项目,后台是基于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,ThinkPHPMysql等。

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 installcnpm 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群:361979424,有兴趣可以加

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/29727.html

相关文章

  • 开源程序And公众商城外加后台功能齐全

    摘要:前言一个集微信公众号商城小程序商城商城后台的一个开源项目,后台是基于开发的,是一个简洁而强大的开源微信公众平台开发框架,微信功能插件化开发多公众号管理配置简单。微信小程序项目下载整个包之后,进行根目录文件夹。 前言 一个集微信公众号商城/小程序商城/商城后台的一个开源项目,后台是基于WeiPHP5.0开发的,WeiPHP是一个简洁而强大的开源微信公众平台开发框架,微信功能插件化开发,多...

    VishKozus 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<