小程序：小程序全局配置及配置详解

小程序全局配置及配置详解

小程序配置文件 app.json

默认启动页面路径

{
	// 默认启动页面路径
	"entryPagePath": "pages/index/index" 
}

状态栏、导航条、标题、窗口背景色

{
	"window": { 
		// 导航栏背景颜色
		"navigationBarBackgroundColor": "#000", 
		// 导航栏标题颜色 仅支持 black / white
		"navigationBarTextStyle": "white",    
		// 导航栏标题文字内容	
		"navigationBarTitleText": "首页", 
		// 导航栏样式，仅支持以下值：default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。
		"navigationStyle": "default", 
		 // 在非首页、非页面栈最底层页面或非 tabbar 内页面中的导航栏展示 home 键
		"homeButton": "default",   
		// 窗口的背景色
		"backgroundColor": "#ffffff",   
		// 下拉 loading 的样式，仅支持 dark / light
		"backgroundTextStyle": "dark",  
		// 顶部窗口的背景色，仅 iOS 支持
		"backgroundColorTop": "#ffffff",    
		// 底部窗口的背景色，仅 iOS 支持
		"backgroundColorBottom": "#ffffff", 
		// 是否开启全局的下拉刷新。
		"enablePullDownRefresh": "false", 
		// 页面上拉触底事件触发时距页面底部距离，单位为 px。
		"onReachBottomDistance": "50",  
		// 屏幕旋转设置，支持 auto / portrait / landscape
		"pageOrientation": "portrait",  
		 // 重新启动策略配置
		"restartStrategy": "homePage", 
		// 页面初始渲染缓存配置，支持 static / dynamic
		"initialRenderingCache": "",    
		// 切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none
		"visualEffectInBackground": "none",     
		// 控制预加载下个页面的时机。支持 static / manual / auto
		"handleWebviewPreload": "static",   
	}
}

设置页面底部tab项

{
	"tabBar": {
		// tab 上的文字默认颜色
		"color": "#fff",         
		// tab 上的文字选中时的颜色
		"selectedColor": "#fff",     
		// tab 的背景色
		"backgroundColor": "#fff", 
		// tabbar 上边框的颜色， 仅支持 black / white
		"borderStyle": "black", 
		// tabBar 的位置，仅支持 bottom / top
		"position": "bottom",   
		// 自定义tabBar
		"custom": "false",  
		// tabBar 数组
		list:[{			
			"pagePath": "url",  // tabar路径
			"text": "首页",     // tabar文字
			"iconPath": "../index.png",     // 选中状态的图标
			"selectedIconPath": "../index-active.png", // 非选中状态的图标
		}]
	}
}

请求超时时间

{
	"networkTimeout": {
		"request": "index",     // wx.request 的超时时间
		"connectSocket": "index",   // wx.connectSocket 的超时时间
		"uploadFile": "index",      // wx.uploadFile 的超时时间
		"downloadFile": "index"     // wx.downloadFile 的超时时间
	}
}

调试

{
	// 在开发者工具中开启 debug 模式
	// 在开发者工具的控制台面板，调试信息以 info 的形式给出
	"debug": false,

	// 小程序调试相关配置项
	"debugOptions": {
		// 是否开启 FPS 面板
		// 为了便于开发者调试渲染层的交互性能，小程序基础库提供了选项开启 FPS 面板
		// 开发者可以实时查看渲染层帧率。
		"enableFPSPanel": true 
	}
}

开启多线程 Worker

{
	"workers": "workers"
}

申明需要后台运行的能力

{
	// audio: 后台音乐播放 location: 后台定位
	// 开发版和体验版上可以直接生效，正式版还需通过审核。
	"requiredBackgroundModes": ["audio", "location"]
}

地理位置接口声明

{
	/*
		使用以下8个地理位置相关接口时，需要声明该字段，否则将无法正常使用。
		getFuzzyLocation: 获取模糊地理位置
		getLocation: 获取精确地理位置
		onLocationChange: 监听试试地理位置变化事件
		startLocationUpdate: 接收位置消息（前台）
		startLocationUpdateBackground: 接收位置消息（前后台）
		chooseLocation: 打开地图选择位置
		choosePoi: 打开 POI 列表选择位置
		chooseAddress: 获取用户地址信息
	*/
	"requiredPrivateInfos": [
		"getFuzzyLocation",
		"getLocation",
		"onLocationChange",
		"startLocationUpdate",
		"startLocationUpdateBackground",
		"chooseLocation",
		"choosePoi",
		"chooseAddress"
	]
}

小程序接口权限

{
	// 小程序接口权限相关设置。
	"permission": {
		"scope.userLocation": {	// wx.getLocation, wx.startLocationUpdate
      "desc": "精确地理位置"	
    },
		"scope.userFuzzyLocation": {	// wx.getFuzzyLocation
      "desc": "模糊地理位置"	
    },
		"scope.userLocationBackground": { // wx.startLocationUpdateBackground
      "desc": "后台定位"	
    },
		"scope.record": { // live-pusher组件, wx.startRecord, wx.joinVoIPChat, RecorderManager.start
      "desc": "麦克风"	
    },
		"scope.camera": { // camera组件, live-pusher组件, wx.createVKSession
      "desc": "摄像头"	
    },
		"scope.bluetooth": { // wx.openBluetoothAdapter, wx.createBLEPeripheralServer
      "desc": "蓝牙"	
    },
		"scope.writePhotosAlbum": { // wx.saveImageToPhotosAlbum, wx.saveVideoToPhotosAlbum
      "desc": "添加到相册"	
    },
		"scope.addPhoneContact": { // wx.addPhoneContact
      "desc": "添加到联系人"	
    },
		"scope.addPhoneCalendar": { // wx.addPhoneRepeatCalendar, wx.addPhoneCalendar
      "desc": "添加到日历"	
    },
		"scope.werun": { // wx.getWeRunData
      "desc": "微信运动步数"	
    },
		"scope.address": { // wx.chooseAddress
      "desc": "通讯地址（已取消授权，可以直接调用对应接口）"	
    },
		"scope.invoiceTitle": { // wx.chooseInvoiceTitle
      "desc": "发票抬头（已取消授权，可以直接调用对应接口）"	
    },
		"scope.invoice": { // wx.chooseInvoice
      "desc": "获取发票（已取消授权，可以直接调用对应接口）"	
    },
		"scope.userInfo": { // wx.getUserInfo
      "desc": "用户信息（小程序已回收，请使用头像昵称填写，小游戏可继续调用）"	
    }
	}
}

