若依(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代码如下:scriptimportconfigfrom./configimport{getToken}from/utils/authexportdefault{onLaunch:function(){this.initApp()},methods:{// 初始化应用initApp(){// 初始化应用配置this.initConfig()// 检查用户登录状态//#ifdef H5this.checkLogin()//#endif},initConfig(){this.globalData.configconfig},checkLogin(){if(!getToken()){this.$tab.reLaunch(/pages/login)}}}}/scriptstyle langscssimport/static/scss/index.scss/style1.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,// 应用logologo:/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.jsonpages.json 文件用来对 uni-app 进行全局配置决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。默认如下{ 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的意思就是底部的导航栏也就是如果我们这里新增一个的话导航栏就会多一个。