un-app 其他配置文件详解

1. 前言

我们日常开发的时候，如果没有特殊的需求，是不需要重新设置 uni-app 项目中的配置文件的，大多数情况下，保持默认的状态就可以了。

但是这些配置文件的大致功能我们还是需要了解一下，开发时遇到突发情况给自己多提供一个思路解决问题，以备不时之需。

uni-app 支持的全局配置包括：pages.json、manifest.json、package.json、vue-config.js、uni.scss。pages.json我们上一小节已经讲过了，本小节我们来看看其他配置文件。

2. manifest.json 配置文件

manifest.json 文件主要用来指定项目的基础配置、图标配置、启动页面配置等。

使用 HBuilderX 创建的项目，manifest.json 文件是在项目的根目录下面。使用CLI 创建的项目，manifest.json 文件是在项目的 src 目录下面。

在 HBuilderX 中打开manifest.json 文件，默认显示的是可视化操作界面。如果想要转换成源码显示，点击可视化操作页面中左下角的“源码视图”就会看到源码了。

Native.js 权限部分会根据配置的模块权限，在打包后自动填充。
大多数 modules 是默认的，不需要我们进行配置。还有像配置证书信息等部分配置，是在打包的操作界面补全这些信息。

还有一些配置我们开发的时候可能需要修改，接下来我们来详细看一下。

2.1 App 模块配置

HBuilderX 中帮我们集成了很多常用的原生控件，比如 Maps 地图控件、Payment 支付控件。

开发时建议直接使用这些 HBuilderX 中自带的原生控件就可以了，相比于其他控件，原生空间操作速度会更流畅一些，可以提高用户APP的使用体验。

2.2 App 权限配置

系统会自己帮我们开启一些权限，其中包括使用网络权限、读写 SD 卡权限、读取设备标识使用、安装 apk 需要的权限等。权限的设置可以参考下面的官方文档，写的非常详细。

Android平台云端打包权限配置：
https://ask.dcloud.net.cn/article/36982

3. package.json 配置文件

uni-app 项目中的 package.json 文件，一般是用来帮我们扩展项目配置的。

这个文件不是所有项目中都有，通过 HBuilderX 可视化界面创建的项目一般默认是不创建 package.json 文件的。通过vue-cli命令行方式创建的项目默认是有 package.json 文件的。

我们可以通过在package.json文件中增加uni-app扩展节点，可以实现钉钉小程序、微信服务号等这样的平台自定义条件编译平台。

自定义条件编译平台我们在前面小节讲过如何自定义微信服务号条件编译平台，这次来演示一下如何自定义钉钉小程序条件编译平台，以及怎样在自定义编译平台上面运行及发布项目。

3.1 自定义钉钉小程序条件编译平台

通过 HBuilderX 可视化界面创建的项目一般默认是没有 package.json 文件的，这样我们需要在项目根目录下面新建一个 package.json 文件。

找到 package.json 文件后，在 package.json 文件中添加以下代码。注意一定不要落下最外层的大括号。

实例：

{
	"uni-app": {
		"scripts": {
			"mp-dingtalk": {
				"title": "运行到钉钉小程序",
				"env": {
					"UNI_PLATFORM": "mp-alipay"
				},
				"define": {
					"MP-DINGTALK": true
				}
			}
		}
	},
	"dependencies": {}
}

3.2 使用自定义平台

后面在开发过程中，如果想要让代码只在自定义平台上面运行，可以像下面这样定义，与使用其他平台的条件编译是一样的。

实例：

// #ifdef MP-DINGTALK
  console.log("钉钉平台特有代码")
// #endif

3.3 运行及发布项目

如果是通过 vue-cli 进行开发，可以在命令行运行下面代码来运行发布项目。

npm run dev:custom mp-dingtalk 
npm run build:custom mp-dingtalk

如果通过 HBuilderX 进行开发， HBuilderX 开发工具会根据package.json 文件中的配置，在运行和发行菜单下生成自定义菜单。

如果package.json中的配置添加完成后，HBuilderX 开发工具没有帮我们自动生成自定义菜单，我们可以先编译一下项目，比如点击运行–运行到内置浏览器。编译完成后，自定义菜单就会出现了。

最后我们点击对应的菜单编译运行项目就可以了，如下图：

4. vue.config.js 配置文件

vue.config.js 是一个可选的配置文件，一般用于配置 webpack 等编译选项。如果项目的根目录中存在这个文件，那么它会被自动加载，可以与 manifest.json 文件搭配使用。

如果 vue.config.js 文件与 manifest.json 文件中的配置冲突了，系统会以manifest.json 文件中的配置为准，覆盖掉 vue.config.js 文件中的配置。

vue.config.js 配置文件支持动态参数配置，但是每次更新此配置文件的参数，要记得重新编辑程序配置才生效。

5. uni.scss 配置文件

uni.scss 配置文件在项目根目录下面可以找到，这个文件放了一些 uni-app 内置的常用样式变量。主要是用来控制项目的全局样式的，比如页面底色、按钮颜色等。

我们可以通过修改 uni.scss 配置文件中的变量来定制自己需要的插件主题，实现自定义主题功能。

不像其他的样式文件，页面用到的时候，需要先 import 文件才可以使用。uni.scss 文件比较特殊，我们不需要 import 这个文件，uni.scss 中的样式变量就可以在该项目中的所有文件中调用。

6. 小结

本小节我们主要给大家讲解了un-app 中manifest.json、package.json、vue-config.js、uni.scss配置文件的作用。

虽然本小节介绍的配置文件需要我们自己配置的机会不多，但是还是需要我们大家去了解并掌握，这样如果碰到相关的开发需求可以快速定位到问题。