微信小程序_组件

1.基础组件：

什么是组件：

<ul>

<li>组件是视图层的基本组成单元。</li>

<li>组件自带一些功能与微信风格的样式。</li>

<li>一个组件通常包括开始标签

和结束标签

，属性

用来修饰这个组件，内容

在两个标签之内。</li>

</ul>

2.属性类型

<ul>

<li>Boolean布尔值组件写上该属性，不管该属性等于什么，其值都为true

，只有组件上没有写该属性时，属性值才为false

。如果属李弊散性值为变量，变量的值会被转换为Boolean类型</li>

<li>Number数字1

, 2.5</li>

<li>String字符串"string"</li>

<li>Array数组[ 1, "string" ]</li>

<li>Object对象{ key: value } </li>

<li>EventHandler事件处理函数名"handlerName"

是 Page中定义的事件处理函数名</li>

<li>Any任意属性</li>

</ul>

3.共同属性类型哪氏

id , class , style , hidden , data-* , bind* / catch*

4.特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

5.组件列表

基础组件分为以下八大类：

视图容器(View Container)：

view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content)：

icon 图标, text 文字, progress 进度条

表单(Form)：

button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选卜兄择器, switch 开关选择器, label 标签.

*** 作反馈（Interaction）

action-sheet 上拉菜单

modal 模态d窗

toast 消息提示框

loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image 图片， video 视频

** 地图 **

map 地图

画布Canvas

canvas 画布

flex: vt.折曲，使收缩； vi.玩去，收缩

storage【缓存数据】

以键值对key, data的形式存储数据，单个 key 允许存储的最大数据长度为 【1MB】，所有数据存储空间最大为【10M】。

属性 类型颤乱闷 默认值 必填 说明

key string 是 本地缓存中指定的 key

data any 是 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

不带Sync的为异步，【带Sync的为同步，需要做异常处理，防止阻塞主程序。】

分别为set存储、get得到一个、getInfo得到所有，remove移除一个、clear清除所有

隔离策略

同一个微信用户，同一个小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据；不同小程序之间也无法互相读写数据。

插件隔离策略

同一小程序使用不同插件：不同插件之间，插件与小程序之间 storage 不互通。

不同小程序使用同一插件：同一插件 storage 不互通。

清理策略：

本地缓存的清理时机跟代码包一样，只有在代码包被清理的时候本地缓存才会被清理。

二.save File【缓存文件】

本地文件存储的大小限制为 【10M】

三，database服务端数据库【茄弯存储数据】存储数据至服务器端。

四.upload File,【上传文件】存储文件至服务器端。

云函数uploadFile文件名命名限制

不能为空

不能以/开头

不能出现连续/

编码长度最大为850个字节

推荐使陪禅用大小写英文字母、数字，即[a-z，A-Z，0-9]和符号 -，!，_，.，* 及其组合

不支持 ASCII 控制字符中的字符上(↑)，字符下(↓)，字符右(→)，字符左(←)，分别对应 CAN(24)，EM(25)，SUB(26)，ESC(27)

如果用户上传的文件或文件夹的名字带有中文，在访问和请求这个文件或文件夹时，中文部分将按照 URL Encode 规则转化为百分号编码。

不建议使用的特殊字符: ` ^ " \ { } [ ] ~ % # \ ><及 ASCII 128-255 十进制

可能需特殊处理后再使用的特殊字符: ， : = &$ @ + ?（空格）及ASCII 字符范围：00-1F 十六进制（0-31 十进制）以及7F（127 十进制）

:

开发者可以利用微信团队提供的框架中的一系列基础组件进行快速的开发，什么是组件？

组件是视图层的基本组成单元。

组件自带一些功能孙桥与微信风格的样式。

一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之间。

形式:

　Content goes here

例如:

组件的属性

所有组件的属性都是蔽亩小写，以连字符"-"连接

属性类型:每个组件的属性是分不同的类型的

公共属性:所有的主键都有的属性

特殊属性

1.属性的类型

2.共同属性

3.特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰。

组件及类型的说明

组件名称 组件类型 组件说则并猛明

view 视图容器 视图容器

scroll-view 视图容器 可滚动视图容器

swiper 视图容器 滑块视图容器

icon 基础内容 图标

text 基础内容 文字

progress 基础内容 进度条

button 表单 按钮

form 表单 表单

input 表单 输入框

checkbox 表单 多项选择器

radio 表单 单项选择器

picker 表单 列表选择器

picker-view 表单 内嵌列表选择器

slider 表单 滚动选择器

switch 表单 开关选择器

label 表单 标签

navigator 导航 应用连接

audio 多媒体 音频

image 多媒体 图片

video 多媒体 视频

map 地图 地图

canvas 画布 画布

contact-button 客服会话 进入客服会话按钮

实例理解组件属性

在根目录下创建如下的页面目录

然后在mypages.wxss文件中添加button1的样式如下

/* mypages.wxss */

.button1{

width: 256rpx

height: 128rpx

}

然后在mypages.wxml文件中添加如下代码

我的第一个微信小程序

按钮

其中，主要是看button这个按钮控件，其中的属性id 由前面可知是string类型的，所以这个属性的格式为 属性名称="自定义字符串"，class也是string类型的属性，所以格式相同，后面的bingdtap属性就是之前所介绍过的组件的事件，在这个按钮组件中点击按钮，就会出发bindtap属性所指向的在myages.js中对应的名字为"anyfunction"的方法。

点击左侧编译后查看效果如下

boolean类型的属性，只要写了属性名，那值就是为true，例如

我的第一个微信小程序

按钮

其中只要写了hidden这个类型是boolean类型的属性名字，那这个属性就是生效的,运行效果如下，按钮被隐藏:

---