Uniapp基础学习（二）

标签：Uniapp 配置基础学习 json uni path pages 页面

uni-app怎么用？和vue对比记忆一文教会你_uniapp vue-CSDN博客

一、项目结构解读

uni-app项目的结构通常包括以下几个部分：

pages：存放项目页面的目录，每个页面通常由.vue文件、.js文件、.json文件等组成。
components：存放可复用的Vue组件的目录。
static：存放静态资源（如图片、视频等）的目录。
utils：存放工具函数的目录。
store：Vuex状态管理
main.js：Vue初始化入口js文件。
App.vue：入口组件，用于配置App全局样式以及监听应用生命周期。
manifest.json：配置文件，用于配置应用名称、appid、logo、版本、启动页面等打包信息。
pages.json：页面管理文件，用于配置页面路由、导航条、选项卡、页面样式等页面类信息。

主要mainfest.json和pages.json两个文件与Vue项目有不少差异，下面重点阐述这两文件：

mainfest.json

manifest.json 文件是 uni-app 项目中用于管理应用配置的重要文件，它包含了应用的名称、图标、权限、版本信息、页面路由配置、窗口样式配置、平台特有配置等多个方面的内容。以下是对 manifest.json 文件的详细解析：

基本结构

manifest.json 是一个 JSON 格式的文件，其基本结构大致如下：

{  
  "appid": "__UNI__XXXXXX", // 创建应用时云端分配的，不要修改  
  "name": "应用名称",  
  "description": "应用描述",  
  "versionName": "1.0.0",  
  "versionCode": "100",  
  // 其他配置项...  
}
-----------------------------------------------------------------
{
    "name" : "若依移动端",
    "appid" : "__UNI__25A9D80",
    "description" : "",
    "versionName" : "1.1.0",
    "versionCode" : "100",
    "transformPx" : false,
    "app-plus" : {
        "usingComponents" : true,
        "nvueCompiler" : "uni-app",
        "splashscreen" : {
            "alwaysShowBeforeRender" : true,
            "waiting" : true,
            "autoclose" : true,
            "delay" : 0
        },
        "modules" : {},
        "distribute" : {
            "android" : {
                "permissions" : [
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                ]
            },
            "ios" : {},
            "sdkConfigs" : {}
        }
    },
    "quickapp" : {},
    "mp-weixin" : {
        "appid" : "wxccd7e2a0911b3397",
        "setting" : {
            "urlCheck" : false,
            "es6" : false,
            "minified" : true,
            "postcss" : true
        },
        "optimization" : {
            "subPackages" : true
        },
        "usingComponents" : true
    },
    "vueVersion" : "2",
    "h5" : {
        "template" : "static/index.html",
        "devServer" : {
            "port" : 9090,
            "https" : false
        },
        "title" : "RuoYi-App",
        "router" : {
            "mode" : "hash",
            "base" : "./"
        }
    }
}

主要配置项

1. 应用基本信息

appid：创建应用时云端分配的唯一标识符，不要修改。
name：应用名称，将展示在应用的标题栏或安装列表中。
description：应用描述，简短介绍应用的功能和用途。
versionName：版本名称，通常用于展示给用户看的版本描述。
versionCode：版本号，用于内部标识应用的版本，通常是一个整数，每次发布新版本时递增。

2. 窗口表现

navigationBarTextStyle、navigationBarTitleText、navigationBarBackgroundColor 等：这些配置项用于设置导航栏的样式，包括文字颜色、标题、背景色等。不过需要注意的是，这些配置项通常不在 manifest.json 中直接设置，而是在 pages.json 或其他全局配置文件中设置。

3. 应用权限

对于需要特定权限的应用（如访问相机、存储等），manifest.json 文件中可以配置相应的权限申请信息。这部分信息通常位于平台特有的配置部分，如 app-plus、distribute 等。

4. 平台特有配置

