介绍

• 为了方便快速二次业务功能的开发,前端封装了一个基础库,存放与目录 /libs 下,该库与实际业务数据分隔开,一般情况不需要修改, 如果需要使用到其他，请自行添加。
• 常用方法已封装到 $jl 中, 可以使用 this.$jl或者uni.$jl 输入代码后会提示相关已有的方法
• 基础组件库目录 /libs/components ,该目录下的组件会自动注册，使用时用 jl- + 组件名,如 jl-chekbox
• 提示: 在 uniapp 中使用 this 和 uni 都可以调用到相关属性

新建页面

一般情况开发只会新增普通页面,所以系统封装了一个 jl-main 组件, 该组件会自动添加标题栏,如果需要特殊的需求,如透明导航栏(参考 /pages/user-vip/vip-center/index)、自定义导航栏(参考 /pages/login/index)

• 普通页面模板

  <template>
    <jl-main title="页面标题">
      <view>页面内容</view>
    </jl-main>
  </template>
  <script>
  /**
   * @description 页面模板
   */
  import api from "@/utils/api";
  import util from "@/utils/util";
  export default {
    data() {
      return {};
    },
    onLoad(options) {
      // 保存别人分享来的 userCode
      util.saveSharerUserCode(options);
      // 初始化页面后再加载数据 (如果该页面不需要登录可忽略该方法)
      getApp().initPage().then(() => {
        this.initData();
      })
    },
    methods: {
      /**
       * 初始化数据
       */
      initData() {
        api.goodsGetXXX().then((res) => {
            let data = res.data;
            // do something
        }).catch((err) => {
          console.log(err);
        })
      }
    },
  };
  </script>
  

api 接口

所有接口存放在 /utils/api.js 文件中,先在该文件中添加接口,然后调用即可

• 使用方法

  import api from "@/utils/api";
  api
    .xxx(params)
    .then((res) => {})
    .catch((err) => {});
  

业务组件

新建与业务有关的组件时,建议放在 /components 目录下

基础组件

新建与业务无关的组件时,建议放在 /libs/components 目录下, 该目录下的组件会自动注册,使用时用 jl- 开头+组件名称，使用示例: <jl-chekbox></jl-chekbox>

装修组件

• 装修组件分普通页面组件和店铺页面组件,店铺页面组件是根据店铺 ID 只查询店铺相关数据的组件
• 新建装修组件,固定放在 /components/page-devise/components 目录下
• 然后在 /components/page-devise/view/ 下的对应文件中注册

常用方法

开发页面时常用的数据使用

• 所有 vue 文件可以使用的属性

// style对象: 主题样式(带背景色)- 一般用于页面中按钮
this._themeStyle; // 使用方法: <view :style="_themeStyle" />
// style对象:使用主题颜色为文字颜色 - 一般用于文字
this._themeTextStyle; // 使用方法: <view :style="_themeTextStyle" />
// string:以hex格式返回主题颜色,因为主题颜色有渐变或许rgb - 用于radio,checkbox等组件的color值设置;
this._themeColorHex; // 使用方法: <view :style="{color: _themeColorHex}" />
// style对象:背景颜色样式(带背景色) - 用于导航栏、模块背景色值文字的颜色;使用方法: <view :style="_bgColorStyle" />
this._bgColorStyle;
// style对象:距离顶部的高度 - 一般用于固定导航栏下方的 tab 等; 使用方法: <view :style="_top" />
this._top;
// $jl对象的所有属性方法,使用 `this.$jl`或者`uni.$jl` 输入代码后会提示相关已有的方法
this.$jl;

• js 或 ts 文件可以使用的属性

uni.$jl; // $jl对象的所有属性方法

对象说明

• $jl 对象

  $jl = {
    /**
    * 页面对象(获取当前页面对象,路由等)
    */
    page: typeof page; // 页面对象
    /**
    * dayjs对象,查看dayjs文档使用
    * @tutorial https://day.js.org/zh-CN/
    */
    dayjs: any; // dayjs对象
    /**
     * 自定义快捷跳转页面
    */
    goPage(url, openType?): void;
    /**
    * 返回上一页
    */
    goBack(): void;
    /**
      * 存储对象
      */
    storage: typeof storageCommon;
    /**
    * 获取用户信息
    */
    getUserInfoStorage(): Object;
    /**
    * 获取主题对象
    */
    getTheme(): Object; // 获取主题对象方法
    /**
    * 首页路径
    */
    homePath: '/pages/home/index'; // 首页路径
    /**
    * 小程序分享对象
    */
    mpShare: {
      title: string; // 默认为小程序名称
      path: string; // 默认为当前页面路径 页面 path ，必须是以 / 开头的完整路径。注意：京东小程序，开头不要加'/'
      desc: string; // 分享描述默认为空  小程序只支持: 支付宝小程序、抖音小程序、京东小程序
      imageUrl: string; // 默认为当前页面的截图
    };
    /**
    * 金额格式化2位小数显示
    */
    amountFormat(val: any): any; // 金额格式化方法
  }
  

• 存储缓存处理

  因为多租户商城的原因, 部分缓存数据必须做到数据隔离, 所以为了保证不同租户下的缓存数据唯一, 在 @/libs/common/storage.ts 文件中, 保存的 key 做了特殊处理,以保证数据唯一性.具体逻辑查看 `@/libs/common/storage.ts

  使用:

  this.$jl.storage.setStorageSync(key, data); // 或者 uni.$jl.storage.setStorageSync(key, data);
  this.$jl.storage.getStorageSync(key); // 或者 uni.$jl.storage.getStorageSync(key);
  this.$jl.storage.removeStorageSync(key); // 或者 uni.$jl.storage.removeStorageSync(key);
  

libs 目录说明

• 一些基础库的组件 参考 element-ui 的目录结构

common 目录

• 封装了常用的 ts 文件, 提供了一些必要的方法，如：页面跳转，统一存储, 金额格式化等。

components 目录

• 该目录下 components 封装一些基础组件，如：顶部导航栏，底部 tabbar 等。

  目录下的组件会自动注册，使用时用 jl- 开头

• 使用时必须以 jl- 开头+目录名称，如 jl-main，才能被 easycom 自动识别使用

• components 目录下的组件会在 pages.json 中的 easycom 自动注册

• 如需要修改 jl- 前缀，可在 pages.json 中 easycom 的 custom 属性修改, 修改后自行全局替换 jl- 为新前缀

目录结构

├── 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 # 引入的入口文件