1. uniapp配置文件简介
在uniapp中，我们可以通过配置文件来定义一些全局的配置，包括页面风格、请求域名、应用名称等。uniapp的配置文件包括两个，分别是App.vue和manifest.json。这两个文件的作用不同，前者是应用程序的入口组件，而后者是Uni-app应用的主体配置文件。
1.1 App.vue
在App.vue中，我们可以通过配置全局的样式、通过添加生命周期钩子函数来统一处理请求异常等。下面是一个简单的示例：
<template>
<div>
<router-view/>
</div>
</template>
<script>
export default {
onLaunch() {
uni.request({
url: 'http://www.example.com/api'
}).then((res) => {
console.log(res.data)
}).catch((e) => {
console.log(e)
})
},
onError(err) {
console.log(err)
}
}
</script>
<style>
/* 全局样式 */
</style>
在这个例子中，我们通过onLaunch生命周期钩子函数来进行请求，并通过onError来统一处理请求异常，同时也可以定义全局的样式。
1.2 manifest.json
manifest.json是Uni-app应用的主体配置文件，主要用来定义应用的一些基础信息，包括应用名称、appid、页面路径等。下面是一个简单的示例：
{
"name": "myApp",
"version": "1.0.0",
"description": "This is my first uniapp",
"appid": "com.example.myapp",
"pages": [
{
"path": "pages/index/index",
"style": {}
}
],
"networkTimeout": {
"request": 5000,
"image": 5000
},
"tabBar": {
"color": "#666666",
"selectedColor": "#ff0000",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-active.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "static/tabbar/user.png",
"selectedIconPath": "static/tabbar/user-active.png"
}
]
}
}
在这个例子中，我们定义了应用的名称、版本、描述信息、appid等基础信息，定义了一个pages数组，用来存放应用的页面路径，同时定义了一个tabBar，用来定义底部的导航栏。
2. uniapp配置文件使用方法
将上面的配置文件保存到对应的文件中后，我们就可以在应用程序中使用配置文件中定义的信息了。在使用之前，我们需要先通过import语句将配置文件导入到我们的组件中，然后就可以通过this.\$.xxx的方式来访问相应的属性了，其中xxx是配置文件中定义的属性名称。
2.1 App.vue中使用
在App.vue中，我们可以定义一些全局的变量和方法，并在其他组件中使用。示例代码如下：
<template>
<div>
<router-view/>
</div>
</template>
<script>
import config from './manifest.json'
export default {
data() {
return {
appName: config.name,
appid: config.appid
}
},
methods: {
showToast(msg) {
uni.showToast({
title: msg,
icon: 'none',
duration: 2000
})
}
}
}
</script>
<style>
/* 全局样式 */
</style>
在这个例子中，我们通过import语句将manifest.json导入到当前组件中，并定义了一个名称为appName的数据变量和一个名称为showToast的方法，分别用来保存应用的名称和显示toast消息。
2.2 其他组件中使用
在其他组件中，我们可以通过this.\$parent的方式来访问App.vue中定义的全局变量和方法。示例代码如下：
<template>
<div>
<h3>{{appName}}</h3>
<button @click="showToast()">显示Toast</button>
</div>
</template>
<script>
export default {
computed: {
appName() {
return this.\$parent.appName
}
},
methods: {
showToast() {
this.\$parent.showToast('Hello, world!')
}
}
}
</script>
<style scoped>
/* 样式 */
</style>
在这个例子中，我们通过computed计算属性和methods方法，分别使用this.\$parent.appName和this.\$parent.showToast()的方式来访问App.vue中定义的全局变量和方法，并在模板中使用相关的数据变量和方法。
3. uniapp配置文件常用属性介绍
下面是一些常用的manifest.json属性介绍：
3.1 name
应用程序的名称。
{
"name": "myApp"
}
3.2 version
应用程序的版本。
{
"version": "1.0.0"
}
3.3 description
应用程序的描述信息。
{
"description": "This is my first uniapp"
}
3.4 appid
应用程序的唯一标识符。
{
"appid": "com.example.myapp"
}
3.5 pages
应用程序的页面路径和页面级别等相关信息，可以包含多个页面。
"pages": [
{
"path": "pages/index/index",
"style": {}
},
{
"path": "pages/user/user",
"style": {}
}
],
3.6 tabBar
应用程序的底部导航栏，用来切换页面。
"tabBar": {
"color": "#666666",
"selectedColor": "#ff0000",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-active.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "static/tabbar/user.png",
"selectedIconPath": "static/tabbar/user-active.png"
}
]
}
4. 总结
配置文件在uniapp中是非常重要的一部分，通过配置文件，我们可以定义全局的样式、全局的变量和方法，以及应用程序的基础信息等。在使用时，我们需要先通过import语句将配置文件导入到组件中，然后就可以通过this.\$xxx的方式来访问相应的属性了，其中xxx是配置文件中定义的属性名称。这篇文章介绍了uniapp的两个配置文件App.vue和manifest.json，以及常用的属性和使用方法，希望能对大家有所帮助。