微信小程序 --(2) 小程序基础组件库

小程序基础组件库

小程序组件库参考

小程序中wxml文件由各式各样的组件构成，这些组件都是微信自定义的。其他html的标签无法使用。

1. 关于组件属性：

1. 对于布尔类型属性，无论直接设置为true和false，都会当做普通字符串来进行判断，最终被解释为true;除非用非空字符串“”。推荐使用{{}}引用js的字面量，为属性赋值为true或flase。比如：hover-stop-propagation="{{true}}"
2. 小程序组件既遵守驼峰命名法，也遵守短横线命名法，两种属性名的设置都将会生效。

2. <view>组件

<view>组件为视图容器组件：

• 基本语法

<view
  hover-class=”点击view所应用的样式类名”
  hover-start-time="点击view后多久出现点击状态"
  hover-stay-time="点击状态持续多久"
  hover-stop-propagation=”是否阻止冒泡”     “{{true/false}}”
>
</view>

3. <image>组件

Image组件为图片组件，支持GIF、JPG、PNG、WEBP等图像格式

• 基本语法：

<image
  scr=”图片路径”
  lazy-load=”是否采用懒加载”
  mode=”图像裁切模式”  //14种  // aspectFill 默认  
  show-menu-by-longpress=”是否支持长按弹出操作菜单” 
>

</image><image />

注意：

1. images组件默认宽高为320*240。可以通过wxss或style内联样式修改图片的宽和高，单位是px。
2. wxss提供了一个新的尺寸单位rpx来完善小程序组件在不同平台下的适配工作

4. <swiper>组件

swiper为轮播图组件

• 基本语法：

<swiper
  autoplay="{{true}}"
  indicator-dots="{{true}}"
  indicator-active-color="#0f0"
>
<swiper-item>
    <image src=”xx.jpg”></image>
</swipeer-item>
</swiper>

5. <text>组件

文本组件

• 基本语法：

<text
	user-select=”内容文本是否可选中”
	decode=”是否支持内容解码”
	space=”空格的渲染方式”
	>
</text>

6. navigator组件

navigator 是页面链接组件，用于控制页面的跳转

• 基本语法:

<navigator 
  url=”当前小程序的页面地址”
  open-type=”跳转方式”
>
  链接文本
</navigator>

open-type

• 跳转方式的可选项包含：

navigate、navigateBack、switchTab、redirect、reLaunch

1. navigate

• 默认的跳转方式。可以从当前页跳转到非tabber页面。跳转的过程会保留当前页，新建目标页（tabber不用新建），而后执行跳转操作。称为“保留跳转”。（最深10层）

2. navigateBack

• 返回上一级页面。这种操作将会销毁当前页从而显示上一页。可以配合delta属性实现上n实现。（delta=”2” 返回上两页）

3. switchTab

• 字面理解：切换到某个选项卡。这种方式可以跳转tabbar页面。但是关闭所有非tabbar页面。

4. redirect

• 字面理解：重定向。这次跳转方式将会销毁当前页，重定向到非tabber页面。这种跳转也会创建新的目标页。

5. relaunch

• 字面理解：重新启动应用。这种跳转方式会关闭所有页面，跳转到指定页面。

7. <scroll-view>组件

scroll-view组件用于实现滚动的视图容器（支持水平和垂直滚动）

• 基本用法

<scroll-view 
scroll-x=”是否允许横向滚动”
scroll-y=”是否允许纵向滚动”
enhanced="{{true}}"  
enable-flex="{{true}}"
showScrollbar="{{false}}"
>
</scroll-view>

8. <input>组件

Input组件为输入框组件

• 基本语法

<input
type=”输入框类型”
placeholder=”占位符内容”
value=”文本框中初始值”
password=”是否是密码框”
maxlength=”最大长度”
focus=”是否让文本框自动获取焦点”
bindinput=”input事件处理函数函数名”
bindfocus=”focus事件处理函数函数名”
bindblur=” blur事件处理函数函数名”
>
</input>

type可选值：

text、number、idcard（身份证）、digit(带小数点)

• input组件中提供了一些事件处理（EventHandle）属性，这些属性用于为当前组件绑定事件处理函数。在属性中填写事件处理函数的名字即可。（注意：严禁出现小括号）

<input bindinput=”doInput”>

• 一旦触发了input事件，将会调用page.js中定义的doInput方法来处理该事件。doInput方法中也将会自动传入event事件对象，用于封装事件相关的参数信息

page({
  data:{},
  doInput(event){
    //event.detail.value
}
})

9. <radio-group>组件

radio-group组件为单选框组组件

• 基本语法：

<radio-group bindchange=””>
  <radio value=”M” checked color=”颜色”>男</radio>
<radio value=”F” color=”#颜色”>女</radio>
</radio-group>

10. checkbox-group组件

<checkbox-group>为多选框组件：

• 基本语法：

<radio-group bindchange=””>
  <radio value=”M” checked color=”颜色”></radio>
<radio value=”F” color=”#颜色”>女</radio>
</radio-group>

11. <switch>组件

<switch>组件表示开关组件

• 基本语法：

<switch
  color=””
  checked
></switch>

12 <picker>組件

<picker 
mode="region | date | time | selector "
  bindchange="changeRegion"
>

13 <button>组件

<button 
  size=”按钮大小：default | mini”
  type=”按钮类型：primary | default | warn”
  disabled
  palin
loading
>
</button>

14 …