app-plus：5+App（即使用 HBuilderX 打包的原生App）的特有配置，包括是否允许内联视频播放、是否启用自定义组件模式、编译器版本、nvue页面编译模式等。
distribute：发布信息配置，包括Android和iOS的打包配置，如Android的权限申请、iOS的某些特殊配置等。
quickapp：快应用特有配置。
mp-weixin、mp-alipay、mp-baidu 等：各小程序平台的特有配置，如小程序的 appid、是否启用自定义组件模式等。

5. 统计与监控

uniStatistics：uni统计配置，用于控制是否开启uni统计功能，以收集应用的使用情况数据。

6. 其他配置

splashscreen：启动界面配置，包括是否等待首页渲染完毕后再关闭启动界面、是否自动关闭启动界面、是否在程序启动界面显示等待雪花等。
modules：模块配置，用于控制app的包体积，不需要的模块可以在打包时剔除。
vueVersion：Vue版本选择，uni-app支持Vue 2.x和Vue 3.x，可以在这里指定使用哪个版本的Vue。

注意事项

在配置 manifest.json 时，应确保遵循 JSON 的语法规则，如使用双引号表示字符串、对象属性名与值之间用冒号分隔等。
不同的平台（如小程序、H5、App）在解析 manifest.json 时可能会有所差异，因此在配置时需要注意跨平台的兼容性。
对于一些敏感信息（如小程序的 appid），应避免在公共的代码仓库中泄露。

总之，manifest.json 文件是 uni-app 项目中非常重要的配置文件，通过合理配置该文件，可以方便地管理应用的基本信息、窗口表现、平台特有配置等多个方面的内容。

page.json

pages.json 文件是 uni-app 项目中用于全局配置的重要文件，它决定了页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。该文件类似微信小程序中的 app.json 的页面管理部分，但提供了更多跨平台的配置选项。以下是对 pages.json 文件的详细解析：

基本结构

pages.json 是一个 JSON 格式的文件，其基本结构大致如下：

{  
  "pages": [  
    {  
      "path": "pages/index/index",  
      "style": {  
        // 页面样式配置  
      }  
    },  
    // 更多页面配置...  
  ],  
  "globalStyle": {  
    // 全局样式配置  
  },  
  "tabBar": {  
    // tabBar 配置  
  },  
  "condition": {  
    // 启动模式配置  
  },  
  "easycom": {  
    // 组件自动引入规则  
  },  
  // 其他配置项...  
}

------------------------------------------------------------
{
  "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"
  }
}

主要配置项

1. pages

作用：用于配置应用包含的页面路径及窗口表现。
格式：一个数组，每个元素都是一个对象，包含 path 和 style 两个属性。

path：页面路径，必须以 / 开头，表示项目的根目录。
style：页面样式配置，包括导航条样式、背景色等。

2. globalStyle

作用：用于设置默认页面的窗口表现，如导航栏样式、背景色等。
主要属性：

navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色，仅支持 black/white。
navigationBarTitleText：导航栏标题文字内容。
navigationBarBackgroundColor：导航栏背景颜色（同状态栏背景色）。
backgroundColor：窗口的背景色。
backgroundTextStyle：下拉 loading 的样式，仅支持 dark/light。
rpxCalcMaxDeviceWidth、rpxCalcBaseDeviceWidth、rpxCalcIncludeWidth：与 rpx 计算相关的配置。

3. tabBar

作用：用于配置底部的原生 tabbar。
主要属性：

color：未选中时 tab 上的文字默认颜色。
selectedColor：选中时 tab 上的文字颜色。
backgroundColor：tab 的背景色。
borderStyle：tabbar 上边框的颜色，可选值 black/white。
list：tab 的列表，每个元素都是一个对象，包含 pagePath、text、iconPath、selectedIconPath 等属性。

4. condition

作用：启动模式配置，仅开发期间生效，用于模拟直达页面的场景。
主要属性：

current：当前激活的模式（list 的索引项）。
list：模式的列表，每个元素包含 name、path 和可选的 query 属性。

