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）等。
相关推荐
阿伟来咯~25 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端30 分钟前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱32 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai41 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨43 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts！从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解