uni-app入门教程（2）页面样式、配置文件和生命周期

小灰灰 2022-12-28 04:09 19阅读 0赞

### 文章目录 ###

*  前言
 *  一、页面样式与布局
 *   *  1.尺寸单位
     *  2.样式导入
     *  3.内联样式
     *  4.选择器
     *  5.全局样式与局部样式
 *  二、配置文件
 *   *  1.页面配置pages.json
     *   *  globalStyle
         *  pages
         *  tabBar
         *  condition
     *  2.显示配置manifest.json
 *  三、生命周期
 *  总结

# 前言 #

本文先介绍uni-app的页面样式和布局，包括尺寸单位、样式导入、内联样式和选择器等；再介绍两个配置文件，即pages.json和manifest.json的配置项和基本使用；最后简要介绍了生命周期的基本使用。

# 一、页面样式与布局 #

## 1.尺寸单位 ##

uni-app框架目前仅支持长度单位`px`和`%`。与传统web页面不同，px是相对于**基准宽度**（uni-app的基准宽度为**750px**）的单位，已经适配了移动端屏幕，其原理类似于rem，开发者不需要再针对不同屏幕大小的设备进行适配，只需按照设计稿确定框架样式中的px值即可。  
设计稿1px与框架样式1px转换公式为`设计稿 1px / 设计稿基准宽度 = 框架样式1px / 750px`，换言之，页面元素宽度在uni-app中的宽度计算公式为`750px * 元素在设计稿中的宽度 / 设计稿基准宽度`。  
举例如下：

> 若设计稿宽度为640px，元素A在设计稿上的宽度为100px，那么元素A在uni-app里面的宽度应该设为`750 * 100 / 640`，即117px；  
> 若设计稿宽度为375px，元素 B 在设计稿上的宽度为200px，那么元素B在uni-app里面的宽度应该设为`750 * 200 / 375`，即400px。

## 2.样式导入 ##

使用`@import`语句导入外联样式表，`@import`后跟需要导入的外联样式表的**相对路径**，用`;`结束语句。  
例如：

## 3.内联样式 ##

框架组件上支持使用style、class属性来控制组件的样式：  
（1）class  
用于指定样式规则，其属性值是样式规则中类选择器名（样式类名）的集合，样式类名不需要带上`.`，样式类名之间用空格分隔。  
一般会将**静态**的样式统一写到class中。  
例如：

之前的hello uniapp项目中，App.vue如下：

pages/index/index.vue如下：

<template>
    	<view class="content">
    		<image class="logo" src="/static/logo.png"></image>
    		<view class="text-area">
    			<text class="title">{
       {title}}</text>
    		</view>
    		<view class="red">
    			hello, corley
    		</view>
    	</view>
    </template>
    
    <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } </script>
    
    <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } </style>

修改后重新编译运行后，微信开发者工具模拟器的小程序页面如下：  
![uniapp style class][]

可以看到，App.vue中定义的样式对index页面产生了效果。

（2）style  
style接收**动态的样式**，在运行时会进行解析，应避免将静态的样式写进style中，以免影响渲染速度。  
例如：

## 4.选择器 ##

目前支持的选择器有：

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>举例</th> 
   <th>意义</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.class</td> 
   <td>.intro</td> 
   <td>选择所有拥有 class=“intro” 的组件</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>#id</td> 
   <td>#firstname</td> 
   <td>选择拥有 id=“firstname” 的组件</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>element</td> 
   <td>view</td> 
   <td>选择所有 view 组件</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>element, element</td> 
   <td>view, checkbox</td> 
   <td>选择所有文档的 view 组件和所有的 checkbox 组件</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>::after</td> 
   <td>view::after</td> 
   <td>在 view 组件后边插入内容</td> 
   <td>仅微信小程序和5+App生效</td> 
  </tr> 
  <tr> 
   <td>::before</td> 
   <td>view::before</td> 
   <td>在 view 组件前边插入内容</td> 
   <td>仅微信小程序和5+App生效</td> 
  </tr> 
 </tbody> 
</table>

## 5.全局样式与局部样式 ##

定义在 App.vue 中的样式为**全局样式**，作用于每一个页面，如前面在App.vue中定义的全局样式对index页面也有效；  
在 pages 目录下 的 vue 文件中定义的样式为**局部样式**，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器，如在index页面中自定义的样式。  
同时，App.vue中也可以通过`@import`语句导入外联样式，同样作用于每一个页面。

