2020-9-25微信小程序

微信小程序

一.组件

<view></view>   

视图容器，相当于html中的div元素，属于块级元素
hover-class
当view被点击时的样式，取值为string类型的类名
hover-start-time
按住多久后出现点击的样式，取值为number类型的毫秒数
hover-stay-time
手指松开多久后失去点击的样式，取值为number类型的毫秒数
2，

<text></text>

相当于html中的span、p标签，当text单独使用的时候，类似于块级元素，单独成行，当text放到组件中使用的时候，相当于行内元素
space 设置空格的大小
ensp(中文字符空格一半大小)
emsp(中文字符空格大小)
nbsp(根据字体设置空格的大小)
3

<image></image>

提示：相当于html中img标签，图片默认大小：320*340
src
图片路径
mode
提示：图片的裁剪、缩放模式
scaleToFill
缩放模式，不保持图片的横纵比缩放图片，使用图片的宽度和高度完全的拉满image元素
aspectFit
缩放模式，保持图片的横纵比缩放图片，完整的显示图片
aspectFill
缩放模式，保持图片的横纵比缩放图片，以图片的宽度或高度为显示图片，图片显示不完全
widthFix
缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix
缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top
裁剪模式，不缩放图片，只显示图片的顶部区域
bottom
裁剪模式，不缩放图片，只显示图片的底部区域
center
裁剪模式，不缩放图片，只显示图片的中间区域
right
裁剪模式，不缩放图片，只显示图片的右边区域
left
裁剪模式，不缩放图片，只显示图片的左边区域
top left
裁剪模式，不缩放图片，只显示图片的左上边区域
top right
裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left
裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right
裁剪模式，不缩放图片，只显示图片的右下边区域
show-menu-by-longpress
长按图片显示识别小程序码菜单，取值为boolean值
lazy-load
图片懒加载，在即将进入一定范围(上下三屏)时才开始加载，提升项目效率
4,

<button></button>

按钮
type
primary：绿色按钮
default：白色按钮
warn:红色按钮
size
default：默认大小
mini：小尺寸
loading：取值为true，有加载效果
plain：值为true，背景色透明
disabled：禁用按钮

5

<input></input>

value
type
password
placeholder
placeholder-style
placeholder-class
disabled
maxlength:输入的最大长度，取值为number类型

6,从底部弹起的滚动选择器

<picker></picker>

range 绑定数据来源
value 初始加载时，显示数据的哪一项，下标从0开始
mode 选择器的类型，取值为selector(普通选择器)、multiSelector(多列选择器)、time(时间选择器)、date(日期选择器)、region(省市区选择器)
maxlength 输入的最大长度，取值为number类型

如何使用picker
wxml文件

<picker range="{{array}}" value="{{index}}">
  <button>点击</button>
</picker>

wxjs文件

data: {
array:["hahah","lili","xiaoming","xioahong"],
index:0
  },

7,

<video></video>

src：路径
duration：指定视频时长
controls;显示默认的播放控件，默认就是直接显示的
autoplay:是否自动播放，取值为布尔值true/false
但是一般 都不允许
loop：是否循环播放，取值为布尔值true/false
muted是否静音播放，取值为布尔值true/false
danmu-list:弹幕列表，array[object]
danmu-btn弹幕按钮，取值为布尔值true/false
enable-danmu初始化展示弹幕，取值为布尔值true/false

如何使用video

<video 
      id="myVideo" 
      src="../../images/WeChat_20200925161744.mp4" 
      
    ></video>

8

<audio></audio>

src
controls
loop
name
auther
poster

9

<swiper><swiper>

indicator-dots:是否显示面板指示点，取值为boolean值
indicator-color指示点的颜色，rgb格式
indicator-active-color选中的指示点的颜色
autoplay设置自动切换，取值为boolean值
current初始加载时，指示点所在位置，取值为number类型
interval设置自动切换的时间间隔，取值为毫秒的数值
duration设置动画的时长，取值为毫秒的数值
circular设置图片轮播自动衔接，取值为boolean值
vertical设置轮播方向为纵向，取值为boolean值
previous-margin前边距，可露出前一张图片的一部分，取值为px或rpx为单位的数值
next-margin后边距，可露出后一张图片的一部分，取值为px或rpx为单位的数值
display-multiple-items同时显示的图片的数量，取值为number
easing-function轮播图的动画切换类型，取值为default(默认动画)、linear(线性动画)、easeInCubic(缓入动画)、easeOutCubic(缓出动画)、easeInOutCubic(缓入缓出动画)

10,图标

<icon></icon>

type   icon的类型，取值为：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size
color

11,相当于网页中的from

<form></from>