小程序常用组件

1. view块级组件

代替原来的 div 标签<view hover-class="h-class"> 点击我试试 </view>

2. text文本组件

文本标签只能嵌套text长按文字可以复制（只有该标签有这个功能）可以对空格、回车进行编码 属性名类型默认值说明selectableBooleanfalse文本是否可选decodeBooleanfalse是否解码 代码<text selectable="{{false}}" decode="{{false}}"> 普 通 </text>

3. image图片组件

图篇标签，image组件默认宽度320px、长度240px

支持懒加载

属性：

属性名类型默认值说明srcString图片资源地址modeString'scaleToFill'图片裁剪、缩放的模式lazy-loadBooleanfalse图片懒加载

mode 属性有效值：mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。

模式值说明缩放scaleToFill 不保持纵横比缩放图片，使图片的宽度完全拉伸至填满 image 元素aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。widthFix宽度不变，高度自动变化，保持原图宽度比不变裁剪top不缩放图片，只显示图片的顶部区域bottom不缩放图片，只显示图片的底部区域center不缩放图片，只显示图片的中间区域left不缩放图片，只显示图片的左边区域right不缩放图片，只显示图片的右边区域top left不缩放图片，只显示图片的左上边区域top right不缩放图片，只显示图片的右上边区域bottom left不缩放图片，只显示图片的左下边区域bottom right不缩放图片，只显示图片的右下边区域

4. swiper轮播图组件

微信内置轮播图组件

默认宽度 100% 高度 150px

属性：

属性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点indicator-colorColorrgba(0, 0, 0, .3)指示点颜色indicator-active-colorColor#000000 当前选中的指示点颜色autoplay Booleanfalse是否自动切换interval Number5000自动切换时间间隔circularBooleanfalse是否循环轮播

swiper-item：滑块，默认宽度和高度都是100%

5. navigator超链接组件

导航组件，类似超链接标签属性： 属性名类型默认值说明targetStringself在哪个目标上发生跳转，默认当前小程序，可选值self、miniProgramurlString当前小程序内的跳转链接open-typeStringnavigate跳转方式 open-type 属性有效值： 值说明navigate保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面redirect关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面reLaunch关闭所有页面，打开到应用内的某个页面navigateBack关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层exit退出小程序，target="miniProgram"时生效

6. rich-text将字符串解析成标签

富文本标签

可以将字符串解析成对应标签，类似 vue中 v--html 功能

// 1 index.wxml 加载 节点数组 <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text> // 2 加载 字符串 <rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p ng" alt="">'></rich-text> Page({ data: { nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'Hello World!' }] }] }, tap() { console.log('tap') } })

nodes属性：支持字符串 和 标签节点数组

属性名说明类型必填备注name标签名string是支持部分受信任的 HTML 节点attrs属性object否支持部分受信任的属性，遵循 Pascal 命名法children子节点列表array否结构和 nodes 一致

文本节点：type = text

属性名说明类型必填备注text文本string是支持 entities

注意： a. nodes 不推荐使用 String 类型，性能会有所下降。 b. rich–text 组件内屏蔽所有节点的事件。 c. attrs 属性不支持 id ，支持 class 。 d. name 属性大小写不敏感。 e. 如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。 f. img 标签仅支持网络图片。

7. button按钮组件

代码示例：

<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"> default </button>

属性：

属性名类型默认值必填说明sizestringdefault否按钮的大小typestringdefault按钮的样式类型plainbooleanfalse按钮是否镂空，背景色透明disabledbooleanfalse是否禁⽤loadingbooleanfalse名称前是否带 loading 图标form-typestring用于 `` 组件，点击分别会触发 `` 组件的submit/reset 事件open-typestringdefault微信开放能力

size 属性的合法值

值说明default默认大小mini小尺寸

type 的合法值

值说明primary绿色default白色warn红色

form-type 的合法值

值说明submit提交表单reset重置表单

open-type 的合法值

值说明contact打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从bindcontact 回调中获得具体信息，具体说明share触发用户转发，使用前建议先阅读使用指引getPhoneNumber获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明getUserInfo获取用户信息，可以从bindgetuserinfo回调中获取到用户信息launchApp打开APP，可以通过app-parameter属性设定向APP传的参数具体说明openSetting打开授权设置⻚feedback打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

open-type 的 contact的实现流程 a. 将小程序 的 appid 由测试号改为自己的 appid b. 登录微信小程序官网，添加 客服 – 微信 c. 为了方便演示，先准备两个微信账号 d. 普通用户 A e. 客服-微信 B

8. icon图标组件

属性：

属性名类型默认值必填说明typestring是icon的类型，有效值：success,、success_no_circle、info、warn、waiting、cancel、download、search、clearsizenumber / string23否icon的大小colorstring否icon的颜色，同css的color

展示：

代码：

