V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
geekape
V2EX  ›  分享创造

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

  •  1
     
  •   geekape · 2018-12-01 14:36:45 +08:00 · 4479 次点击
    这是一个创建于 2182 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

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

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

    前端页面思维导图

    前端页面部分 UI 图

    商城后台部分界面

    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(微信小程序)项目

    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值。
    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,有兴趣可以加
    第 1 条附言  ·  2018-12-01 15:08:36 +08:00
    • 扫码预览,要用微信扫码打开,不然获取不到用户信息

    第 2 条附言  ·  2018-12-01 17:41:43 +08:00
    已经上传了部分遗漏的文件,可正常安装了
    第 3 条附言  ·  2018-12-03 10:29:51 +08:00
    **内测群超 100 就需要邀请了,有兴趣进群的可以扫码加好友,有人会邀请你进群的**

    ![]( https://user-gold-cdn.xitu.io/2018/12/3/16771e5ff9d58fd6?w=1080&h=1920&f=jpeg&s=103503)
    第 4 条附言  ·  2018-12-03 10:30:30 +08:00

    内测群超100就需要邀请了,有兴趣进群的可以扫码加好友,有人会邀请你进群的

    15 条回复    2018-12-04 09:06:14 +08:00
    hzlzh
        1
    hzlzh  
       2018-12-01 14:55:49 +08:00
    试一下,看起来挺不错的
    小建议:项目 repo 的预览 Demo 直接留一个二维码方面查看会更方便
    geekape
        2
    geekape  
    OP
       2018-12-01 15:08:57 +08:00
    @hzlzh 谢谢,已经生成一个了
    mzsongyan
        3
    mzsongyan  
       2018-12-01 15:51:31 +08:00
    报错: 未定义数组索引:state
    slwl
        4
    slwl  
       2018-12-01 15:54:03 +08:00 via iPhone
    错误
    Tink
        5
    Tink  
       2018-12-01 16:39:37 +08:00 via iPhone
    make
    Tink
        6
    Tink  
       2018-12-01 16:39:41 +08:00 via iPhone
    mark
    Rcnaec
        7
    Rcnaec  
       2018-12-01 16:56:26 +08:00
    mark
    geekape
        8
    geekape  
    OP
       2018-12-01 17:42:15 +08:00
    @slwl
    @mzsongyan
    @Tink
    @Rcnaec 已经上传了部分遗漏的文件,可正常安装了
    binghe
        9
    binghe  
       2018-12-01 18:18:35 +08:00 via Android
    SingeeKing
        10
    SingeeKing  
       2018-12-01 18:48:05 +08:00
    扫码打开的,一直都是「自动获取用户信息中…」,多次刷新、重新打开问题一样

    iOS 12.1
    SingeeKing
        11
    SingeeKing  
       2018-12-01 18:48:44 +08:00
    嗯。。。重启微信后打开了🌚
    然后报错「未定义数组索引:state 」
    likai
        12
    likai  
       2018-12-01 19:56:53 +08:00
    只说一个.
    https://www.weiphp.cn/home/index/product/pbid/21#
    这个页面有个二手开发手册
    zdb1115
        13
    zdb1115  
       2018-12-02 22:50:34 +08:00
    微信群方便拉下吗,方便的话,私信下微信。谢谢。
    geekape
        14
    geekape  
    OP
       2018-12-03 10:31:16 +08:00
    @zdb1115 看上面新增的码
    maemolee
        15
    maemolee  
       2018-12-04 09:06:14 +08:00
    mark
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1305 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 23:38 · PVG 07:38 · LAX 15:38 · JFK 18:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.