# 二、配置文件 #

uni-app中一般以json的形式定义配置文件，如pages.json、manifest.json等，其中pages.json更偏向小程序，manifest.json更偏向App。

## 1.页面配置pages.json ##

pages.json文件用来对uni-app进行**全局配置**，主要对接小程序，决定页面文件的路径、窗口表现、设置多标签等。

pages.json常见配置项列表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填与否</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>globalStyle</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>设置默认页面的窗口表现</td> 
  </tr> 
  <tr> 
   <td>pages Object</td> 
   <td>Array</td> 
   <td>是</td> 
   <td>设置页面路径及窗口表现</td> 
  </tr> 
  <tr> 
   <td>tabBar</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>设置底部 tab 的表现</td> 
  </tr> 
  <tr> 
   <td>condition</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>启动模式配置</td> 
  </tr> 
 </tbody> 
</table>

一个包含了上述所有配置选项的pages.json示例如下：

{ 
      "pages": [{ 
        "path": "pages/component/index",
        "style": { 
          "navigationBarTitleText": "组件"
        }
      }, { 
        "path": "pages/API/index",
        "style": { 
          "navigationBarTitleText": "接口"
        }
      }, { 
        "path": "pages/component/view/index",
        "style": { 
          "navigationBarTitleText": "view"
        }
      }],
      "globalStyle": { 
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "演示",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
      },
      "tabBar": { 
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{ 
          "pagePath": "pages/component/index",
          "iconPath": "static/image/icon_component.png",
          "selectedIconPath": "static/image/icon_component_HL.png",
          "text": "组件"
        }, { 
          "pagePath": "pages/API/index",
          "iconPath": "static/image/icon_API.png",
          "selectedIconPath": "static/image/icon_API_HL.png",
          "text": "接口"
        }]
      },
      "condition" : { 
    		"current": 0,
    		"list": [
    			{ 
    				"name": "", 
    				"path": "",
    				"query": ""
    			}
    		]
    	}
    }

下面进一步解释各配置项的含义。

### globalStyle ###

用于设置应用的状态栏、导航条、标题、窗口背景色等，对所有页面生效。  
具体参数和含义如下：

说明：  
`navigationStyle`只在`pages.json->globalStyle` 中设置生效，并且，该参数设置为`custom`后，所有窗口均无导航栏。

pages.json修改如下：

{ 
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{ 
    			"path": "pages/index/index",
    			"style": { 
    				"navigationBarTitleText": "uni-app"
    			}
    		}
    	],
    	"globalStyle": { 
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "hello uniapp",
    		"navigationBarBackgroundColor": "#ff557f",
    		"backgroundColor": "#fffae8"
    	},
    	"condition" : {  //模式配置，仅开发期间生效
    		"current": 0, //当前激活的模式(list 的索引项)
    		"list": [
    			{ 
    				"name": "", //模式名称
    				"path": "", //启动页面，必选
    				"query": "" //启动参数，在页面的onLoad函数里面得到
    			}
    		]
    	}
    }

显示：  
![uniapp config pages.json globalstyle][]

显然，导航栏的背景颜色已经生效。

### pages ###

接收一个**数组**，来指定应用由哪些页面组成。每一项代表对应页面的信息，应用中新增、减少或修改页面，都需要对pages数组进行同步修改。

说明：  
在指定路径时，文件名不需要写后缀，框架会自动寻找路径下的页面资源；  
pages节点的第一项为应用入口页（即首页），所以在开发多个页面时，可以把当前开发的页面放到第一项，便于在微信开发者工具中查看调试。

新建一个页面过程如下：  
在pages目录下面新建about目录，下新建about.vue如下：

<template>
    	<view class="content">
    		about...
    	</view>
    </template>
    
    <script> export default { data() { return { title: 'About' } }, onLoad() { }, methods: { } } </script>
    
    <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } </style>

将其注册到pages.json如下：

