通用框架介绍

目录介绍

  src
    api 编写接口请求方法目录
    common 公共样式目录
    components-global 全局组件目录，可以通过js 唤起组件
    locale 国际化目录
    mix  抽象 page 和 功能组件公共方法和属性的目录
    mock  网络请求 mock 目录 在此可以模拟接口请求返回等
    pages 项目页面
    static 文件资源 图片 资源等存放目录
    store Vuex 编写目录
    utils 网络请求 插件等工具方法目录
  App.vue 全局 app
  main.js 入口文件
  manifest.json 应用配置  https://uniapp.dcloud.net.cn/collocation/manifest.html#
  pages.json 页面注册文件 也可以称之为路由文件

了解更多

---

插件

借助Vue 原型链的方式，全局挂在一些函数

• $util

  目录：src/utils/util/index

在这里可以编写通用插件方法，例如时间处理，路由处理等等, 非业务相关的方法。

使用方式：

  this.$util.[function name](options)

  // navTo 路由跳转方法
  this.$util.navTo({
    url: 'pages/target/index', // 目标路由地址
    params: { // 添加到URL后的参数
      a:1,
      b:2
    }
  });
  // 等效于： 'pages/target/index?a=1&b=2'
  // 获取url 参数
  const { a, b } = this.$util.getParams(); // a = 1  b = 2
  const a = this.$util.getParams('a'); // a = 1
  const b = this.$util.getParams('b'); // b = 2

• $b

  目录：src/utils/business/index

可以编写业务方法，例如处理一些通用复杂业务

• $r

  目录：src/utils/global/index

全局组件的编写，可以通过 $r.toast(options) 全局弹出唯一的 提示框
目前有 Toast Modal 两种全局组件

  this.$r.toast(options) 
  this.$r.modal(options)

具体 options 内容参考 uView-Toast uView-Modal
具体使用方式：

 <button @click="() => {
    $r.toast({
      message: '这是提示'，// 提示的内容
      type: 'success', // 提示的类型
    })
  }">
  打开Toast
</button>

function test () {
   this.$r.toast({
      message: '这是提示'，// 提示的内容
      type: 'success', // 提示的类型
    })
}

---

国际化

方便项目切换语言

方案： 前端项目挂载 后端提供的script 脚本 用来请求后端语言包数据，并挂在到 window 变量下，方便业务自行编辑语言包内容

目录
-locale
├─ lang
|    ├─en
|    |  └─index.js
|    |
|    ├─tw
|    |  └─index.js
|    |
|    └─index.js
|
├─ uni-app.en.json
|
├─ uni-app.tw.json

• 自定义自带组件国际化内容
  uni-app.[language].json
  locale/uni-app.语言地区代码.json，如：uni-app.en.json，uni-app.tw.json
  可以替换 uni-app 框架内部组件的一些词条
  例如：

    {
    "common": {
      "uni.app.quit": "再按一次退出应用",
      "uni.async.error": "连接服务器超时，点击屏幕重试",
      "uni.showActionSheet.cancel": "取消",
      "uni.showToast.unpaired": "请注意 showToast 与 hideToast 必须配对使用",
      "uni.showLoading.unpaired": "请注意 showLoading 与 hideLoading 必须配对使用",
      "uni.showModal.cancel": "取消",
      "uni.showModal.confirm": "确定",
      "uni.chooseImage.cancel": "取消",
      "uni.chooseImage.sourceType.album": "从相册选择",
      "uni.chooseImage.sourceType.camera": "拍摄",
      "uni.chooseVideo.cancel": "取消",
      "uni.chooseVideo.sourceType.album": "从相册选择",
      "uni.chooseVideo.sourceType.camera": "拍摄",
      "uni.previewImage.cancel": "取消",
      "uni.previewImage.button.save": "保存图像",
      "uni.previewImage.save.success": "保存图像到相册成功",
      "uni.previewImage.save.fail": "保存图像到相册失败",
      "uni.setClipboardData.success": "内容已复制",
      "uni.scanCode.title": "扫码",
      "uni.scanCode.album": "相册",
      "uni.scanCode.fail": "识别失败",
      "uni.scanCode.flash.on": "轻触照亮",
      "uni.scanCode.flash.off": "轻触关闭",
      "uni.startSoterAuthentication.authContent": "指纹识别中...",
      "uni.picker.done": "完成",
      "uni.picker.cancel": "取消",
      "uni.video.danmu": "弹幕",
      "uni.video.volume": "音量",
      "uni.button.feedback.title": "问题反馈",
      "uni.button.feedback.send": "发送"
    },
    "ios": {},
    "android": {}
  }
  

  更多细节请查看文档

• 自定义业务词条
  lang 目录下 根据项目需求 创建对应的语言包 例如 英文:en; 简体 tw
  在对应语言包下的 index.js 文件内 注册具体的词条条目
  例如：

   // src/locale/lang/en/index.js
  
    {
      ...SYS_LABEL.en,
    // 也可以在本地添加自定义内容
      test: {
        name: 'this is test'
      }
    }
   // src/locale/lang/tw/index.js
    {
      ...SYS_LABEL.tw,
    // 也可以在本地添加自定义内容
      test: {
        name: '这是测试'
      }
    }
  

  SYS_LABEL 为后端挂在到 window 上的 语言对象
  （针对于一些选项的国际化 可以参加源码中的 SYS_DICT ）

• 创建并注册i18n 对象

  1. 创建

    // src/locale/lang/index.js
    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    import TW from './tw'
    import EN from './en'
    Vue.use(VueI18n)
    const messages = {
      TW: {
        ...TW
      },
      EN: {
        ... EN
      },
    }
    const i18n = new VueI18n({
      locale: localStorage.getItem('lang') || 'TW',
      messages,
      silentTranslationWarn: true
    })
    Vue.prototype._i18n = i18n
    export default i18n
  

  2. 注册

    // src/main.js
    import i18n from './locale/lang'
    const app = Vue({
      i18n,
      ... other options
    })
  

• 使用i18n

    <span>{{ $t('test.name') }}</span>
  
    const name = this.$t('test.name')
  

• 切换语言

  切换语言的方法已封装在插件 $util 中,详情见 src/utils/util/index.js switchLan 方法

     $util.switchLan('en', $vm)
     this.$util.switchLan('en', this)
  

---

网络请求

• request

    目录 src/utils/http/request.js
  

  了解更多 Request

• api

  按照模块创建api 目录 定义对应模块的接口api，在需要使用的地方 导入对应模块的接口方法

    目录 src/api/xxx/index.js
    xxx 对应模块名
    例如： user 模块的接口全部定义在 src/api/user/index.js 中
    import request from '@utils/http/request'
    export async function getUserInfo(data){
      return request({
        url: `/api/user/userInfo`,
        data,
        method: 'GET'
      })
    }
   export async function xxx(){
    ... 
  }
  

• mock

  模拟接口请求，项目初期没有接口的时候，可以约定返回规范和数据，进行快速开发 （框架中已集成对应功能 按照要求创建目录即可）

    目录 
    src/mock/index.js mock 入口文件 (无需修改)
    src/mock/xxx/index.js  对应xxx模块的模拟文件，在里面去编写接口请求的url 方法 还有返回内容
  
  

  mock 入口文件 会按照对应的规则扫描所有 src/mock 目录下的index.js 文件 所以 所有的api 编写应该写在 index.js 文件中
  了解更多 Mock