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）等。
