微信小程序4——button和image组件的用法

1.button组件为按钮组件

    <view>~~~~~~通过type指定按钮类型~~~~~</view>
<button>正常按钮</button>
<button type="primary">主色调按钮</button>
<button type="default">默认按钮</button>
<button type="warn">警告按钮</button>
    <view>~~~~~~通过size控制按钮的大小~~~~~~</view>
<button size="mini">正常按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="default" size="mini">默认按钮</button>
<button type="warn" size="mini">警告按钮</button>
    <view>~~~~~~通过plain镂空按钮</view>
<button size="mini" plain>正常按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="default" size="mini" plain>默认按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

成果展示：

2.imag组件的用法及其mode属性：
scaleToFill ：(默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit： 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill： 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix： 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。
heightFix： 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。

图片显示：
<image src="/images/3.png" mode="widthFix"></image>

成果如下：