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配置文件的作用。

雖然本小節介紹的配置文件需要我們自己配置的機會不多，但是還是需要我們大家去了解并掌握，這樣如果碰到相關的開發需求可以快速定位到問題。