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

1.微信小程序常用的view、text、button、image组件2023-05-28

2.微信小程序 - WXML 模板语法2023-05-29 3.微信小程序 WXSS模板样式，全局和页面配置，网络请求2023-05-30 4.微信小程序 - 视图与逻辑2023-06-01 5.微信小程序自定义组件2023-06-07 6.微信小程序 npm包、全局数据共享、分包2023-06-09 7.uniapp学习(一)2023-06-29 8.uniapp学习（二）2023-06-30

【黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含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 回调函数接收数据