小程序 (组件,组件通信和生命周期)

1.常见组件

1.1 view

代替原来的div标签

<view>div标签</view>

1.2 text

文本标签

属性名	类型	说明
selectable	Boolean	文本是否可选
decode	Boolean	是否解码,可以解析

1.3 image

图片标签,image组件默认宽度320px,高度240px

<image src="/icon/home.png"/>

1.4 icon 图标

属性名	说明
type	图标的类型,success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	图片大小
color	图片颜色

<icon type="success" size='100' color='skyblue'></icon>
<icon type="success_no_circle" size='100' ></icon>
<icon type="info" size='100' ></icon>
<icon type="warn" size='100' ></icon>
<icon type="waiting" size='100' ></icon>
<icon type="cancel" size='100' ></icon>
<icon type="download" size='100' ></icon>
<icon type="search" size='100' ></icon>
<icon type="clear" size='100' ></icon>

1.5 radio 单选框

注意:radio标签必须和radio-group结合使用

可以通过color来改变颜色默认是绿色

<radio-group>
    <radio>男</radio>
    <radio checked>女</radio>
</radio-group>

1.6 checkbox 多选框

注意:checkbox标签必须和radio-group结合使用

可以通过color来改变颜色默认是绿色

<checkbox-group>
    <checkbox color="red">语文</checkbox>
    <checkbox color="red" checked>数学</checkbox>
    <checkbox color="red" checked>英语</checkbox>
</checkbox-group>

1.7 navigator 导航

导航组件 类似超链接标签

属性名	说明
target	要跳转到当前的小程序,还是其他小程序 self 自己 默认 miniProgram其他小程序
url	要跳转的页面路径
open-type	跳转的方式

open-type

属性名	说明
navigate	默认 保留当前页面,跳转到应用内的某个页面
redirect	关闭当前页面,跳转到应用内的某个页面
switchTab	跳转到tabBar页面,关闭其他所有非tabBar页面
reLaunch	关闭所有页面,打开到应用内的某个页面

1.8 button 按钮

1.8.1 样式

<button>默认按钮</button>  								
<button size="mini">mini 默认按钮</button>				//size按钮大小 mini小尺寸
<button type="primary">primary按钮</button>			 //primary 绿色
<button type="warn">warn按钮</button>					 //warn 红色
<button type="warn" plain>plain按钮</button>			 //plain 按钮是否镂空背景色透明
<button type="primary" loading>loading按钮</button>	 //loading 是否带loading图标

1.8.2 button 开发能力

属性	说明
contact	直接打开客服对话功能
share	转发当前小程序到微信朋友中
getPhoneNumber	获取当前用户的手机号码信息
getUserInfo	获取当前用户的个人信息
launchApp	在小程序中直接打开app
openSetting	打开小程序内置的授权页面
feedback	打开小程序内置的意见反馈页面

<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

2.自定义组件

类似于vue的自定义组件

2.1 创建自定义组件

自定义组件由 json wxml wxss js 四个文件组成

2.1.1新增组件

新创建一个components文件,在文件下创建tabs文件,在下面创建四个文件

这就是子组件

注意:四个文件不需要手动创建,只需要点击tabs文件右键 新建component 就好了

2.1.2声明组件

要在哪个页面下使用,就在那个页面的json文件下声明组件,那个页面就是父组件

{
  "usingComponents": {
    "tabs":"../../components/tabs/tabs"
    标签名        组件路径
  }
}

2.1.3 使用

在页面下的wxml文件下输入标签就可以了

<tabs></tabs>   //tabs 是自定义组件的标签名

2.1.4 编辑组件功能

编程你自定义组件的功能

2.2 自定义组件 父传子

父组件向子组件传递数据通过标签属性的方式来传递

2.2.1 父组件写要传递的数据

<tabs aa="111"></tabs>    //tabs 是自定义组件的标签名

2.2.2 子组件接收

 //存放接收的数据
 properties: {
 	//数据名称
    aa:{
      //数据类型
      type:Number,
      //默认值
      value:''
    }
  },

2.2.3 使用

把接收到的数据当成data中的数据直接使用

{{aa}}

2.3 子传父

2.3.1 子组件触发事件发送数据

 bb(){
      console.log('aaaaa')
      this.triggerEvent('cc','子组件传递的数据')
 }

<button bind:tap='bb'>点击</button>

2.3.2 父组件写个事件接收

ha(e){
    console.log(e)
}

2.3.3 给父组件绑定事件

<tabs bind:cc="ha"></tabs> //tabs 是自定义组件的标签名

2.4 slot

slot 标签 插槽 就是占位符

匿名插槽

子组件

<slot></slot>

父组件

<tabs>匿名插槽</tabs>    //tabs 是自定义组件的标签名

具名插槽

子组件

<slot name="ss"></slot>

父组件

<tabs>   //tabs 是自定义组件的标签名
  <view slot="ss">具名插槽</view>
</tabs>

3.小程序生命周期

小程序生命周期分为应届生命周期和页面生命周期

3.1应用生命周期

onLaunch 应用第一次启动的就会触发的事件

onShow 应用被用户看到

onHide 用户被隐藏

onError 应用的代码发生了报错的时候就会触发

onPageNotFound 页面找不到就会触发

3.2页面生命周期

属性	说明
data	页面初始数据是个对象
onLoad	页面加载完成后触发,一般用来发生异步请求
onShow	页面显示触发
onReady	页面渲染完触发
onHide	页面隐藏触发
onUnload	页面卸载触发
onPullDownRefresh	页面下拉触发
onReachBottom	页面上拉触底事件
onShareAppMessage	用户点击右上角转发触发
onPageScroll	页面滚动触发
onResize	页面尺寸发生变化的时候触发
onTabItemTap	当前页是tab页时,点击tab时触发

总结:

本文主要介绍了常用的组件,自定义组件,组件通信和生命周期
常用的组件主要介绍了常用的属性,想要更完整的可以访问官网
小程序和vue相似,主要用javascript编写,比较简单易学