{ 
    	"pages": [ //pages数组中第一项表示应用启动页
    		{ 
    			"path": "pages/index/index",
    			"style": { 
    				"navigationBarTitleText": "Uni Index"
    			}
    		},
    		{ 
    			"path": "pages/about/about",
    			"style": { 
    				"navigationBarTitleText": "Uni About"
    			}
    		}
    	],
    	"globalStyle": { 
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "hello uniapp",
    		"navigationBarBackgroundColor": "#ff557f",
    		"backgroundColor": "#fffae8"
    	},
    	"condition" : {  //模式配置，仅开发期间生效
    		"current": 0, //当前激活的模式(list 的索引项)
    		"list": [
    			{ 
    				"name": "", //模式名称
    				"path": "", //启动页面，必选
    				"query": "" //启动参数，在页面的onLoad函数里面得到
    			}
    		]
    	}
    }

其中，pages数组中的每一个page还可以通过style参数定义当前页面的样式，来设置每个页面的状态栏、导航条、标题、窗口背景色等，具体参数如下：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor</td> 
   <td>#000000</td> 
   <td>导航栏背景颜色，如"#000000"</td> 
  </tr> 
  <tr> 
   <td>navigationBarTextStyle</td> 
   <td>String</td> 
   <td>white</td> 
   <td>导航栏标题颜色，仅支持 black/white</td> 
  </tr> 
  <tr> 
   <td>navigationBarTitleText</td> 
   <td>String</td> 
   <td>无</td> 
   <td>导航栏标题文字内容</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>#ffffff</td> 
   <td>窗口的背景色，对微信小程序、百度小程序、字节跳动小程序有效</td> 
  </tr> 
  <tr> 
   <td>backgroundTextStyle</td> 
   <td>String</td> 
   <td>dark</td> 
   <td>下拉 loading 的样式，仅支持 dark/light</td> 
  </tr> 
  <tr> 
   <td>enablePullDownRefresh</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否开启下拉刷新</td> 
  </tr> 
  <tr> 
   <td>onReachBottomDistance</td> 
   <td>Number</td> 
   <td>50</td> 
   <td>页面上拉触底事件触发时距页面底部距离，单位为px</td> 
  </tr> 
  <tr> 
   <td>navigationStyle</td> 
   <td>String</td> 
   <td>default</td> 
   <td>导航栏样式，仅支持 default/custom，custom 模式可自定义导航栏，只保留右上角胶囊状的按钮，对微信小程序 7.0+、百度小程序、H5、App（2.0.3+）有效</td> 
  </tr> 
  <tr> 
   <td>backgroundColorTop</td> 
   <td>String</td> 
   <td>#ffffff</td> 
   <td>顶部窗口的背景色，仅iOS平台有效</td> 
  </tr> 
  <tr> 
   <td>backgroundColorBottom</td> 
   <td>String</td> 
   <td>#ffffff</td> 
   <td>底部窗口的背景色，仅iOS平台有效</td> 
  </tr> 
 </tbody> 
</table>

pages.json中给page定义style如下：

显示：  
![uniapp config pages.json pages style][]

### tabBar ###

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

常见参数和含义如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填与否</th> 
   <th>默认值</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td>无</td> 
   <td>tab上的文字默认颜色</td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td>无 tab上的文字选中时的颜色</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td>无</td> 
   <td>tab的背景色</td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>String</td> 
   <td>否</td> 
   <td>black</td> 
   <td>tabbar 上边框的颜色，仅支持 black/white</td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>是</td> 
   <td>无</td> 
   <td>tab 的列表，最少2个、最多5个 tab</td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>String</td> 
   <td>否</td> 
   <td>bottom</td> 
   <td>可选值 bottom、top</td> 
  </tr> 
 </tbody> 
</table>

说明：  
当设置 position 为 top 时，将不会显示 icon；  
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序，数组中的每个项都是一个对象，其属性值如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填与否</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pagePath</td> 
   <td>String</td> 
   <td>是</td> 
   <td>页面路径，必须在 pages 中先定义</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>String</td> 
   <td>是</td> 
   <td>tab</td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>String</td> 
   <td>否</td> 
   <td>图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片</td> 
  </tr> 
  <tr> 
   <td>selectedIconPath</td> 
   <td>String</td> 
   <td>否</td> 
   <td>选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效</td> 
  </tr> 
 </tbody> 
</table>

在static目录下新建imgs目录专门用于保存图片资源，下面放4张图片，再在pages.json中定义tabBar如下：

