P11_组件-button和image组件的基本用法

1. 其它常用组件
   1. button
      • 按钮组件
      • 功能比 HTML 中的 button 按钮丰富
      • 通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
   2. image
      • 图片组件
      • image 组件默认宽度约 300px、高度约 240px
   3. navigator（后面课程会专门讲解）
      • 页面导航组件
      • 类似于 HTML 中的 a 链接
2. button 按钮的基本使用
   
   

text.wxml

<!--pages/text/text.wxml-->
<view>~~~~通过 type 指定按钮类型~~~~~</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">告警按钮</button>

<view>size="mini" 小尺寸按钮~</view>

<button size="mini">默认按钮</button>

<button type="primary" 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="warn" size="mini" plain>告警按钮</button>

1. image 组件的基本使用
   
   
2. image 组件的 mode 属性
   
   image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：
   
   

image.wxml

<!--pages/image/image.wxml-->
<image></image>
<image src="/images/1-tuya.png" mode="aspectFit"></image>

image.wxss

/* pages/image/image.wxss */
image {

border: 1px solid red;



}