Uni-app的学习Ⅱ（全局配置和页面配置、配置tabbar、condition、组件、样式、数据绑定、mustache）

╰+攻爆jí腚メ 2022-12-10 10:21 161阅读 0赞

# 一、全局配置和页面配置 #

### 通过globalStyle进行全局配置 ###

用于设置应用的状态栏、导航条、标题、窗口背景色等。[详细文档][Link 1]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor</td> 
   <td>#F7F7F7</td> 
   <td>导航栏背景颜色（同状态栏背景色）</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>是否开启下拉刷新，详见<a href="https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f" rel="nofollow">页面生命周期</a>。</td> 
  </tr> 
  <tr> 
   <td>onReachBottomDistance</td> 
   <td>Number</td> 
   <td>50</td> 
   <td>页面上拉触底事件触发时距页面底部距离，单位只支持px，详见<a href="https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f" rel="nofollow">页面生命周期</a></td> 
  </tr> 
 </tbody> 
</table>

### 页面配置 ###

##### 创建新的message页面 #####

右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板

<template>
    	<view>
    		messages
    	</view>
    </template>
    
    <script> </script>
    
    <style> </style>

##### 通过pages来配置页面 #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>path</td> 
   <td>String</td> 
   <td></td> 
   <td>配置页面路径</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td>Object</td> 
   <td></td> 
   <td>配置页面窗口表现，配置项参考 <a href="https://uniapp.dcloud.io/collocation/pages?id=style" rel="nofollow">pageStyle</a></td> 
  </tr> 
 </tbody> 
</table>

pages数组数组中第一项表示应用启动页

"pages": [ 、
    		{
    			"path":"pages/message/message"					// 页面的指向
    		},
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "uni-app"			// 导航条的内容
    			}
    		}
    	]

通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{ 
    			"path":"pages/message/message",
    			"style": { 
    				"navigationBarBackgroundColor": "#007AFF",				// 导航条背景颜色
    				"navigationBarTextStyle": "white",						// 导航条的字体颜色
    				"enablePullDownRefresh": true,							// 是否可以下拉刷新
    				"disableScroll": true,				// 是否可以滚动
    				"h5": { 								// 在html5下的配置
    					"pullToRefresh": { 				// 下拉刷新的颜色
    						"color": "#007AFF"			
    					}
    				}
    			}
    		}
    	]

# 二、配置tabbar #

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

**Tips**

*  当设置 position 为 top 时，将不会显示 icon
 *  tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

**属性说明：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <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> 
   <td></td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td></td> 
   <td>tab 上的文字选中时的颜色</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td></td> 
   <td>tab 的背景色</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>String</td> 
   <td>否</td> 
   <td>black</td> 
   <td>tabbar 上边框的颜色，仅支持 black/white</td> 
   <td>App 2.3.4+ 支持其他颜色值</td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>是</td> 
   <td></td> 
   <td>tab 的列表，详见 list 属性说明，最少2个、最多5个 tab</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>String</td> 
   <td>否</td> 
   <td>bottom</td> 
   <td>可选值 bottom、top</td> 
   <td>top 值仅微信小程序支持</td> 
  </tr> 
 </tbody> 
</table>

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

<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 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标</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>

案例代码：

"tabBar": { 
    		"list": [
    			{ 								// 第一个
    				"text": "首页",
    				"pagePath":"pages/index/index",				// 页面路径
    				"iconPath":"static/tabs/home.png",			// 未选中时图标
    				"selectedIconPath":"static/tabs/home-active.png"	// 选中时图标
    			},
    			{ 								// 第二个
    				"text": "信息",
    				"pagePath":"pages/message/message",
    				"iconPath":"static/tabs/message.png",
    				"selectedIconPath":"static/tabs/message-active.png"
    			},
    			{ 								// 第三个
    				"text": "我们",
    				"pagePath":"pages/contact/contact",
    				"iconPath":"static/tabs/contact.png",
    				"selectedIconPath":"static/tabs/contact-active.png"
    			}
    		]
    	}

# 三、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>启动参数，可在页面的 <a href="https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f" rel="nofollow">onLoad</a> 函数里获得</td> 
  </tr> 
 </tbody> 
</table>

# 四、组件的基本使用 #

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用

uni-app中的组件，就像 `HTML` 中的 `div` 、`p`、`span` 等标签的作用一样，用于搭建页面的基础结构

### text文本组件的用法 ###

##### [官网传送门][Link 2] #####

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">类型</th> 
   <th align="center">默认值</th> 
   <th align="center">必填</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">selectable</td> 
   <td align="center">boolean</td> 
   <td align="center">false</td> 
   <td align="center">否</td> 
   <td align="center">文本是否可选</td> 
  </tr> 
  <tr> 
   <td align="center">space</td> 
   <td align="center">string</td> 
   <td align="center">.</td> 
   <td align="center">否</td> 
   <td align="center">显示连续空格，可选参数：<code>ensp</code>、<code>emsp</code>、<code>nbsp</code></td> 
  </tr> 
  <tr> 
   <td align="center">decode</td> 
   <td align="center">boolean</td> 
   <td align="center">true</td> 
   <td align="center">否</td> 
   <td align="center">是否解码</td> 
  </tr> 
 </tbody> 
</table>

space 值说明：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ensp</td> 
   <td>中文字符空格一半大小</td> 
  </tr> 
  <tr> 
   <td>emsp</td> 
   <td>中文字符空格大小</td> 
  </tr> 
  <tr> 
   <td>nbsp</td> 
   <td>根据字体设置的空格大小</td> 
  </tr> 
 </tbody> 
