uniapp7-uniapp项目配置你配置全了吗

uniapp7-uniapp项目配置你配置全了吗(基础配置)

1、 pages.json 基本配置

根目录下面这个文件夹是 Uni-app 中主要的配置文件，可以配置页面路径、窗口样式、导航栏样式、标签栏样式等信息。 其中，pages数组中第一项表示应用启动页。

简单看一下我们这个文件下面的信息和配置

tab栏导航切换

对tabBar进行配置，这里可以显示我们切换时候的底部背景文字颜色之类的！

"tabBar": {
		"color": "#7A7E83", //tab文字颜色
		"selectedColor": "#007AFF", //tab文字选中颜色
		"borderStyle": "black", //边框颜色 
		"backgroundColor":"#F8F8F8", // tab背景色
		"list": [{
				"pagePath": "pages/tabBar/index/index",
				// "iconPath": "static/component.png",
				// "selectedIconPath": "static/componentHL.png",
				"text": "首页"
		}]
}

List里面 添加Tab切换组件列表

{
    "pagePath": "pages/tabBar/component/component",
    "text": "组件页面"
}

添加首页页面

pages 下面写入对象，设置首页标题和首页下拉刷新

{
    "path": "pages/tabBar/index/index",
    "style": {
            "navigationBarTitleText": "首页",
            "enablePullDownRefresh": true     // 开启下拉刷新
    }
}

添加组件列表页面

{
    "path": "pages/tabBar/component/component",
    "style": {
            "navigationBarTitleText": "组件页面"
    }
}

static 静态文件

添加image 图片目录 ，放入tab的icon图片

2、 pages 页面路径配置：

用来配置各个页面的路径，也就是用来加载和跳转页面使用。

3、 globalStyle 全局样式配置：

用来设置全局的窗口样式，如窗口背景色、导航栏背景色,之后我们就能使用到

4、 pages下的style:页面特定配置：

用来为每个页面单独配置窗口样式、导航栏样式等，使得每个页面可以有不同的外观表现。 简单写法如下：

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
                "path": "pages/tabBar/index/index",
                "style": {
                        "navigationBarTitleText": "首页",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                }
        },
   ]

当然，我们也可以在每个页面的 .vue 文件中单独配置。

5、 subPackages分包配置：

用来在 subPackages 字段中配置分包的路径和规则，以便进行分包加载和管理，简单写法如下：

"subPackages": [ 
    { "root": "package1", "pages": [ "sub1/index", "sub1/detail" ] },
    { "root": "package2", "pages": [ "sub2/index", "sub2/detail" ] } 
],

6、 condition 多端适配：

用来设置条件编译，实现多端（如H5、小程序等）的适配,简单写法如下：

"condition": { "mp-weixin": { "navigationBarTextStyle": "white" } }

7、 tabBar 自带菜单栏：

这是官方给我们自带的菜单栏，可以在这个里写一些我们没有复杂设计时候的菜单

8、 uniIdRouter 指定页面的唯一标识符：

用于页面之间的路由跳转和传参

意思就是当我们在 pages.json 文件中设置了 uniIdRouter: true，则表示该页面使用唯一标识符进行路由跳转。

可以避免直接使用页面路径进行路由跳转，有没有在一瞬间觉得其实这就是vue-router之中的name，反正我感觉差不多就是一个意思。

大致写起来就是下面这样子：

{
  "pages": [
    {
      "path": "pages/index/index",
      "aliasPath": "/index",
      "uniIdRouter": true
    },
    {
      "path": "pages/detail/detail",
      "aliasPath": "/detail",
      "uniIdRouter": true
    }
  ]
}

使用的时候

// 使用唯一标识符进行路由跳转
uni.navigateTo({
    url: 'uni-id://index' 
});

9、报错和处理

（1）Unhandled promise rejection

原因：没写catch()

解决方法：

这种情况下会在控制台中看到 "Unhandled promise rejection" 错误, 可以用以下来捕获错误

let promise = new Promise(function(resolve, reject) {
  reject(new Error("Uncaught Error"));
});
promise.then(function(result) {
  console.log(result);
}).catch(function(error) {
  console.log(error.message);
});

（2）unhandled promise rejection ty

这里这句unhandled promise rejection ty 的意思是未处理的 Promise 拒绝。这通常是因为 Promise 对象被拒绝了，但没有被 catch 或者处理。在 JavaScript 中，Promise 对象可以表示异步操作的结果，如果 Promise 对象被拒绝了，就需要通过 catch 或者处理函数来处理这个错误。如果没有处理，就会出现 unhandled promise rejection ty 的错误提示。