微信小程序常用的view、text、button、image组件

【黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)】 https://www.bilibili.com/video/BV1834y1676P/?p=9&share_source=copy_web&vd_source=03c1dc52eeb3747825ecad0412c18ab1

这个系列是用来放代码的，方便

view

• 普通视图区域
• 类似于 HTML 中的 div，是一个块级元素
• 常用来实现页面的布局效果

这个是盒子里装四个小块ABCD的效果

<!-- wxml -->
<view class="container1 contain">
  <view>A</view>
  <view>B</view>
  <view>C</view>
  <view>D</view>
</view>

/* wxss */
.contain{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.contain view{
  height: 100px;
  width: 100px;
  text-align: center;
  line-height: 100px;
  margin: 10px;
}
.contain view:nth-child(1){
  background-color: burlywood;
}
.contain view:nth-child(2){
  background-color: rgb(135, 158, 222);
}
.contain view:nth-child(3){
  background-color: rgb(135, 222, 135);
}
.contain view:nth-child(4){
  background-color: rgb(219, 57, 57);
}

scroll-view

• 可滚动的视图区域
• 常用来实现滚动列表效果

注意：

scroll-y 竖向滚动，使用竖向滚动时需要给scroll-view 固定高度

scroll-x 横向滚动

这是一个竖向滚动的效果

<!-- wxml -->
<scroll-view class="container2 contain" scroll-y="true" >
  <view>A</view>
  <view>B</view>
  <view>C</view>
  <view>D</view>
</scroll-view>

/*前面应该有view那部分的wxss代码*/
.container2{
  height: 120px;
  border: 1px solid black;
  width: 120px;
}

swiper 和 swiper-item

• 轮播图容器组件 和 轮播图 item 组件

这是个轮播图效果

<!-- wxml -->
<!-- 轮播图 -->
<!-- 有几个swiper_item就有几个内容组成 -->
<swiper class="swiper-container"
indicator-dots="true"
indicator-color="white"
autoplay="true"
indicator-active-color="gray"
circular="true"
>
  <!-- 第一项 -->
  <swiper-item>
    <view class="item">
      A
    </view>
  </swiper-item>
   <!-- 第二项 -->
  <swiper-item>
    <view class="item">
      B
    </view>
  </swiper-item>
   <!-- 第三项 -->
  <swiper-item>
    <view class="item">
      C
    </view>
  </swiper-item>
</swiper>

/*wxss*/
.swiper-container{
  /*轮播图容器的高度 */
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: lightblue;
}
swiper-item:nth-child(2) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(3) .item{
  background-color: lightyellow;
}

一些常用的属性

• indicator-dots 是否显示面板指示点
• indicator-color 指示点颜色
• indicator-active-color 当前选中的指示点颜色
• autoplay 是否自动切换
• interval 自动切换时间间隔 默认5000毫秒
• circular 是否采用衔接滑动

text

• 文本组件
• 类似于 HTML 中的 span 标签，是一个行内元素
  
  长按选中文本内容的效果 ，使用 user-select

<!-- wxml -->
<view>
  <text user-select >1433223</text>
</view>

rich-text

• 富文本组件
• 支持把 HTML 字符串渲染为 WXML 结构

<!-- wxml -->
<rich-text nodes="<h1 style='color:blue;'>hello world</h1>"/>

button

• 按钮组件
• 功能比 HTML 中的 button 按钮丰富
  
  type、size、plain、disabled、loading....
• 通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

<!-- type  按钮的样式类型-->
<button>默认按钮</button>
<button type="primary">primary</button>
<button type="default">default</button>
<button type="warn">warn</button>

<!-- size  按钮的大小-->
<button size="default">default</button>
<button size="mini">mini</button>

<!-- plain  按钮是否镂空，背景色透明-->
<button plain>plain0</button>
<button plain type="primary" >plain1</button>
<button plain type="warn" >plain2</button>
<!-- disabled 是否禁用-->
<!-- loading 名称前是否带 loading 图标-->
<button disabled="true">disabled</button>
<button loading>loading</button>

image

• 图片组件
• image 组件默认宽度约 300px、高度约 240px
  
  src 图片资源地址
  
  mode 图片裁剪、缩放的模式 默认scaleToFill

空图片也会显示，虽然空白，但是占位置

这个图片的地址，第一个斜杠是表示根目录下，/images/,就是指根目录下的文件夹images中的东西

一些mode属性

• scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
• aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
• aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
• widthFix 宽度不变，高度自动变化，保持原图宽高比不变
• heightFix 高度不变，宽度自动变化，保持原图宽高比不变
• 还有按位置缩放的，top,left等等

<!-- wxml -->
<image src="" mode=""/>
<image src="/images/tianshui.jpg" mode=""/>
<image src="/images/tianshui.jpg" mode="aspectFit"/>
<image src="/images/tianshui.jpg" mode="aspectFill"/>
<image src="/images/tianshui.jpg" mode="widthFix"/>
<image src="/images/tianshui.jpg" mode="heightFix"/>

/* wxss */
image{
  border: solid 1px slateblue;
}

navigator

• 页面导航组件
• 类似于 HTML 中的 a 链接

API

小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力，

例如：获取用户信息、本地存储、支付功能等

• 事件监听 API
  
  特点：以 on 开头，用来监听某些事件的触发
  
  举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
• 同步 API
  
  特点1：以 Sync 结尾的 API 都是同步 API
  
  特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
  
  举例：wx.setStorageSync('key', 'value') 向本地存储中写入内容
• 异步 API
  
  特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果
  
  举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据