介绍微信小程序开发中常用布局组件（三）

1、文本组件text：微信小程序中是不允许选中文字的，text标记是唯一可以选中文本的标记。但是要实现这个功能的话，需要给text标记加一个属性selectable=‘true’，并且在选中的时候我们要模拟在手机上长按，而不是直接框选。

<text selectable='true'>这是我的第一个页面测试页面</text>

2、微信小程序实现换行是在文字前面加一个\n

<text selectable='true'>这是我的第一个页面测试页面</text>
<text>\n这是第二行</text>

3、图片标签：时刻记得设置宽高
（1）图片标签必须有闭合标签，双标签单标签都可以。
（2）微信小程序会默认的给图片宽高，我们必须自定义宽高。
（3）width:100;height:auto;这种写法是不对的，千万不能用auto会报错，会直接识别成0。正确的方式如下：使用mode属性实现了高度自适应。

<image style='width:100%;' mode='widthFix' src='../../upload/banner1.png' />

第二种写法：
<image style='width:100%;' mode='widthFix' src='/upload/banner1.png' />
这种写法去掉了繁琐的../..，但是我们必须要保留最后一个斜杠，它的意思是从根目录出发。

4、navigator标签负责页面的跳转。
（1）navigator标签跳转页面用的是url属性
（2）navigator标签默认是不能跳转到选项卡页面的
（3）属性open-type默认值是navigate，只能实现页面之间的跳转， open-type='switchTab’可以实现跳转到选项卡页面

<navigator url='/pages/demo/demo' open-type='navigate'>导航-跳转到的demo页面（页面之间的跳转）</navigator>
<navigator url='/pages/index/index' open-type='switchTab'>导航-跳转到的组件页面页面（跳转到选项卡页面）</navigator>

5、view组件：
（1）view组件是一个块容器布局标签。
（2）view组件类似于div，微信小程序中不存在ul li dl dt 等等，所以很多布局我们都要借助view组件。

 <view class='index-nav-item'>
    <image src='/upload/icon_index_nav_2@2x.png'></image>
  </view>

6、单位rpx
（1）px单位存在的缺陷：效率低、会有出现适配机型的问题。
（2）rpx是微信小程序专属的单位，不能在网页端使用，他可以很好的解决适配机型的问题。

注意点（text-align: center）：
1、行内元素才有text-align: center
2、给父级元素设置text-align: center，行内元素会居中显示

7、图片image标签下面的缝隙问题解决：
通pc端一样，image标签默认有一个vertical-align: baseline；基线对齐；
我们只要改成：vertical-align: middle/top就可以解决。