{ 
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{ 
    			"path": "pages/index/index",
    			"style": { 
    				"navigationBarTitleText": "Uni Index",
    				"backgroundColor": "#F0AD4E",
    				"navigationBarTextStyle":"black"
    			}
    		},
    		{ 
    			"path": "pages/about/about",
    			"style": { 
    				"navigationBarTitleText": "Uni About"
    			}
    		}
    	],
    	"globalStyle": { 
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "hello uniapp",
    		"navigationBarBackgroundColor": "#ff557f",
    		"backgroundColor": "#fffae8"
    	},
    	"tabBar": { 
    		"color":"#F0AD4E",
    		"selectedColor":"#007AFF",
    		"backgroundColor":"#FFFFFF",
    		"list": [
    			{ 
    				"pagePath":"pages/index/index",
    				"iconPath":"static/imgs/index_0.png",
    				"selectedIconPath":"static/imgs/index_1.png",
    				"text": "首页"
    			},
    			{ 
    				"pagePath":"pages/about/about",
    				"iconPath":"static/imgs/about_0.png",
    				"selectedIconPath":"static/imgs/about_1.png",
    				"text":"关于我们"
    			}
    		]
    	},
    	"condition" : {  //模式配置，仅开发期间生效
    		"current": 0, //当前激活的模式(list 的索引项)
    		"list": [
    			{ 
    				"name": "", //模式名称
    				"path": "", //启动页面，必选
    				"query": "" //启动参数，在页面的onLoad函数里面得到
    			}
    		]
    	}
    }

此时显示：  
![uniapp config pages.json pages tabbar][]

可以看到，此时已经可以显示不同的标签页，并且可以进行切换。

> 如需图标等静态资源，可以直接点击加QQ群 [![Python极客部落][Python]963624318][Python_Python_963624318] ，在群文件夹**uni-app入门教程**中下载即可。

### condition ###

**启动模式**配置，仅开发期间生效，用于模拟直达页面的场景。  
例如小程序转发后，用户点击所打开的页面。

属性和含义如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>current</td> 
   <td>Number</td> 
   <td>是</td> 
   <td>当前激活的模式，list节点的索引值</td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>是</td> 
   <td>启动模式列表</td> 
  </tr> 
 </tbody> 
</table>

其中，list属性如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>String</td> 
   <td>是</td> 
   <td>启动模式名称</td> 
  </tr> 
  <tr> 
   <td>path</td> 
   <td>String</td> 
   <td>是</td> 
   <td>启动页面路径</td> 
  </tr> 
  <tr> 
   <td>query</td> 
   <td>String</td> 
   <td>否</td> 
   <td>启动参数，可在页面的 onLoad 函数里获得</td> 
  </tr> 
 </tbody> 
</table>

说明：  
在App里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式。

例如，pages.json如下：

{ 
    	"pages": [ //pages数组中第一项表示应用启动页
    		{ 
    			"path": "pages/index/index",
    			"style": { 
    				"navigationBarTitleText": "Uni Index",
    				"backgroundColor": "#F0AD4E",
    				"navigationBarTextStyle":"black"
    			}
    		},
    		{ 
    			"path": "pages/about/about",
    			"style": { 
    				"navigationBarTitleText": "Uni About"
    			}
    		}
    	],
    	"globalStyle": { 
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "hello uniapp",
    		"navigationBarBackgroundColor": "#ff557f",
    		"backgroundColor": "#fffae8"
    	},
    	"tabBar": { 
    		"color":"#F0AD4E",
    		"selectedColor":"#007AFF",
    		"backgroundColor":"#FFFFFF",
    		"list": [
    			{ 
    				"pagePath":"pages/index/index",
    				"iconPath":"static/imgs/index_0.png",
    				"selectedIconPath":"static/imgs/index_1.png",
    				"text": "首页"
    			},
    			{ 
    				"pagePath":"pages/about/about",
    				"iconPath":"static/imgs/about_0.png",
    				"selectedIconPath":"static/imgs/about_1.png",
    				"text":"关于我们"
    			}
    		]
    	},
    	"condition": {  //模式配置，仅开发期间生效
    	    "current": 0, //当前激活的模式（list 的索引项）
    	    "list": [{ 
    	            "name": "index", //模式名称
    	            "path": "pages/index/index", //启动页面，必选
    	            "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
    	        },
    	        { 
    	            "name": "about", //模式名称
    	            "path": "pages/about/about", //启动页面，必选
    	            "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
    	        }
    	    ]
    	}
    }

