通用uni-appMD

通用框架介绍

目录介绍

  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
    
    1. 注册
      // 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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,386评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,142评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,704评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,702评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,716评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,573评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,314评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,230评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,680评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,873评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,991评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,706评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,329评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,910评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,038评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,158评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,941评论 2 355

推荐阅读更多精彩内容