un-app 其他配置文件詳解

1. 前言

我們?nèi)粘ｉ_發(fā)的時候，如果沒有特殊的需求，是不需要重新設(shè)置 uni-app 項(xiàng)目中的配置文件的，大多數(shù)情況下，保持默認(rèn)的狀態(tài)就可以了。

但是這些配置文件的大致功能我們還是需要了解一下，開發(fā)時遇到突發(fā)情況給自己多提供一個思路解決問題，以備不時之需。

uni-app 支持的全局配置包括：pages.json、manifest.json、package.json、vue-config.js、uni.scss。pages.json我們上一小節(jié)已經(jīng)講過了，本小節(jié)我們來看看其他配置文件。

2. manifest.json 配置文件

manifest.json 文件主要用來指定項(xiàng)目的基礎(chǔ)配置、圖標(biāo)配置、啟動頁面配置等。

使用 HBuilderX 創(chuàng)建的項(xiàng)目，manifest.json 文件是在項(xiàng)目的根目錄下面。使用CLI 創(chuàng)建的項(xiàng)目，manifest.json 文件是在項(xiàng)目的 src 目錄下面。

在 HBuilderX 中打開manifest.json 文件，默認(rèn)顯示的是可視化操作界面。如果想要轉(zhuǎn)換成源碼顯示，點(diǎn)擊可視化操作頁面中左下角的“源碼視圖”就會看到源碼了。

Native.js 權(quán)限部分會根據(jù)配置的模塊權(quán)限，在打包后自動填充。
大多數(shù) modules 是默認(rèn)的，不需要我們進(jìn)行配置。還有像配置證書信息等部分配置，是在打包的操作界面補(bǔ)全這些信息。

還有一些配置我們開發(fā)的時候可能需要修改，接下來我們來詳細(xì)看一下。

2.1 App 模塊配置

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

開發(fā)時建議直接使用這些 HBuilderX 中自帶的原生控件就可以了，相比于其他控件，原生空間操作速度會更流暢一些，可以提高用戶APP的使用體驗(yàn)。

2.2 App 權(quán)限配置

系統(tǒng)會自己幫我們開啟一些權(quán)限，其中包括使用網(wǎng)絡(luò)權(quán)限、讀寫 SD 卡權(quán)限、讀取設(shè)備標(biāo)識使用、安裝 apk 需要的權(quán)限等。權(quán)限的設(shè)置可以參考下面的官方文檔，寫的非常詳細(xì)。

Android平臺云端打包權(quán)限配置：
https://ask.dcloud.net.cn/article/36982

3. package.json 配置文件

uni-app 項(xiàng)目中的 package.json 文件，一般是用來幫我們擴(kuò)展項(xiàng)目配置的。

這個文件不是所有項(xiàng)目中都有，通過 HBuilderX 可視化界面創(chuàng)建的項(xiàng)目一般默認(rèn)是不創(chuàng)建 package.json 文件的。通過vue-cli命令行方式創(chuàng)建的項(xiàng)目默認(rèn)是有 package.json 文件的。

我們可以通過在package.json文件中增加uni-app擴(kuò)展節(jié)點(diǎn)，可以實(shí)現(xiàn)釘釘小程序、微信服務(wù)號等這樣的平臺自定義條件編譯平臺。

自定義條件編譯平臺我們在前面小節(jié)講過如何自定義微信服務(wù)號條件編譯平臺，這次來演示一下如何自定義釘釘小程序條件編譯平臺，以及怎樣在自定義編譯平臺上面運(yùn)行及發(fā)布項(xiàng)目。

3.1 自定義釘釘小程序條件編譯平臺

通過 HBuilderX 可視化界面創(chuàng)建的項(xiàng)目一般默認(rèn)是沒有 package.json 文件的，這樣我們需要在項(xiàng)目根目錄下面新建一個 package.json 文件。

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

實(shí)例：

{
	"uni-app": {
		"scripts": {
			"mp-dingtalk": {
				"title": "運(yùn)行到釘釘小程序",
				"env": {
					"UNI_PLATFORM": "mp-alipay"
				},
				"define": {
					"MP-DINGTALK": true
				}
			}
		}
	},
	"dependencies": {}
}

3.2 使用自定義平臺

后面在開發(fā)過程中，如果想要讓代碼只在自定義平臺上面運(yùn)行，可以像下面這樣定義，與使用其他平臺的條件編譯是一樣的。

實(shí)例：

// #ifdef MP-DINGTALK
  console.log("釘釘平臺特有代碼")
// #endif

3.3 運(yùn)行及發(fā)布項(xiàng)目

如果是通過 vue-cli 進(jìn)行開發(fā)，可以在命令行運(yùn)行下面代碼來運(yùn)行發(fā)布項(xiàng)目。

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

如果通過 HBuilderX 進(jìn)行開發(fā)， HBuilderX 開發(fā)工具會根據(jù)package.json 文件中的配置，在運(yùn)行和發(fā)行菜單下生成自定義菜單。

如果package.json中的配置添加完成后，HBuilderX 開發(fā)工具沒有幫我們自動生成自定義菜單，我們可以先編譯一下項(xiàng)目，比如點(diǎn)擊運(yùn)行–運(yùn)行到內(nèi)置瀏覽器。編譯完成后，自定義菜單就會出現(xiàn)了。

最后我們點(diǎn)擊對應(yīng)的菜單編譯運(yùn)行項(xiàng)目就可以了，如下圖：

4. vue.config.js 配置文件

vue.config.js 是一個可選的配置文件，一般用于配置 webpack 等編譯選項(xiàng)。如果項(xiàng)目的根目錄中存在這個文件，那么它會被自動加載，可以與 manifest.json 文件搭配使用。

如果 vue.config.js 文件與 manifest.json 文件中的配置沖突了，系統(tǒng)會以manifest.json 文件中的配置為準(zhǔn)，覆蓋掉 vue.config.js 文件中的配置。

vue.config.js 配置文件支持動態(tài)參數(shù)配置，但是每次更新此配置文件的參數(shù)，要記得重新編輯程序配置才生效。

5. uni.scss 配置文件

uni.scss 配置文件在項(xiàng)目根目錄下面可以找到，這個文件放了一些 uni-app 內(nèi)置的常用樣式變量。主要是用來控制項(xiàng)目的全局樣式的，比如頁面底色、按鈕顏色等。

我們可以通過修改 uni.scss 配置文件中的變量來定制自己需要的插件主題，實(shí)現(xiàn)自定義主題功能。

不像其他的樣式文件，頁面用到的時候，需要先 import 文件才可以使用。uni.scss 文件比較特殊，我們不需要 import 這個文件，uni.scss 中的樣式變量就可以在該項(xiàng)目中的所有文件中調(diào)用。

6. 小結(jié)

本小節(jié)我們主要給大家講解了un-app 中manifest.json、package.json、vue-config.js、uni.scss配置文件的作用。

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