JooLun Plus 百科 ⬇ 源码下载

09.01 商城移动端快速上手

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



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

介绍

JooLunPro 商城端使用UniApp开发。

对应项目名称: joolun-plus-uniapp

注意：目前已提供在 【微信小程序】 和 【微信公众号(H5)】 和 【普通浏览器(H5)】和 【原生 APP(安卓和 iOS)】 上进行开发及运行。

开发环境准备

  • 下载符合自己系统的安装包
  1. 下载 HBuilderX
  2. 下载 node
  3. 下载 微信开发者工具（微信小程序开发和微信公众号 H5 使用）

建议: 如果使用国际化建议 下载 VS Code 打开项目

  • 因为项目使用了国际化,如果国际化开发建议使用VScode打开项目并添加 i18n-ally 插件,这样可以显示页面文字翻译的具体内容
  • 如果想去掉国际化请查看常见问题文档
  • HBuilderX只用来运行项目, 具体国际化说明请查看 常见问题 文档的国际化说明

下载项目源码

  • 下载源码

下载git源码

导入源码

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

修改连接配置

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

启动项目

目前可以直接在运行到普通浏览器上(H5)，也可以微信小程序中运行，还可以运行到手机(如何运行请查看 UniApp 官方的方法)。

  • 如果项目出现未导入的js库请首先在 项目目录下 的控制台运行命令：

    npm install --registry=https://registry.npmmirror.com

点击HBuilderX开发工具顶部菜单运行选择想要运行的类型, 比如: 运行-运行到浏览器 或者 运行-运行到手机 如何运行

  • 运行微信小程序

    首先必须在 manifest.json 文件中配置后台已添加的微信小程序 appId

    然后在HBuilderX顶部选择菜单中的[运行]-[运行到微信开发者工具]

    在打开的微信开发工具中点击右上角[详情]-[本地设置]勾选上：不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书重新运行即可实现 预览

  • 运行本地浏览器

    • 在启动成功的url后面添加租户ID tenant_id=1 参数, 示例: http://localhost:8085/?tenant_id=1
    • 说明: 运行H5的租户ID是根据域名动态获取 或者 从 url 的参数 tenant_id 获取, 所以为了方便开发直接在url拼接参数运行
  • UniApp 启动的大部分问题在官方的论坛中都有解决方法，请善于利用搜索论坛查找解放方案

目录结构

joolun-plus-uniapp  -- 主目录
├── components -- 业务组件
├    ├── chat-message -- 自定义的聊天消息类型
├    ├── coupon -- 优惠券相关
├    ├    ├── coupon-info -- 优惠券详情
├    ├    ├── coupon-receive -- 店铺优惠券弹框
├    ├    ├── coupon-user-info -- 个人优惠券
├    ├── goods -- 商品相关
├    ├    ├── goods-card -- 商品卡片展示类型
├    ├    ├── goods-ensure -- 商品服务说明
├    ├    ├── goods-recommend -- 商品推荐组件
├    ├    ├── goods-row -- 商品列表展示类型
├    ├    ├── goods-sku -- 商品规格选择
├    ├    ├── goods-waterfall -- 商品瀑布流展示类型
├    ├── graph-code -- 验证码图片
├    ├── lang-change -- 国际化切换
├    ├── order -- 订单相关
├    ├    ├── address -- 收货地址选择
├    ├    ├── bill -- 发票选择
├    ├    ├── order-operate -- 订单操作按钮(付款,取消等操作)
├    ├── page-devise -- 用来存放装修页面组件的目录
├    ├    ├── components -- 单个装修组件
├    ├    ├── view -- 装修页面组件(普通页面和店铺页面装修组件是不相同的,所以这里区分)
├    ├── privacy-policy -- 隐私政策的弹框
├    ├── share-component -- 分享组件弹框显示: 分享给微信好友 和 分享海报生成
├    ├── share-friends -- 分享给好友组件
├    ├── 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 -- 国际化配置文件
├── package-live -- 直播功能模块存放的目录（v1.0.5+）
├── pages -- 业务页面文件存放的目录
├    ├── appraises -- 商品评价
├    ├── article -- 文章
├    ├── bargain -- 砍价
├    ├── base -- 搜索
├    ├── coupon -- 优惠券
├    ├── customer-service -- 客服聊天
├    ├── distribution -- 分销相关
├    ├── goods -- 商品
├    ├── groupon -- 拼团列表
├    ├── home -- 首页
├    ├── launch -- 开屏页面
├    ├── live -- 微信小程序直播(仅微信小程序使用)
├    ├── login -- 登录
├    ├── message -- 消息列表
├    ├── order -- 订单
├    ├── page-devise -- 自定义装修页面
├    ├── pay -- 支付页面(订单支付、余额充值、付费会员)
├    ├── public -- 公共页面(查看协议详情、查看http连接)
├    ├── seckill -- 秒杀
├    ├── shop -- 店铺相关
├    ├── shopping-cart -- 购物车
├    ├── signrecord -- 签到
├    ├── user -- 个人信息相关
├    ├── user-balance -- 余额(钱包)
├    └── user-vip -- 付费会员
├── static -- 图片资源文件
├── 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 -- 校验数据
├── androidPrivacy.json -- 安卓打包App时上架应用市场的隐私协议弹框内容设置
├── 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 引入

使用到的第三方库

  1. UI Css 库 ColorUI v2 版 ColorUI
  2. 日期处理类库 day.js
  3. OpenIM OpenIM v2 版 【注意：前端仅使用了JS 的 SDK】
  4. 微信 JS-SDK JS-SDK
  5. UniApp H5 端路由 uni-crazy-router
  6. 海报生成 wxa-plugin-canvas
  7. 二维码生成 uni-app-qrcode
  8. 富文本 mp-html
  9. APP 版本升级 APP 版本更新