显示：  
![uniapp config pages.json condition][]

显然，此时可以在微信开发者工具根据定义的启动模式名称来选择页面，同时传递参数值。

## 2.显示配置manifest.json ##

manifest.json文件是应用的配置文件，用于指定应用的名称、图标、权限等，更偏向于Android、iOS等App配置。

常见配置项列表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>String</td> 
   <td>应用名称</td> 
  </tr> 
  <tr> 
   <td>appid</td> 
   <td>String</td> 
   <td>应用标识，新建uni-app项目时DCloud云端分配</td> 
  </tr> 
  <tr> 
   <td>description</td> 
   <td>String</td> 
   <td>应用描述</td> 
  </tr> 
  <tr> 
   <td>versionName</td> 
   <td>String</td> 
   <td>版本名称，例如1.0.0</td> 
  </tr> 
  <tr> 
   <td>versionCode</td> 
   <td>String</td> 
   <td>版本号，例如36</td> 
  </tr> 
  <tr> 
   <td>app-plus</td> 
   <td>Object</td> 
   <td>App特有配置</td> 
  </tr> 
  <tr> 
   <td>quickapp</td> 
   <td>Object</td> 
   <td>快应用特有配置，即将支持</td> 
  </tr> 
  <tr> 
   <td>mp-weixin</td> 
   <td>Object</td> 
   <td>微信小程序特有配置</td> 
  </tr> 
  <tr> 
   <td>mp-baidu</td> 
   <td>Object</td> 
   <td>百度小程序特有配置</td> 
  </tr> 
  <tr> 
   <td>mp-alipay</td> 
   <td>Object</td> 
   <td>支付宝小程序未提供可配置项</td> 
  </tr> 
 </tbody> 
</table>

其中，app-plus常见属性和含义如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>modules</td> 
   <td>Object</td> 
   <td>权限模块</td> 
  </tr> 
  <tr> 
   <td>distribute</td> 
   <td>Object</td> 
   <td>App发布信息</td> 
  </tr> 
 </tbody> 
</table>

其中，modules属性常见的可配置的权限模块如下：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Contacts</td> 
   <td>系统通讯录</td> 
  </tr> 
  <tr> 
   <td>Fingerprint</td> 
   <td>指纹识别</td> 
  </tr> 
  <tr> 
   <td>Maps</td> 
   <td>地图</td> 
  </tr> 
  <tr> 
   <td>Messaging</td> 
   <td>短彩邮件消息</td> 
  </tr> 
  <tr> 
   <td>OAuth</td> 
   <td>登录授权</td> 
  </tr> 
  <tr> 
   <td>Payment</td> 
   <td>支付</td> 
  </tr> 
  <tr> 
   <td>Push</td> 
   <td>消息推送</td> 
  </tr> 
  <tr> 
   <td>Share</td> 
   <td>社交分享</td> 
  </tr> 
  <tr> 
   <td>Speech</td> 
   <td>语音识别</td> 
  </tr> 
  <tr> 
   <td>Statistic</td> 
   <td>统计</td> 
  </tr> 
  <tr> 
   <td>VideoPlayer</td> 
   <td>视频播放</td> 
  </tr> 
  <tr> 
   <td>LivePusher</td> 
   <td>直播推流</td> 
  </tr> 
 </tbody> 
</table>

distribute属性常见的配置如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android</td> 
   <td>Object</td> 
   <td>Android应用配置</td> 
  </tr> 
  <tr> 
   <td>ios</td> 
   <td>Object</td> 
   <td>iOS应用配置</td> 
  </tr> 
  <tr> 
   <td>sdkConfigs</td> 
   <td>Object</td> 
   <td>SDK配置</td> 
  </tr> 
 </tbody> 
</table>

说明：  
manifest.json文件的配置，推荐在 HBuilderX 提供的**可视化操作界面**完成；  
部分配置在打包时的操作界面补全，例如证书等信息；  
Native.js权限部分会根据配置的模块权限，在打包后自动填充；  
部分modules是默认的，不需要进行配置。