插件功能

{
	// 插件所有者小程序需要设置这一项来启用插件功能页
	"functionalPages": true,
	// 声明小程序需要使用的插件。
	"plugins": {
		"myPlugin": {	// 插件
			"version": "1.0.0",
			"provider": ""
	}},
}

分包

{
	// 启用分包加载时，声明项目分包结构。
	"subpackages": [
		{
	 // 当前包的根目录（根目录的相对路径），必须是独立的，即a的根目录不能在b的子目录中。
      "root": "important", 
      "pages": ["index"], // 当前包下的页面路径
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }],

	// 声明分包预下载的规则。分包预下载目前只支持通过配置方式使用
	// packages 进入页面后预下载分包的 root 或 name。__APP__ 表示主包。
	// 在指定网络下预下载，可选值为： all: 不限网络 wifi: 仅 wifi 下预下载
	"preloadRule": {
		"pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
	}
}

扩展库

{
	// 指定需要引用的扩展库。目前支持以下项目：kbone: 多端开发框架 weui: WeUI 组件库
	"useExtendedLib": {
		"kbone": true,
    "weui": true
	}
}

系统

{
	// 在 iPad 上运行的小程序可以设置支持屏幕旋转。
	// 在 PC 上运行的小程序，用户可以按照任意比例拖动窗口大小，也可以在小程序菜单中最大化窗口
	"resizable": false,

	// DarkMode系统主题样式
	// 配置"darkmode": true表示当前小程序可适配 DarkMode
	"darkmode": true,

	// 指明 theme.json 的位置，darkmode为 true 为必填
	// theme.json 定义相关变量 在app.json中以@开头引用变量。
	"themeLocation": "theme.json"
}
	

其他

{
	// 指明 sitemap.json 的位置(微信小程序SEO)
	"sitemapLocation": "sitemap.json",

	// 启用新版的组件样式。
	"tyle": "v2",

	// 定制化型服务商票据 不知道有啥用
	"serviceProviderTicket": "", 

	// 小程序不使用 catchtouch* 事件时，可以通过这个选项将 passive 置为 true，以提高滚动性能
	// 直接设置这个选项为 true，也可以分别控制某个事件。
	"enablePassiveEvent": {
		"touchstart": true,
		"touchmove": true,
		"wheel": true
	},

	// 自定义模块路径的映射规则
	// 使用该能力的时候，需要在工具上关闭上传代码保护功能
	"resolveAlias": {
		"~/*": "/*",
    "~/origin/*": "origin/*",
    "@utils/*": "utils/*",
    "subBUtils/*": "subpackageB/utils/*"
	},

	// 全局自定义组件配置
	// 注1：全局自定义组件会视为被所有页面依赖，会在所有页面启动时进行初始化
	// 影响启动性能且会占用主包大小。只被个别页面或分包引用的自定义组件应尽量在页面配置中声明。
	// 注2：在全局声明使用率低的自定义组件会大幅影响按需注入的效果。
	"usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
	},

	// 开启小程序 代码注入「按需注入」特性 目前仅支持值 requiredComponents，
	"lazyCodeLoading": "requiredComponents",

	// 单页模式相关配置
	"singlePage": {
		// 导航栏与页面的相交状态，值为 float 时表示导航栏浮在页面上，与页面相交
		// 值为 squeezed 时表示页面被导航栏挤压，与页面不相交
		"navigationBarFit": "float/squeezed" 
	},

	// 打开微信聊天内的素材时，如果小程序配置了支持打开该类型的素材并审核通过
	// 而且用户曾经使用过该小程序，则打开该类型的素材时会出现使用小程序打开的入口。
	// 开发者需要在小程序全局配置(app.json)中声明支持打开的文件类型
	// 对一种文件类型只能声明一种处理方式。
	"supportedMaterials":  {
		"materialType": "text/html",	// 支持文件的类型, 官方指定属性值
		"name": "用${nickname}打开",	// 开发者配置的标题，在素材页面会展示该标题
		"desc": "描述",			// 用途描述，会在推荐列表展示该描述
		"path": "pages/index/"		// 在该场景下打开小程序时跳转页面
	},

	// 指定小程序可通过wx.openEmbeddedMiniProgram打开的小程序名单是。
	// 指定的小程序以半屏的方式打开
	"embeddedAppIdList": "wxe5f52902cf4de896",

	// 视频号直播打开的第一个页面的全屏状态使用自定义顶部，支持 default / custom
	"halfPage": {
		"firstPageNavigationStyle": "custom"
	},

	// 聊天位置消息打开,小程序打车入口
	"entranceDeclare": {
    "locationMessage": {
        "path": "pages/index/index",
        "query": "foo=bar"
    }
	},

	// 全局的默认渲染后端。
	"renderer": "webview / skyline"
}