1.微信小程序开发常用组件

<!-- 1.scroll-view可滑动视图  -->
<scroll-view class="container">
  <!-- 2.view类似div -->
  <view>
    <!-- 3.text -->
    <!-- selectable文本可选择 -->
    <text selectable>个人联系电话：1952145145</text>
    <!-- 4.rich-text 可以将HTML字符串渲染成对应的UI结构 -->
    <rich-text nodes="<h1 style='color:pink'> fds</h1>"></rich-text>
  </view>



  <!-- 轮播图 -->
  <!-- 1.indicator-dots="true" 面板指示点 -->
  <!-- 2.indicator-active-color="red" 当前轮播指示点的颜色 -->
  <!-- 3.indicator-color="green" 默认指示点的颜色 -->
  <!-- 4.autoplay="true" 是否自动切换轮播 -->
  <!-- 5.interval="1000"自动切换轮播时间间隔（毫秒值） -->
  <!-- 6.circular循环轮播 -->
  <swiper indicator-dots="true" indicator-active-color="red" indicator-color="green" autoplay="true" interval="1000" circular class="swiper-container">
    <swiper-item>
      A
    </swiper-item>
    <swiper-item>
      B
    </swiper-item>
    <swiper-item>
      C
    </swiper-item>
  </swiper>


  <!-- button -->
  <!-- 1.通过type属性指定按钮颜色 -->
  <button>默认按钮</button>
  <button type="warn">warn</button>
  <button type="primary">primary</button>
  <!-- 2.通过size属性改变按钮大小 -->
  <button size="mini">mini</button>
  <!-- 3.plain属性镂空按钮，无背景，带边框的 -->
  <button type="primary" plain> plain</button>


  <!-- image图片组件 -->
  <!-- modo属性：
  1.scaleToFill 铺满image组件
  2.aspectFit 保持图片的纵横比，使较长的一边完全显示
  3.aspectFill 保持图片的纵横比，使较短的一边完全显示，不保证图片完全显示
  4.widthFix 宽度不变，高度自动变化,原图宽高比不变
  5.heightFix 高度不变，宽度自动变化,原图宽高比不变 
  -->

  <image src="https://tse2-mm.cn.bing.net/th/id/OIP-C.rAKv35JOmZTh0ilq7xnQbQHaE8?rs=1&pid=ImgDetMain" mode="heightFix" />
</scroll-view>