5. easycom

作用：组件自动引入规则，可以简化组件的引用方式。
主要属性：

autoscan：是否开启自动扫描，开启后将会自动扫描符合特定目录结构的组件。
custom：自定义扫描规则，以正则方式定义组件的匹配规则。

注意事项

pages.json 文件中的配置项非常灵活，可以根据项目的具体需求进行配置。
不同的平台（如小程序、H5、App）在解析 pages.json 时可能会有所差异，因此在配置时需要注意跨平台的兼容性。
在配置 pages.json 时，应确保遵循 JSON 的语法规则，如使用双引号表示字符串、对象属性名与值之间用冒号分隔等。

总之，pages.json 文件是 uni-app 项目中非常重要的配置文件，通过合理配置该文件，可以方便地管理项目的页面、样式和导航等。

page.json VS VueRouter

上述page.json功能类似于Vue-Router路由管理，下面简单阐述其不同：

Vue Router与uni-app中的pages.json在路由管理上存在明显的区别，主要体现在它们的设计目标、配置方式、应用场景以及路由跳转的实现方式上。以下是对这两者的详细对比：

一、设计目标与应用场景

Vue Router：

设计目标：Vue Router是Vue.js的官方路由管理器，它与Vue.js深度集成，主要用于构建单页面应用（SPA）。
应用场景：主要面向Web应用，特别是需要页面间导航而不需要重新加载页面的Web应用。

uni-app的pages.json：

设计目标：uni-app是一个使用Vue.js开发所有前端应用的框架，其目标是编写一套代码，发布到iOS、Android、H5、以及各种小程序等多个平台。pages.json是uni-app中用于配置页面路由的全局配置文件。
应用场景：适用于需要跨平台开发的场景，包括Web、iOS、Android以及各种小程序等。

二、配置方式

Vue Router：

路由配置通常在项目的router.js或main.js文件中进行，通过定义路由表（routes）来管理页面间的导航。
每个路由对象包含路径（path）、组件（component）以及可能的子路由（children）等属性。

import Vue from 'vue'  
import Router from 'vue-router'  
import Home from './views/Home.vue'  

Vue.use(Router)  

export default new Router({  
  routes: [  
    {  
      path: '/',  
      name: 'home',  
      component: Home  
    },  
    // 其他路由...  
  ]  
})

uni-app的pages.json：

路由配置在全局的pages.json文件中进行，该文件定义了应用的所有页面及其导航条、窗口表现等属性。
每个页面配置项包含路径（path）、窗口表现（style）等属性。

{  
  "pages": [  
    {  
      "path": "pages/index/index",  
      "style": {  
        "navigationBarTitleText": "首页"  
      }  
    },  
    // 其他页面...  
  ]  
}

三、路由跳转的实现方式

Vue Router：

路由跳转通常通过编程式导航（如this.$router.push({ path: '/some-path' })）或声明式导航（在模板中使用<router-link to="/some-path">）来实现。

uni-app：

路由跳转在uni-app中通过API（如uni.navigateTo({ url: '/pages/some/path' })）或<navigator url="/pages/some/path">组件来实现。
uni-app还支持更丰富的页面跳转类型，如重定向（uni.redirectTo）、重新加载（uni.reLaunch）等。

标签：Uniapp,配置,基础,学习,json,uni,path,pages,页面
From： https://blog.51cto.com/u_15157190/11952194

一、项目结构解读

mainfest.json

基本结构

主要配置项

1. 应用基本信息

2. 窗口表现

3. 应用权限

4. 平台特有配置

5. 统计与监控

6. 其他配置

注意事项

page.json

基本结构

主要配置项

1. pages

2. globalStyle

3. tabBar

4. condition

5. easycom

注意事项

page.json VS VueRouter

一、设计目标与应用场景

二、配置方式

三、路由跳转的实现方式

相关文章

赞助商

阅读排行