若依(ruoyi)RuoYiApp版—项目结构分析

若依App版本下载后，默认的项目结构如下：

具体解释如下：

├── api                        // 所有请求  
├── components                 // 全局公用组件
├── pages                      // 页面文件
├── plugins                    // 通用方法
├── store                      // 全局 store管理
├── utils                      // 公用方法
├── static                     // 公共文件
│   ├── favicon.ico            // favicon图标
│   └── index.html             // html模板
│   └── logo.png               // logo图片
├── uni_modules                // uniui组件
│   ├── uni-badge              // 数字角标
│   ├── .........              // ........
│   ├── .........              // ........
├── App.vue                    // 应用配置
├── config.js                  // 环境配置
├── main.js                    // Vue初始化入口文件
├── manifest.json              // 配置打包
├── pages.json                 // 配置页面路由
├── permission.js              // 权限拦截
├── uni.scss                   // 全局样式变量

1.App.vue

代码如下:

<script>
  import config from './config'
  import { getToken } from '@/utils/auth'

  export default {
    onLaunch: function() {
      this.initApp()
    },
    methods: {
      // 初始化应用
      initApp() {
        // 初始化应用配置
        this.initConfig()
        // 检查用户登录状态
        //#ifdef H5
        this.checkLogin()
        //#endif
      },
      initConfig() {
        this.globalData.config = config
      },
      checkLogin() {
        if (!getToken()) {
          this.$tab.reLaunch('/pages/login') 
        }
      }
    }
  }
</script>

<style lang="scss">
  @import '@/static/scss/index.scss'
</style>

1. onLaunch 生命周期钩子
   • 当 uni-app 初始化完成时触发，这里调用了 initApp() 方法。
2. initApp() 方法
   • 初始化配置：调用 initConfig()，将 config 对象挂载到全局数据 globalData 中。
   • 检查登录状态（仅限 H5 平台）：
     通过 //#ifdef H5 条件编译，只在 H5 平台执行 checkLogin()。
     如果用户未登录（getToken() 返回空），则通过 $tab.reLaunch 跳转到登录页 (/pages/login)。
3. initConfig() 方法
   • 将导入的 config 对象赋值给 globalData.config，方便全局访问配置。
4. checkLogin() 方法
   • 调用 getToken() 检查本地是否存在 token（登录凭证）。
   • 如果不存在，强制跳转到登录页（使用 reLaunch 关闭所有页面并打开新页面）。

2.config.js

默认代码如下

// 应用全局配置
module.exports = {
  //baseUrl: 'https://vue.ruoyi.vip/prod-api',
	baseUrl: 'http://localhost:8080',
  // 应用信息
  appInfo: {
    // 应用名称
    name: "ruoyi-app",
    // 应用版本
    version: "1.2.0",
    // 应用logo
    logo: "/static/logo.png",
    // 官方网站
    site_url: "http://ruoyi.vip",
    // 政策协议
    agreements: [{
        title: "隐私政策",
        url: "https://ruoyi.vip/protocol.html"
      },
      {
        title: "用户服务协议",
        url: "https://ruoyi.vip/protocol.html"
      }
    ]
  }
}

这里面需要注意的一点就是baseUrl这个，这个表示访问的后台的地址端口，默认是访问若依官方的后台，这里直接访问本地的后。

3.page.json

默认如下

{
  "pages": [{
    "path": "pages/login",
    "style": {
      "navigationBarTitleText": "登录"
    }
  }, {
    "path": "pages/register",
    "style": {
      "navigationBarTitleText": "注册"
    }
  }, {
    "path": "pages/index",
    "style": {
      "navigationBarTitleText": "若依移动端框架",
      "navigationStyle": "custom"
    }
  }, {
    "path": "pages/work/index",
    "style": {
      "navigationBarTitleText": "工作台"
    }
  }, {
    "path": "pages/mine/index",
    "style": {
      "navigationBarTitleText": "我的"
    }
  }, {
    "path": "pages/mine/avatar/index",
    "style": {
      "navigationBarTitleText": "修改头像"
    }
  }, {
    "path": "pages/mine/info/index",
    "style": {
      "navigationBarTitleText": "个人信息"
    }
  }, {
    "path": "pages/mine/info/edit",
    "style": {
      "navigationBarTitleText": "编辑资料"
    }
  }, {
    "path": "pages/mine/pwd/index",
    "style": {
      "navigationBarTitleText": "修改密码"
    }
  }, {
    "path": "pages/mine/setting/index",
    "style": {
      "navigationBarTitleText": "应用设置"
    }
  }, {
    "path": "pages/mine/help/index",
    "style": {
      "navigationBarTitleText": "常见问题"
    }
  }, {
    "path": "pages/mine/about/index",
    "style": {
      "navigationBarTitleText": "关于我们"
    }
  }, {
    "path": "pages/common/webview/index",
    "style": {
      "navigationBarTitleText": "浏览网页"
    }
  }, {
    "path": "pages/common/textview/index",
    "style": {
      "navigationBarTitleText": "浏览文本"
    }
  }],
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#000000",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/index",
        "iconPath": "static/images/tabbar/home.png",
        "selectedIconPath": "static/images/tabbar/home_.png",
        "text": "首页"
      }, {
        "pagePath": "pages/work/index",
        "iconPath": "static/images/tabbar/work.png",
        "selectedIconPath": "static/images/tabbar/work_.png",
        "text": "工作台"
      }, {
        "pagePath": "pages/mine/index",
        "iconPath": "static/images/tabbar/mine.png",
        "selectedIconPath": "static/images/tabbar/mine_.png",
        "text": "我的"
      }
    ]
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "RuoYi",
    "navigationBarBackgroundColor": "#FFFFFF"
  }
}

这里面tabBar的意思就是底部的导航栏，也就是如果我们这里新增一个的话，导航栏就会多一个。