手册阅读须知：本手册仅针对 JooLunPro-商城PC端
介绍
JooLun多店版-PC端是使用UniApp开发的H5端商城修改而成,所以移动端的文档同样适用PC端开发
PC端增加了Vue3的一些特性，增加了 element-plus和pinia 和一般实际的Vue项目是相同的。
如果需要将 UniApp项目改成 Vue项目请自行百度修改，如UniApp如何工程化。
开发环境准备
-
下载符合自己系统的安装包
(已存在的可忽略)
下载项目源码
导入源码
-
源码下载完成后需要导入到开发工具中
- 打开HBuilderX，在菜单中选择
文件 - 导入 - 从本地目录导入选择下载的源码主目录(压缩包需要先解压)，然后点击打开即可导入成功。
启动项目
- 首先在 项目目录下 的控制台运行命令：
npm install --registry=https://registry.npmmirror.com - 选择顶部菜单
运行 - 运行到浏览器 - Chrome如何运行
-
UniApp启动的大部分问题在官方的论坛中都有解决方法，请善于利用论坛查找解放方案。
目录结构
-
目录结构基本按照 UniApp的目录结构
joolun-plus-uniapp-pc -- 主目录
├── components -- 自定义组件
├ ├── chat-message -- 自定义的聊天消息类型
├ ├── coupon -- 优惠券相关
├ ├ ├── coupon-info -- 优惠券详情
├ ├ ├── coupon-receive -- 店铺优惠券弹框
├ ├ ├── coupon-user-info -- 个人优惠券
├ ├── goods -- 商品相关
├ ├ ├── goods-card -- 商品卡片展示类型
├ ├ ├── goods-row -- 商品列表展示类型
├ ├ ├── goods-sku -- 商品规格选择
├ ├── graph-code -- 验证码图片
├ ├── order -- 订单相关
├ ├ ├── address -- 收货地址选择
├ ├ ├── bill -- 发票选择
├ ├ ├── order-operate -- 订单操作按钮(付款,取消等操作)
├ ├── page-devise -- 用来存放装修页面组件的目录
├ ├ ├── components -- 单个装修组件
├ ├ ├── view -- 装修页面组件(普通页面和店铺页面装修组件是不相同的,所以这里区分)
├ ├── scan-pay-code -- 微信支付二维码弹框
├ ├── share-component -- 分享组件弹框显示: 分享海报生成
├ ├── shop -- 店铺详情
├ ├ ├── shop-info -- 店铺详情
├ ├ ├── shop-store-info -- 店铺门店详情
├ ├ ├── shop-store-select -- 店铺门店选择
├── config -- 小程序配置文件
├── libs -- 基础组件库,不与接口业务数据等关联(该目录非必要不建议修改)
├ ├── common # 公共方法事件的统一处理
├ ├ ├── mixins # 全局组件的公用方法，只要是vue文件就可以调用这个里面的所有方法和属性
├ ├ ├── page # 页面常用的一些方法
├ ├ ├── router-h5 # h5端路由处理
├ ├ ├── storage # uni.StorageSync 事件的统一处理和方法提供，因为是多租户的所以所有的存储都要加租户id
├ ├ ├── theme # 主题颜色数据的统一处理
├ ├── components # 页面UI组件
├ ├ ├── checkbox # 复选框
├ ├ ├── count-down # 倒计时
├ ├ ├── empty-data # 空数据
├ ├ ├── header # 顶部导航栏
├ ├ ├── main # 主体内容
├ ├ ├── mp-html # 富文本
├ ├ ├── pd-container # 容器
├ ├ ├── popover # 点击文字弹出框提示
├ ├ ├── rade # 评分组件
├ ├ ├── radio # 单选框
├ ├ ├── radio-group # 单选框组
├ ├ ├── skeleton # 骨架屏
├ ├ ├── stepper # 数字输入框
├ ├ ├── tabbar # 自定义底部导航栏
├ ├── public # 第三方库
├ ├ ├── APPUpdate # App端版本检查升级
├ ├ ├── colorui # ui样式库
├ ├ ├── open-im-sdk # IM客服
├ ├ ├── tki-qrcode # 二维码
├ ├ ├── video-player # 视频播放
├ ├ ├── wxa-plugin-canvas # 海报生成
├ ├── index.ts # 引入的入口文件
├── locale -- 国际化配置文件
├── pages -- 业务页面文件存放的目录
├ ├── appraises -- 商品评价
├ ├── article -- 文章
├ ├── bargain -- 砍价
├ ├── base -- 搜索
├ ├── coupon -- 优惠券
├ ├── customer-service -- 客服聊天
├ ├── distribution -- 分销相关
├ ├── goods -- 商品
├ ├── groupon -- 拼团列表
├ ├── home -- 首页
├ ├── login -- 登录
├ ├── message -- 消息列表
├ ├── order -- 订单
├ ├── page-devise -- 自定义装修页面
├ ├── pay -- 支付页面(订单支付、余额充值、付费会员)
├ ├── public -- 公共页面(查看协议详情、查看http连接)
├ ├── seckill -- 秒杀
├ ├── shop -- 店铺相关
├ ├── shopping-cart -- 购物车
├ ├── signrecord -- 签到
├ ├── user -- 个人信息相关
├ ├── user-balance -- 余额(钱包)
├ └── user-vip -- 付费会员
├── router -- 路由文件
├── static -- 静态资源文件
├── store -- pinia
├── utils -- 常用工具方法js
├ ├── api.js -- 接口地址及接口调用
├ ├── baseImgSrc.js -- base64转图片
├ ├── date-util.js -- 时间工具
├ ├── ican-H5Api.js -- 所有只在H5运行的方法都可在此js定义
├ ├── jim-util.js -- OpenIM方法封装
├ ├── jweixin.js -- 微信公众号h5支持方法封装
├ ├── number-util.js -- 数字计算或格式转换
├ ├── order-util.js -- 订单计算操作集合工具
├ ├── theme.js -- 装修主题数据获取和设置
├ ├── util.js -- 一般常用方法
├ └── validate.js -- 校验数据
├── app.css -- 项目自定义css
├── App.vue -- 项目入口:包括App自定义数据，更新，全局样式设置，IM，购物车数量等。
├── main.js -- 项目入口:全局组件引入，路由跳转等。
├── manifest.json -- UniApp配置文件
├── package.json -- npm安装的第三方库
├── pages.json -- UniApp页面设置和路由等
└── vite.config.js -- vite项目配置文件(h5的本地开发访问接口可在此设置)
约定及规范
- 除个别第三方外的所有文件名都以中横线
-连接 - 业务组件封装到
/components目录下, 基础组件添加到/libs/components - 所有接口统一定义在
/utils/api.js中 - 第三方 js 库 默认放在
/libs/public目录下 或者 在package.json引入
使用到的第三方库
- UI Css 库 ColorUI v2 版
- 日期处理类库 day.js
- OpenIM OpenIM v2 版 【注意：前端仅使用了JS 的 SDK】
- 微信 JS-SDK JS-SDK
- UniApp H5 端路由 uni-crazy-router
- 海报生成 wxa-plugin-canvas
- 二维码生成 uni-app-qrcode
- 富文本 mp-html
- element-plus element-plus