一. image组件（图片标签）

1.默认大小为320*240

2.通过mode属性控制渲染效果（mode裁剪模式，决定图片内容如何显示）

例子：

<image class="img src="https://img1.baidu.com/it/u=3748473973,2816108097&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313"
  alt="" mode="aspectFill" />

二.swiper（轮播图）标签

1.默认宽度和高度为 100% * 150px

2.常用属性：

例子：

  <!-- 轮播图  interval="1000"自动轮播切换的时间（毫秒） -->
    <swiper indicator-dots="true" circular indicator-color="red" interval="1000" autoplay>
        <swiper-item class="">
            <image class="img"
                src="https://img1.baidu.com/it/u=2181176195,3732882403&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499"
                alt="" mode="aspectFill" />
        </swiper-item>
        <swiper-item class="">
            <image class="img"
                src="https://img1.baidu.com/it/u=3046307547,2686385170&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
                alt="" mode="aspectFill" />
        </swiper-item>
        <swiper-item class="">
            <image class="img"
                src="https://img1.baidu.com/it/u=3748473973,2816108097&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313"
                alt="" mode="aspectFill" />
        </swiper-item>
        <swiper-item class="">
            <image class="img"
                src="https://img0.baidu.com/it/u=2608513993,3768284145&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=400"
                alt="" mode="aspectFit|aspectFill|widthFix" />
        </swiper-item>
    </swiper>

注意：当image（图片）和swiper（轮播图）结合使用时，由于两者的默认高度不同，需要进行微调，如设置图片大小为width：100%

三.navigator（链接）标签 类似于a标签

1.块级元素

2.通过url来指定跳转的页面（不同的页面类型，需要设置对应的open-type属性，跟pages路径不同，这里的路径最前面要加“/”）

3.跳转到其他小程序（两步走）

例子：

 <!-- 路径跳转 -->
    <!-- 这里的url路径跟pages的路径不同，前面要加/ -->
    <navigator url="/pages/index/index" open-type="redirect">
        跳转到index4
    </navigator>
    <!-- 跳转其他小程序 -->
    <navigator target="miniProgram" app-id="wxf9e01cdca4779ccb">
        跳转其他小程序
    </navigator>

四.button（按钮）标签

设置open-type属性

例子：

 <!-- 按钮组件 -->
    <button open-type="contact">客服</button>
    <button open-type="share">触发转发功能</button>
    <button open-type="feedback">反馈</button>
    <button open-type="getPhoneNumber">获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息</button>

五.rich-text（富文本标签）跟v-html一样可以解析标签

设置nodes属性

例子：

 <!-- rich-text 富文本组件，相当于vue中的v-html解析标签  user-select让文字长按变得可选（可以复制） -->
    <view>
        <rich-text nodes="{{concent}}" user-select></rich-text>
    </view>

六.radio（单选框） 最外层用radio-group包裹着

例子：

    <!-- 单选按钮radio -->
    <radio-group bindchange="radioFn">
        <view wx:for="{{list}}" wx:key="value">
            <radio value="{{item.value}}" color="green">{{item.name}}</radio>
        </view>
    </radio-group>

七.checkbox（复选框） 最外层用checkbox-group包裹着

例子：

 <!-- 多选框 -->
    <checkbox-group bindchange="checkboxFn">
        <label wx:for="{{list}}" wx:key="value">
            <checkbox value="{{item.value}}" disabled="{{item.isOk}}"></checkbox>
            {{item.name}}
        </label>
    </checkbox-group>