mp-weixin常见配置项和含义如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>appid</td> 
   <td>String</td> 
   <td>微信小程序的AppID，需要登录https://mp.weixin.qq.com/申请</td> 
  </tr> 
  <tr> 
   <td>usingComponents</td> 
   <td>Boolean</td> 
   <td>是否启用自定义组件模式，v1.8.0+，默认为false</td> 
  </tr> 
  <tr> 
   <td>setting</td> 
   <td>Object</td> 
   <td>微信小程序项目设置</td> 
  </tr> 
  <tr> 
   <td>functionalPages</td> 
   <td>Boolean</td> 
   <td>微信小程序是否启用插件功能页，默认关闭</td> 
  </tr> 
 </tbody> 
</table>

在BuilderX编辑器中查看manifest.json文件如下：  
![uniapp config manifest][]

可以看到，除了通过源码视图定义manifest.json配置项，还可以使用可视化界面操作。

# 三、生命周期 #

不论是app还是小程序，生命周期是非常重要的特性，即对象从被**创建**到最后被**销毁**的整个过程。  
uni-app支持如下页面生命周期函数：

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLoad</td> 
   <td>监听页面加载，其参数为上个页面传递的数据，参数类型为object（用于页面传参）</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>监听页面显示</td> 
  </tr> 
  <tr> 
   <td>onReady</td> 
   <td>监听页面初次渲染完成</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>监听页面隐藏</td> 
  </tr> 
  <tr> 
   <td>onUnload</td> 
   <td>监听页面卸载</td> 
  </tr> 
  <tr> 
   <td>onPullDownRefresh</td> 
   <td>监听用户下拉动作</td> 
  </tr> 
  <tr> 
   <td>onReachBottom</td> 
   <td>页面上拉触底事件的处理函数</td> 
  </tr> 
  <tr> 
   <td>onShareAppMessage</td> 
   <td>用户点击右上角分享 微信小程序</td> 
  </tr> 
  <tr> 
   <td>onPageScroll</td> 
   <td>监听页面滚动</td> 
  </tr> 
  <tr> 
   <td>onTabItemTap</td> 
   <td>当前是 tab 页时，点击 tab 时触发</td> 
  </tr> 
 </tbody> 
</table>

index.vue如下：

<template>
    	<view class="content">
    		<image class="logo" src="/static/logo.png"></image>
    		<view class="text-area">
    			<text class="title">{
       {title}}</text>
    		</view>
    		<view class="red">
    			hello, corley
    		</view>
    	</view>
    </template>
    
    <script> export default { data() { return { title: 'Hello' } }, onLoad() { console.log('index onload') }, onShow() { console.log('index onshow') }, onHide() { console.log('index onhide') }, methods: { } } </script>
    
    <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } </style>

about.vue如下;

<template>
    	<view class="content">
    		about...
    	</view>
    </template>
    
    <script> export default { data() { return { title: 'About' } }, onLoad() { console.log('about onload') }, onShow() { console.log('about onshow') }, methods: { } } </script>
    
    <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } </style>

运行测试如下：  
![uniapp lifecycle][]  
显然，在切换不同页面时，会调用相应的生命周期函数打印出不同的日志信息。

# 总结 #

uni-app对于样式有着自己的规定，比如尺寸单位，但是与HTML5也存在着很多共同点，体现在样式导入、选择器、全局样式与局部样式等方面。同时对于小程序和App有特定的配置文件进行配置。生命周期可用于定义页面在不同阶段、不同情境下的操作。

[uniapp style class]: /images/20221120/f64da2928eb442d3999de942f652fce3.png
[uniapp config pages.json globalstyle]: /images/20221120/1f5070e7acde49f386bfefd1b1d672fc.png
[uniapp config pages.json pages style]: https://img-blog.csdnimg.cn/20201214135846879.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NVRkVFQ1I=,size_16,color_FFFFFF,t_70#pic_center
[uniapp config pages.json pages tabbar]: https://img-blog.csdnimg.cn/20201214135926752.gif#pic_center
[Python]: https://pub.idqqimg.com/wpa/images/group.png
[Python_Python_963624318]: https://qm.qq.com/cgi-bin/qm/qr?k=rgE7cwG7OGHgfEucpRIQoSlYCTOEkmEr&jump_from=webapi
[uniapp config pages.json condition]: https://img-blog.csdnimg.cn/20201214140008735.gif#pic_center
[uniapp config manifest]: https://img-blog.csdnimg.cn/20201214140026905.gif#pic_center
[uniapp lifecycle]: https://img-blog.csdnimg.cn/20201214140220775.gif#pic_center