宇信科技-新一代移动金融开发平台YUMP

# 基础教程

# 工程目录结构

工程目录结构

|-- yump-app-h5
    |-- .editorconfig       # 编辑器格式化配置
    |-- .env                # dev模式默认加载环境配置
    |-- .env.mock           # mock模式默认加载环境配置
    |-- .env.production     # prod模式默认加载环境配置
    |-- .env.report         # report模式默认加载环境配置
    |-- .gitignore
    |-- .postcssrc.js       # postcss配置文件
    |-- yump.config.js      # 多模块相关全局配置
    |-- README.md
    |-- babel.config.js     # 语法兼容配置
    |-- jest.config.js      # jest单元测试配置文件
    |-- package.json
    |-- vue.config.js       # 脚手架自定义配置
    |-- yarn.lock           # 版本锁定文件
    |-- mocks               # mocks目录
    |   |-- config.js       # api清单配置文件,要与api目录文件一一对应
    |   |-- index.js        # mock服务入口文件
    |   |-- util.js         # mock工具函数
    |   |-- api             # api的mock数据配置
    |       |-- login       # 按业务模块创建目录
    |       |   |-- login.json  # 具体业务接口挡板配置文件
    |-- public              # 公共资源,不打包
    |   |-- favicon.ico
    |   |-- index.html
    |   |-- images          # 外网广告图片,会经常变动的静态资源
    |   |-- template        # 多模块模板目录
    |-- src                 # 源码目录
    |   |-- modules         # 各模块入口
    |   |-- platfrom        # 跨平台能力桥接层
    |   |-- assets          # 静态资源目录
    |   |   |-- fonts       # 字体目录
    |   |   |-- icons       # 图标目录
    |   |   |-- img         # 图片目录,一般建议放小图
    |   |   |-- style       # 样式表目录
    |   |   |-- theme       # 主题样式目录
    |   |-- common          # 公共业务方法
    |   |   |-- vue-install.js  # 全局插件挂载入口方法
    |   |   |-- directive       # 自定义指令
    |   |   |   |-- index.js
    |   |   |-- filters         # 自定义过滤器
    |   |   |   |-- index.js
    |   |   |-- mixin           # Vue混入
    |   |   |   |-- index.js
    |   |   |-- model           # 实例化目录
    |   |   |-- params          # 业务数据字典目录
    |   |   |   |-- bsndef_action.js  # 菜单ID与路由映射配置表
    |   |   |   |-- index.js    # 业务数据字典
    |   |   |-- plugins         # 工程依赖插件
    |   |   |   |-- axios.js    # axios.js二次封装
    |   |   |-- utils           # 工具类函数
    |   |       |-- index.js
    |   |-- components      # 业务公共组件目录
    |   |-- config
    |   |   |-- index.js    # 配置全局使用到的参数,如微服务名称
    |   |-- i18n            # 国际化目录
    |   |   |-- index.js    # 国际化入口文件
    |   |   |-- config      # 国际化配置文件目录
    |   |       |-- en.js   # 英文配置文件
    |   |       |-- zhCN.js # 简体中文配置文件
    |   |       |-- zhTW.js # 繁体中文配置文件
    |   |-- plugins         # 引入第三方插件,待定
    |   |-- router          # 路由目录
    |   |   |-- index.js    # 路由入口函数
    |   |   |-- router.conf.js  #路由配置文件
    |   |-- store           # 状态管理目录
    |   |-- i18n            # 多语言目录
    |   |   |-- app.js      # 业务相关状态
    |   |   |-- index.js    # 入口函数
    |   |   |-- permission.js # 权限相关状态
    |   |   |-- session.js  # 会话相关状态
    |   |-- views           # 业务页面开发目录
    |       |-- mbank
    |           |-- transfer # 模块1业务开发目录
    |           |-- deposit  # 模块2业务开发目录

# 配置文档

# 全局配置

主要是指开发过程中的一些全局参数化配置，详见快速上手-全局配置，

# 多环境配置

项目默认支持配置多环境打包配置

对应配置文件如下：

  • .env 本地开发环境
  • .env.sitSIT测试环境
  • .env.uatUAT测试环境
  • .env.development 开发环境
  • .env.production生产环境
  • .env.mockmock环境

# 模块模板配置

template目录为多模块工程模板目录，以template目录为各模块，每个初始化好的模块，拥有模块入口文件目录-src/modules/模块名、router目录-src/router/模块名、vuex目录-src/store/模块名、业务代码开发目录-src/views/模块名，每个模块初始化完成之后可独立修改，也可通过修改template下模板页面后，执行更新命令批量更新各个模块，模板如下图：


# 路由配置

src/router/模块名目录为各模块路由配置目录，src/router/模块名/route.conf.js可定义各个模块的路由,src/router/模块名/index.js可定义各个模块公共路由，加载公共路由方法等。

# 请求配置

src/config/api为项目请求配置目录,src/config/index.js文件中统一配置并导出服务名，src/config/模块名可配置每个功能模块的API请求。

# vuex配置

src/vuex/模块名目录为各模块vuex目录，每个模块中包含各action.js, getter.js, mutations.js, state.js等vuex基础配置文件。

