[TOC]
# 1.创建、使用自定义组件
1、创建目录components用于存放组件
2、在components下创建第一个组件目录music，创建完成后，右键目录music，选择创建一个component，输入文件名：music，便得到了四个以music开头的文件
3、在index页面（"pages/index/index"）使用自定义组件music，
先在index.json文件内注册组件（组件名是可以自定义的，但得找到对应的文件目录）
~~~
{
"usingComponents": {
"v-music": "/components/music/music"
}
}
~~~
4、现在就可以在index.wxml文件使用组件了
~~~
<v-music></v-music>
~~~
# 2.behavior，组件属性封装
behaviors 是用于组件间代码共享的特性。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法，组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior 。 behavior 也可以引用其他 behavior 。
behavior 需要使用 Behavior() 构造器定义。
*****
公共属性my-behavior.js
~~~
// my-behavior.js
var common = Behavior({
properties:{
title:String,
content:String
}
})
export {common}
~~~
组件movie.js
~~~
// components/movie/movie.js
import {common} from "../my-behavior";
Component({
/**
* 组件的属性列表
*/
// properties: {
// title: String,
// content: String
// },
behaviors: [common],
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
~~~
# 3.自定义组件传参
## 1.父子传参（页面向组件传参）
例子：
### 1.现在在index.js下data里有一个参数id(id: 1997)需要传递给组件music
~~~
Page({
data: {
id: 1997
}
})
~~~
### 2.在index.wxml给组件定义一个属性来承载参数
> **一旦给组件添加属性，那么若添加的属性想要在组件内使用，必须在组件属性列表（properties:{}）内注册**
~~~
<v-music id="{{id}}"></v-music>
~~~
### 3.在组件music.js注册属性
> **属性注册需要规定数据类型type（必填），也可以给默认值value**
~~~
Component({
/**
* 组件的属性列表
*/
properties: {
/* 简写方式：id: Number */
id: {
type: Number
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
~~~
### 4.数据已经传递给了组件，现在可以看下效果了，在music.wxml展示
~~~
<view>{{id}}</view>
~~~
## 2.子父传参（组件向页面传参），详细api点击：[链接](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html)
在子组件中定义事件，向父组件传递任意数据
例：现将组件music.js下data内的msg传递给index页面
### 1.在music.wxml添加点击事件
~~~
<view bindtap="onShow">
我是谁？
</view>
~~~
### 2.在music.js方法列表写点击函数
~~~
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
msg: "you are beautiful"
},
/**
* 组件的方法列表
*/
methods: {
onShow(){
var msg = this.data.msg;
// 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象,传递给父组件
this.triggerEvent('message',msg)
}
}
})
~~~
### 3.在index.wxml绑定来自组件的事件，并给事件方法名
~~~
<view class="container">
<v-music bind:message="onMshow"></v-music>
</view>
~~~
### 4.在index.js里便可以得到来自组件传递的参数
~~~
Page({
data: {
},
onMshow(e){
console.log(e.detail); // you are beautiful
}
})
~~~
# 4.组件的wxss样式由父节点编写
### 1.先在组件music.wxml添加class
~~~
<!--components/music/music.wxml-->
<view bindtap="onShow" class="tag-class">
我是谁？
</view>
~~~
### 2.在组件music.js注册
~~~
// components/music/music.js
Component({
/**
* 组件的属性列表
*/
properties: {},
/* 添加祖册项，向外暴露class */
externalClasses: ['tag-class'],
/**
* 组件的初始数据
*/
data: {
msg: "you are beautiful"
},
})
~~~
### 3.在index.wxml接收来自组件的class名，并在index.wxss设置样式
~~~
<!-- "pages/index/index.wxml" -->
<view class="container">
<v-music bind:message="onMshow" tag-class="font-color"></v-music>
</view>
~~~
"pages/index/index.js"
~~~
.font-color{
color: red;
}
~~~
# 5.父节点向子组件传递wxml代码（将页面的wxml代码传递到组件）
### 1.在index.wxml添加需要添加到组件的代码
~~~
<!-- "pages/index/index.wxml" -->
<view class="container">
<v-music bind:message="onMshow" tag-class="font-color">
<text slot="after">xhhh</text>
</v-music>
</view>
~~~
### 2.在组件music.js设置注册项
~~~
// components/music/music.js
Component({
/**
* 组件的属性列表
*/
properties: {},
// 设置注册项
options: {
multipleSlots: true
},
externalClasses: ['tag-class'],
/**
* 组件的初始数据
*/
data: {
msg: "you are beautiful"
},
})
~~~
### 3.在组件music.wxml接收来自父组件的代码段
~~~
<!--components/music/music.wxml-->
<view bindtap="onShow" class="tag-class">
我是谁？
<!-- slot 父节点向子组件传递wxml代码 -->
<slot name="after"></slot>
</view>
~~~
- 小程序环境配置
- 1.生命周期
- 页面生命周期
- 组件生命周期
- 2.小程序组件
- 点击事件bindtap|catchtap
- swiper轮播
- wx:for循环
- 播放音乐
- map
- tabBar底部页面切换
- scroll-view可滚动视图区域。
- web-view装载显示网页
- priviewImage新页面预览照片
- chooseImage本地选择照片
- onReachBottom上拉刷新，加载等待条
- setStorage缓存
- showToast弹出提示框
- slot父组件wxml传递到子组件
- form表单
- 小程序.wxs，方法在.wxml调用
- 3.组件前身：模板、模板传参
- 4.自定义组件、组件传参|传wxss|wxml代码
- 5.小程序正则
- 6.小程序页面跳转
- 7.open-type 微信开放功能
- 实例
- 1.第一个实例 hello world
- 2.第二个实例豆瓣电影数据渲染
- 豆瓣1.0基本版
- 豆瓣2.0升级版
- 豆瓣3.0豪华版
- 3.第三个实例多接口在同一页面使用
- HTTP封装
- 基础报错提示，类式封装
- Promise回调，类式封装