Page({ data: { iconSize: [20, 30, 40, 50, 60, 70], iconType: [ 'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel','download', 'search', 'clear' ], iconColor: [ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple' ], } }) <view class="group"> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}"/> </block> </view> <view class="group"> <block wx:for="{{iconType}}"> <icon type="{{item}}" size="40"/> </block> </view> <view class="group"> <block wx:for="{{iconColor}}"> <icon type="success" size="40" color="{{item}}"/> </block> </view>

9. radio单选框组件

可以通过 color 属性来修改颜色 需要搭配 radio-group 一起使用

10. checkbox多选框组件

可以通过 color属性来修改颜色 需要搭配 checkbox-group 一起使用

11. 自定义组件

类似 Vue 或者 React 中的自定义组件小程序允许我们使用自定义组件的方式来构建页面。

11.1 创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

可以在微信开发者工具中快速创建组件的文件结构

在文件夹内 components/myHeader ，创建组件 名为 myHeader

声明组件：首先需要在组件的 json 文件中进行自定义组件声明

{ "component": true }

编辑组件：同时，还要在组件的 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，slot 表示插槽，类似vue中的slot

<!-- 这是自定义组件的内部WXML结构 --> <view class="inner"> {{innerText}} <slot></slot> </view>

. 注册组件：在组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和 自定义方法

Component({ properties: { // 这里定义了innerText属性，属性值可以在组件使用时指定 innerText: { // 期望要的数据是 string类型 type: String, value: 'default value', } }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法 customMethod: function(){} } })

11.2 声明引入自定义组件

首先要在页面的 json 文件中进行引入声明。还要提供对应的组件名和组件路径{ // 引用声明 "usingComponents": { // 要使用的组件的名称 // 组件的路径 "my-header":"/components/myHeader/myHeader" } }

11.3 页面中使用自定义组件

代码示例<view> <!-- 以下是对一个自定义组件的引用 --> <my-header inner-text="Some text"> <view>用来替代slot的</view> </my-header> </view>

11.4 定义段与示例方法

Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。 定义段类型必填描述propertiesObject、Map否组件的对外属性，是属性名到属性设置的映射表，参见下文dataObject组件的内部数据，和 properties 一同用于组件的模板渲染observersObject组件数据字段监听器，用于监听 properties 和 data 的变化，参见 数据监听器methodsObject组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件事件createdFunction组件生命周期函数，在组件实例刚刚被创建时执行，注意此时不能调用 setData ，参见 组件生命周期attachedFunction组件生命周期函数，在组件实例进入页面节点树时执行，参见 组件生命周期readyFunction组件生命周期函数，在组件布局完成后执行，参见 组件生命周期movedFunction组件生命周期函数，在组件实例被移动到节点树另一个位置时执行，参见 组件生命周期detachedFunction组件生命周期函数，在组件实例被从页面节点树移除时执行，参见 组件生命周期

11. 5 组件-自定义组件传参

父组件通过属性的方式给子组件传递参数子组件通过事件的方式向父组件传递参数过程： a. 父组件 把数据 {{tabs}} 传递到 子组件的 tabItems 属性中 b. 父组件 监听 onMyTab 事件 c. 子组件 触发 bindmytap 中的 mytap 事件，自定义组件触发事件时，需要使用 triggerEvent 方法，指定 事件名 、 detail 对象 d. 父 -> 子 动态传值 this.selectComponent("#tabs")父组件代码：<tabs tabItems="{{tabs}}" bindmytap="onMyTab" > 内容-这里可以放插槽 </tabs> data: { tabs:[ {name:"体验问题"}, {name:"商品、商家投诉"} ] }, onMyTab(e){ console.log(e.detail); }, 子组件代码：<view class="tabs"> <view class="tab_title" > <block wx:for="{{tabItems}}" wx:key="{{item}}"> <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view> </block> </view> <view class="tab_content"> <slot></slot> </view> </view> Component({ properties: { tabItems:{ type:Array, value:[] } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { handleItemActive(e){ this.triggerEvent('mytap','haha'); } } })

11.7 小结

标签名 是 中划线的方式属性的方式 也是要中划线的方式其他情况可以使用驼峰命名组件的文件名如 myHeader.js 的等组件内的要接收的属性名 如 innerText

12. 小程序生命周期

分为应用生命周期和页面生命周期

应用生命周期：

属性类型必填说明onLaunch function否监听小程序初始化。onShow 监听小程序启动或切前台onHide监听小程序切后台onError 错误监听函数onPageNotFound页面不存在监听函数

页面声明周期：

属性类型说明dataObject页面的初始数据onLoadfunction生命周期回调—监听页面加载onShow 生命周期回调—监听页面显示onReady 生命周期回调—监听页面初次渲染完成onHide生命周期回调—监听页面隐藏onUnload 生命周期回调—监听页面卸载onPullDownRefresh 监听用户下拉动作onReachBottom页面上拉触底事件的处理函数onShareAppMessage 用户点击右上角转发onPageScroll页面滚动触发事件的处理函数onResize 页面尺寸改变时触发，详见 响应显示区域变化onTabItemTap 当前是 tab 页时，点击 tab 时触发

页面生命周期图解