Uniapp基础学习（二）

GISer_Jing2024-09-11 14:21

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在路由管理上存在明显的区别，主要体现在它们的设计目标、配置方式、应用场景以及路由跳转的实现方式上。以下是对这两者的详细对比：

一、设计目标与应用场景

  1. Vue Router ：
    • 设计目标：Vue Router是Vue.js的官方路由管理器，它与Vue.js深度集成，主要用于构建单页面应用（SPA）。
    • 应用场景：主要面向Web应用，特别是需要页面间导航而不需要重新加载页面的Web应用。
  2. uni-app的pages.json ：
    • 设计目标：uni-app是一个使用Vue.js开发所有前端应用的框架，其目标是编写一套代码，发布到iOS、Android、H5、以及各种小程序等多个平台。pages.json是uni-app中用于配置页面路由的全局配置文件。
    • 应用场景：适用于需要跨平台开发的场景，包括Web、iOS、Android以及各种小程序等。

二、配置方式

  1. 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": "首页"
    }
    },
    // 其他页面...
    ]
    }

三、路由跳转的实现方式

  1. Vue Router ：
    • 路由跳转通常通过编程式导航（如this.$router.push({ path: '/some-path' })）或声明式导航（在模板中使用<router-link to="/some-path">）来实现。
  2. uni-app ：
    • 路由跳转在uni-app中通过API（如uni.navigateTo({ url: '/pages/some/path' })）或<navigator url="/pages/some/path">组件来实现。
    • uni-app还支持更丰富的页面跳转类型，如重定向（uni.redirectTo）、重新加载（uni.reLaunch）等。
相关推荐
JinSoooo1 分钟前
pnpm monorepo 联调方案
前端·pnpm·monorepo
m0_7482449610 分钟前
【AI系统】LLVM 前端和优化层
前端·状态模式
明弟有理想10 分钟前
Chrome RCE 漏洞复现
前端·chrome·漏洞·复现
平行线也会相交11 分钟前
云图库平台（二）前端项目初始化
前端·vue.js·云图库平台
shimmer00812 分钟前
抖音小程序登录（前端通过tt.login获取code换取openId）
前端·小程序·状态模式
ai产品老杨20 分钟前
报警推送消息升级的名厨亮灶开源了。
vue.js·人工智能·安全·开源·音视频
嘤嘤怪呆呆狗22 分钟前
【开发问题记录】使用 Docker+Jenkins+Jenkins + gitee 实现自动化部署前端项目 CI/CD（centos7为例）
前端·vue.js·ci/cd·docker·gitee·自动化·jenkins
鱼钓猫的小鱼干27 分钟前
table 表格转成 excell 导出
前端·vue·excel
一只搬砖的猹29 分钟前
cJson系列——常用cJson库函数
linux·前端·javascript·python·物联网·mysql·json
CodeClimb41 分钟前
【华为OD-E卷-租车骑绿道 100分（python、java、c++、js、c）】
java·javascript·c++·python·华为od
热门推荐
01大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06支付宝短视频平台创作分成激励项目07怎么找小红书美食探店博主合作？08【一文读懂】NTN（非地面网络）技术介绍09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10STM32 无法烧录