JooLun Plus 百科 ⬇ 源码下载

09.08 商户端 App 快速上手

102353 于 2026-10-17 14:14:33 +08:00 修改了此页面



手册阅读须知：本手册仅针对 JooLunPro-商户端APP

介绍

JooLunPro-商户端APP使用UniApp开发，使用该App可进行简单的后台管理操作。

支持今日流水金额，店铺查看，商品信息查看，订单信息处理，客服聊天，电子券，积分，砍价，拼团，秒杀等。

开发环境准备

  • 下载符合自己系统的安装包 (已存在的可忽略)
  1. 下载 HBuilderX
  2. 下载 node

建议: 下载 VS Code 打开项目

  • 因为项目使用了国际化,所以建议使用VScode打开项目,这样可以显示页面文字翻译的具体内容
  • HBuilderX只用来运行项目, 具体国际化说明请查看 常见问题 文档的国际化说明

下载项目源码

首先下载源码

导入源码

  • 源码下载完成后需要导入到开发工具中
  1. 打开HBuildX，在菜单中选择 文件 - 导入 - 从本地目录导入 选择下载的源码主目录(压缩包需要先解压)，然后点击打开即可导入成功。

修改连接配置

  • 如果运行到手机,需要修改 /config/env.js 中的 basePath 为自己后台服务的连接地址
  • 如果运行本地浏览器,需要修改 /vite.config.js 中的 url 为自己后台服务的连接地址
  • 注意：manifest.json -- UniApp配置文件的uni-app应用标识(AppID)，请点击【重新获取】否则会有问题

启动项目

  • 目前可以直接在浏览器中启动，也可以运行到手机上。

  • 选择顶部菜单 运行-运行到内置浏览器 或者 运行-运行到手机或模拟器 查看常见错误

    如果项目出现未导入的js库请首先在 项目目录下 的控制台运行命令： npm install --registry=https://registry.npmmirror.com

  • UniApp启动的大部分问题在官方的论坛中都有解决方法，请善于利用论坛查找解放方案。

目录结构

joolun-plus-app  -- 主目录
├── api -- 后端交互的接口（跟后端的调用方式类似，可直接复制web后端相应文件稍作修改后进行使用）
├    ├── mall -- 所有商城接口
├    ├── upms -- 用户信息接口
├    └── api.js -- 所有接口具体调用的地方
├── components -- 自定义组件
├    ├── basic-components -- 非业务组件 
├    		├── privacy-policy -- 展示用户协议和隐私政策弹框组件 
├    		└──float-btn -- 右下角浮动按钮组件,滑动页面时会隐藏
├    ├── chat-message -- 自定义的聊天消息类型(与用户端相同)
├    ├── graph-code -- 验证码图片弹框显示和输入组件(与用户端相同)
├    ├── lang-change -- 国际化切换组件(与用户端相同)
├    ├── mescroll-uni -- 第三方下拉刷新
├    ├── notice -- 本地通知栏的调用显示组件
├    ├── shop-store-info -- 门店信息展示组件
├    ├── shopinfo -- 店铺信息展示组件
├    └── watch-login -- 登录的输入组件
├── config -- app配置文件
├── locale -- 国际化
├── package-live -- 直播功能模块存放的目录（v1.0.5+）
├── pages -- 小程序页面(目录结构跟后端类似)
├    ├── home -- 主页
├    ├── login -- 登录
├    ├── mall -- 商城
├    ├── message -- 消息聊天
├    ├── public -- 公共组件
├    		├── agreement -- 协议详情展示页面(如用户协议内容获取)
├    		└──webview -- 可打开http地址的页面
├    └── user -- 个人信息
├── public -- 第三方资源的JS_SDK
├    ├── app-plus -- App权限统一申请库, 比如: 在使用相机时需要请求相机权限
├    ├── APPUpdate -- App自动更新
├    ├── colorui -- UI库(顶部导航组件也在这个目录)
├    └── open-im-sdk -- OpenIM (v2版本)的js库
├── static -- 静态资源文件
├── store -- 目前用于存储本地数据工具方法，如个人信息，个人设置，日志等。
├── utils -- IM连接和常用工具方法
├── App.vue -- 项目入口:包括App自定义数据，更新，全局样式设置，IM，自动登录等。
├── main.js -- 项目入口:全局组件引入等。
├── manifest.json -- UniApp配置文件
├── package.json -- npm安装的第三方库(只有: crypto-js 和 moment)
├── pages.json -- UniApp页面设置
└── vite.config.js -- vite项目的配置文件

约定及规范

  • 除个别第三方外的所有文件名都以中横线 - 连接
  • 常用的视图都须采用组件封装方式
  • 目录结构默认按照web后端目录结构方式命名
  • 所有接口统一定义在api.js中
  • 第三方js默认放在public目录下

使用到的第三方库

  1. UI Css 库 ColorUI v2 版
  2. OpenIM OpenIM v2 版 【注意：前端仅使用了JS 的 SDK】
  3. 日期处理类库 Moment.js
  4. 登录使用的加密库 crypto-js
  5. 下拉刷新组件 mescroll
  6. APP版本升级 APP版本更新