</table>

*  `text` 组件相当于**行内标签**、在**同一行显示**
 *  除了**文本节点以外的其他节点都无法长按选中**

### view视图容器组件的用法 ###

*  View 视图容器， 类似于 HTML 中的 div

##### [官网传送门][Link 3] #####

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hover-class</td> 
   <td>String</td> 
   <td>none</td> 
   <td>指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果</td> 
  </tr> 
  <tr> 
   <td>hover-stop-propagation</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>指定是否阻止本节点的祖先节点出现点击态(类似于冒泡)</td> 
  </tr> 
  <tr> 
   <td>hover-start-time</td> 
   <td>Number</td> 
   <td>50</td> 
   <td>按住后多久出现点击态，单位毫秒</td> 
  </tr> 
  <tr> 
   <td>hover-stay-time</td> 
   <td>Number</td> 
   <td>400</td> 
   <td>手指松开后点击态保留时间，单位毫秒</td> 
  </tr> 
 </tbody> 
</table>

### button按钮组件的用法 ###

##### [官网传送门][Link 4] #####

<table> 
 <thead> 
  <tr> 
   <th align="center">属性名</th> 
   <th align="center">类型</th> 
   <th align="center">默认值</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">size</td> 
   <td align="center">String</td> 
   <td align="center">default</td> 
   <td align="center">按钮的大小</td> 
  </tr> 
  <tr> 
   <td align="center">type</td> 
   <td align="center">String</td> 
   <td align="center">default</td> 
   <td align="center">按钮的样式类型</td> 
  </tr> 
  <tr> 
   <td align="center">plain</td> 
   <td align="center">Boolean</td> 
   <td align="center">false</td> 
   <td align="center">按钮是否镂空，背景色透明</td> 
  </tr> 
  <tr> 
   <td align="center">disabled</td> 
   <td align="center">Boolean</td> 
   <td align="center">false</td> 
   <td align="center">是否按钮</td> 
  </tr> 
  <tr> 
   <td align="center">loading</td> 
   <td align="center">Boolean</td> 
   <td align="center">false</td> 
   <td align="center">名称是否带 loading t图标</td> 
  </tr> 
 </tbody> 
</table>

*  `button` 组件默认独占一行，设置 `size` 为 `mini` 时可以在一行显示多个

### image组件的使用 ###

##### [官网传输门][Link 5] #####

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>String</td> 
   <td></td> 
   <td>图片资源地址</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>mode</td> 
   <td>String</td> 
   <td>‘scaleToFill’</td> 
   <td>图片裁剪、缩放的模式</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>lazy-load</td> 
   <td>String</td> 
   <td>false</td> 
   <td>图片懒加载。只针对page与scroll-view下的image有效 微信小程序、App、百度小程序、字节跳动小程序</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>fade-show</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>图片显示动画效果</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>@error</td> 
   <td>HandleEvent</td> 
   <td></td> 
   <td>当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>@load</td> 
   <td>HandleEvent</td> 
   <td></td> 
   <td>当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**Tips**

*  `<image>` 组件默认宽度 300px、高度 225px；
 *  `src` 仅支持相对路径、绝对路径，支持 base64 码；
 *  页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 `image{will-change: transform}` ,可优化此问题。

# 五、uni-app中的样式 #

*  rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
 *  使用`@import`语句可以导入外联样式表，`@import`后跟需要导入的外联样式表的相对路径，用`;`表示语句结束
 *  支持基本常用的选择器class、id、element、伪类选择器、伪元素选择器、属性选择器都可以
 *  在 `uni-app` 中不能使用 `*` 选择器。
 *  `page` 相当于 `body` 节点
 *  定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
 *  `uni-app` 支持使用字体图标，使用方式与普通 `web` 项目相同，需要注意以下几点：
    
     *  字体文件小于 40kb，`uni-app` 会自动将其转化为 base64 格式；
     *  字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
     *  字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
        
            @font-face {
                 font-family: test1-icon;
                 src: url('~@/static/iconfont.ttf');
             }
 *  如何使用scss或者less(安装插件即可)

# 六、数据绑定 #

在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可

export default { 
      data () { 
        return { 
          msg: 'hello-uni'
        }
      }
    }

# 七、v-bind动态属性绑定 #

在data中定义了一张图片，我们希望把这张图片渲染到页面上

<template>
    	<image :src="img"></image> // 可以使用v-bind
    </template>
    
    <script>
    	export default { 
    	  data () { 
    	    return { 
    	      img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
    	    }
    	  }
    	}
    </script>
    
    <style>
    </style>

# 八、插值表达式 #

*  利用插值表达式渲染基本数据
    
        <view>{
             {msg}}</view>
 *  在插值表达式中使用三元运算
    
        <view>{
             { flag ? '我是真的':'我是假的' }}</view>
 *  基本运算
    
        <view>{
             {1+1}}</view>				// 结果为2

# 九、v-for #

data中定以一个数组，最终将数组渲染到页面上

<view v-for="(item,i) in arr" :key="i">名字：{ { item.name}}---年龄：{ { item.age}}</view>		// 这里建议使用key来提高效率

[Link 1]: https://uniapp.dcloud.io/collocation/pages?id=globalstyle
[Link 2]: https://uniapp.dcloud.io/component/text
[Link 3]: https://uniapp.dcloud.io/component/view
[Link 4]: https://uniapp.dcloud.io/component/button
[Link 5]: https://uniapp.dcloud.io/component/image?id=image