# 数据字典使用

  • 1.src/common/params/index.js存放常用数据字典，数据字典定义后，全局统一注册filter可在模板上直接使用：



    1. find方法可查找数据字典，返回数据字典对象,调用方法如下：
    var bankType = this.$utils.find('BANK_TYPE');
    console.log(bankType, 'bankType')
    1. convertKey方法可根据字典名称, key返回对应value,调用方法如下：
    var value = this.$utils.convertKey('BANK_TYPE', '102');
    console.log(value, 'value')
    1. convertValue方法可根据字典名称, value返回对应key,调用方法如下：
    var key = this.$utils.convertValue('BANK_TYPE', '中国工商银行');
    console.log(key, 'keys')

# 多语言使用

src/i18n可对项目进行多语言配置，默认支持中文简体、英文、中文繁体。 实现步骤如下：

  • 示例，代码地址；src/views/mbank/index/myIndex.vue



  • 1.common/mixin/index.js多语言切换的公共方法('zhCN'-中文简体，'en'-英文)，switchLanguage为全局混入方法，可全局访问调用。
switchLanguage() {
          const language = localStorage.getItem('locale') || 'zhCN'; // 语言标识
          localStorage.setItem('locale', language === 'zhCN' ? 'en' : 'zhCN');
          window.location.reload();
        }
  • 2.获取当前语言的方法，调用方法如下：
const language = localStorage.getItem('locale')
  • 3.设置要使用语言的方法，调用方法如下：
localStorage.setItem('locale', 'en');

# 多主题配置

src/assets/style/theme.scss可对项目进行多主题配置，默认支持蓝色主题、橙色主题，可根据项目的需求配置需要的主题。 脚手架中实现多主题示例, 实现效果及步骤步骤如下，如需定制化其他主题可参考此案例。

  • 示例效果如下图，代码地址；src/views/mbank/index/myIndex.vue



  • 实现步骤

  • 1.初始化模块的主题配置


  • 2.common/mixin/index.js多主题切换的公共方法('blue'-蓝色主题，'orange'-橙色主题), switchThemeColor为混入方法，可在全局访问调用。
switchThemeColor() {
    let colorType = localStorage.getItem('__color_theme__') || 'blue';
    colorType = colorType === 'blue' ? 'orange' : 'blue'
    document.documentElement.setAttribute('color-theme', colorType);
    localStorage.setItem('__color_theme__', colorType);
}
  • 3.获取当前主题的方法，调用方法如下：
const colorType = localStorage.getItem('__color_theme__') || 'blue';
  • 4.设置要使用主题的方法，调用方法如下：
document.documentElement.setAttribute('color-theme', colorType);
localStorage.setItem('__color_theme__', colorType);
  • 5.在src\assets\style\theme.scss配置多主题样式('blue'-蓝色主题，'orange'-橙色主题),并增加自定义主题的相关样式代码。
.font-color-theme {
  [color-theme="blue"] & {
    color: #205d96;
  }
  [color-theme="orange"] & {
    color: rgb(245, 90, 59);
  }
}

# 权限配置

不同的用户有着不同的按钮权限控制，为了满足这个需求，做了权限配置。

  • 1.获取当前用户所有按钮权限


  • 2.common/mixin/index.js获取按钮权限的公共方法
async hasPermission (permission) {
    let myBtns = [];
    await this.$app.getAPDataStorage({ 
        key: 'set_btns_permission',  
        isRuntime: '1', 
        encrypt: '1' 
    }).then(res => {
        myBtns = res.value.permissionList; // 当前用户所有按钮权限数组
    })
    return myBtns.indexOf(permission) > -1; 
    },
  • 3.获取按钮权限公共方法的使用
this.hasPermission(permissionId).then(res => { //permissionId当前按钮的权限ID
              if (res) {
                ......
              }
            })

# 工具方法

src/common/utils/index.js方法工具库中，内置几十种常见工具方法，例如常见的时间格式化方法，用户信息脱敏方法，手机号校验、邮箱校验、金额格式化等方法。

# 网络请求配置

使用$app.request方法发起网络请求

  • 1.环境配置文件中配置是否使用外壳的接口请求服务

在环境配置文件中可以配置是否使用外壳的接口请求服务，以开发环境配置文件工程路径/.env.development为例，VUE_APP_HAS_USE_YUSDK_REQUEST字段配置当前是否使用外壳的接口请求服务。如图所示：

env_development_7

当VUE_APP_HAS_USE_YUSDK_REQUEST字段配置为true时，在使用$app.request方法发起网络请求即是使用外壳的接口请求服务，配置为false时发起网络请求时走的是纯前端的请求。

  • 2.添加拦截器

拦截器分为请求拦截器和响应拦截器，在src/common/plugins/request.js文件中可以添加拦截器。

env_development_7

在请求拦截器中可以对发送请求前需要做些什么进行处理，也可以对请求错误进行处理。

在响应拦截器中可以对返回的响应数据进行处理，也可以对响应错误进行处理。

# mock使用

  • 1.mock数据相关配置

VUE_APP_MOCK配置本地服务是否开启mock,本机调试时可开启；VUE_APP_MOCK_SERVE配置离线包是否打包mock，谨慎使用，会影响第三方库正常使用

env_development_4
  • 2.使用详情
mock-01 mock-02 mock-03
Last Updated: 5/15/2024, 4:47:26 PM

← 调试方法 →