微信小程序的组件和生命周期

一、常用组件

1、view

          视图容器。

<view class="box"></view>

2、text

          文本。

<text> foo <text>bar</text> </text>

3、span

          用于内联文本和图片。

<span> <image> </image> <text>bar</text> </span>

4、image

          图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式。

//缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
<image mode="widthFix" src="./images/img.jpg"></image>
//缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
<image mode="heightFix" src="./images/img.jpg"></image>

5、swiper

          滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

/*
indicator-dots：是否显示面板指示点；
autoplay：是否自动切换； 
interval：自动切换时间间隔；
duration：滑动动画时长；
*/
 <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}">
	<swiper-item>
        <view class="item1">111</view>
	</swiper-item>
	<swiper-item>
        <view class="item2">222</view>
	</swiper-item>
 </swiper>

6、scroll-view

          可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。横向滚动需打开 enable-flex 以兼容 WebView，如 <scroll-view scroll-x enable-flex style="flex-direction: row;"/>

/*
scroll-x="true"：允许横向滚动；
scroll-y="true"：允许纵向滚动；
bindscrolltoupper：滚动到顶部/左边时触发；
bindscrolltolower：滚动到底部/右边时触发；
bindscroll：滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}；
scroll-into-view：用于滚动到指定元素的位置，其对应值是子元素的id；
scroll-top：设置竖向滚动条位置；
scroll-left：设置横向滚动条位置；
*/
<scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="demo1" scroll-top="{{0}}">
	<view id="demo1" class="demo1"></view>
	<view id="demo2" class="demo2"></view>
	<view id="demo3" class="demo3"></view>
</scroll-view>

7、icon

          用于显示图标。

//type属性指定了要使用的图标类型；size属性指定了图标的大小；color属性指定了图标的颜色。
<view class="container">
  <icon type="search" size="40" color="#3cc51f"></icon>
</view>

8、radio-group

          单项选择器，内部由多个radio组成。可以通过bindchange来绑定选中状态改变时的事件。

//checked：当前是否选中，可用来设置默认选中
<view class="container">
  <radio-group bindchange="radioChange">
     <radio value="A" checked="true" />选项A
     <radio value="B" />选项B
     <radio value="C" />选项C
  </radio-group>
</view>

9、checkbox-group

          多项选择器，搭配checkbox一起使用。

//当用户选择其中一个或多个多选框时，会触发bindchange事件，并将选中的值传递给事件处理函数。
<view class="container">
  <checkbox-group bindchange="checkboxChange">
    <checkbox value="A" />选项A
	<checkbox value="B" />选项B
	<checkbox value="C" />选项C
  </checkbox-group>
</view>

微信小程序内置组件官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/

二、自定义组件

          微信小程序支持自定义组件，可以将一些常用的功能封装成组件，方便在多个页面中使用。

1、创建自定义组件

          类似于页面，一个自定义组件由 json、wxml、wxss、js 四个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明，将 component 字段设为 true 可将这一组文件设为自定义组件。

//json文件
{
  "component": true
}

          然后在wxml、wxss、js文件中编写相应的组件模板、样式和逻辑。

//wxml文件
<view class="custom-component">
  <text>这是一个自定义组件</text>
</view>

//wxss文件
.custom-component {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #f5f5f5;
}

//js文件
Component({
  data: {}, // 可以在这里定义一些组件数据，供页面使用。
  methods: {}, // 可以在这里定义一些组件方法，供页面调用。
});

2、使用自定义组件

          首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径。

//json文件
{
  "usingComponents": {
    "my-component": "../components/myComponent/myComponent"
  }
}

//wxml文件
<view>
  //引用自定义组件
  <my-component></my-component>
</view>

3、父传子

          通过属性绑定的方式实现父组件向子组件传递数据。

//父组件wxml文件
<view>
  <my-component list="{{[1,2,3,4,5]}}"></my-component>
</view>

//子组件js文件
{
  "properties": {
    "list": {
      "type": Array,
      "value": [8,8,8,8,8]
    }
  }
}

4、子传父

          通过事件的方式实现子组件向父组件传递数据。

//子组件wxml文件
<view class="custom-component" bindtap="handleTap">
  <text>这是一个自定义组件</text>
</view>
//子组件js文件
Component({
  methods: {
    handleTap: function(){
      this.triggerEvent('myevent',"子组件被点击了")
    }
  }
})

//父组件wxml文件
<view>
  <my-component bindmyevent="handleMyevent"></my-component>
</view>
//父组件js文件
Page({
  data: {},
  handleMyevent: function (event) {
    console.log(event.detail)
  }
})

5、slot插槽

          slot (插槽)是一种组件间的内容分发机制，用于在父组件中定义插槽位置，然后在子组件中填充具体的内容。

//子组件wxml文件
<view class="box">
	<view>header</view>
	<slot></slot>
	<view>footer</view>
</view>

//父组件wxml文件
<view>
  <my-component>
	<view>hello world!</view>
  </my-component>
</view>

/*页面显示：
header
hello world!
footer
*/

          在子组件中，我们可以在对应的插槽位置填充内容。可以使用 标签的 name 属性来实现具名插槽。
//具名插槽

//子组件wxml文件
<view>
  <slot name="one"></slot>
</view>
<view>======</view>
<view>
  <slot name="two"></slot>
</view>

//父组件wxml文件
<view>
  <my-component>
	<view slot="one">aaaaaa</view>
	<view slot="two">bbbbbb</view>
  </my-component>
</view>

/*页面显示：
aaaaaa
======
bbbbbb
*/

6、组件的生命周期

          组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

Component({
  lifetimes: {
  	created: function() {
      // 在组件实例刚刚被创建时执行
    },
    ready: function() {
      // 在组件在视图层布局完成后执行
    },
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
    show: function() {
      // 组件所在的页面被展示时执行
    },
    hide: function() {
      // 组件所在的页面被隐藏时执行
    },
    error: function(err) {
      // 每当组件方法抛出错误时执行
    }
  }
})

微信小程序自定义组件官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

三、页面的生命周期

Page({
  onLoad: function (options) {
    console.log('页面加载');
  },
  onShow: function () {
    console.log('页面显示');
  },
  onReady: function () {
    console.log('页面初次渲染完成');
  },
  onHide: function () {
    console.log('页面隐藏');
  },
  onUnload: function () {
    console.log('页面卸载');
  }
})

四、wx.navigateTo

          在微信小程序中，可以通过 navigateTo 方法跳转到另一个页面，并通过 query 参数传递数据。

// 从当前页面跳转到另一个页面，并传递数据
wx.navigateTo({
  url: '/pages/test/test?id=1&name=test'
})

          在另一个页面中，可以通过 onLoad 生命周期函数获取传递过来的数据。

Page({
  onLoad: function (options) {
    console.log(options.id) // 1
    console.log(options.name) // test
  }
})

微信小程序路由官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html