需求：重复使用相似的组件，如头像框
为了避免重复敲代码，可以自己新建自定义组件。
1.新建Compinents组件
新建components文件夹之后，再右键新建Component，输入名字系统会自动生成四个相应名字的文件，和pages里面一样的。
2. 搭建基本组件
在user_avatar.wxml中添加组件结构
<view class="user_avatar">
<image class="user_avatar_right" mode="scaleToFill" src="{
{user[0].advatar}}"></image>
<view class="user_avatar_left">
<view class="user_avatar_name" >{
{user[0].name}}</view>
<view class="user_avatar_introduce">{
{user[0].introduce}}</view>
</view>
</view>在user_avatar.wxss中添加组件样式
.user_avatar{
margin-top: 150rpx;
width: 100%;
height: 80rpx;
display:flex;
padding: 20rpx 20rpx 20rpx 20rpx;
}
.user_avatar_right {
width: 20%;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
overflow: hidden;
}
.user_avatar_left {
width: 80%;
height: 80rpx;
margin-left: 22rpx;
/* background-color: orange; */
}
.user_avatar_name {
margin-top: 8rpx;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight:500;
font-size: 14px;
}
.user_avatar_introduce {
margin-top: 6rpx;
font-size: 10px;
color: #C0C0C0;
}在user_avatar.js中添加数据逻辑3
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
user:[{
id:'1',
name:'我在人间迷路',
introduce:'希望听歌的人和夜晚的星星都没有意外',
advatar:'/icon/head/1.jpeg'
}]
},
/**
* 组件的方法列表
*/
methods: {
}
})3. 插入组件
在页面的 .json 中进行声明：（其中user_avatar是我们添加的组件名称（就相当于view），可以自己定义）
"usingComponents": {
"user_avatar": "/components/user_avatar/user_avatar"
},然后在某个页面的 .wxml 引入组件就可以了，像插入view一样
<user_avatar></user_avatar>就能完成需求了
新需求：在帖子页里面引入组件，每个组件需要显示该用户的头像名字等数据。
在之前的组件里面是把头像名字写死了的，如果需要显示不同的数据，需要让组件和页面之间进行交互。
方法1：page > component
page 在引用组件时能通过属性值设置，组件.js在 properties 获取:
组件部分
//组件的.js文件里面
Component({
/**
* 组件的属性列表
*/
properties: {
id:{
type:Number,
value:'1'
},
name:{
type:String, //类型
value:'我在人间迷路' //默认值
},
introduce:{
type:String,
value:'希望听歌的人和夜晚的星星都没有意外'
},
advatar:{
type:String,
value:'/icon/head/1.jpeg'
}
/*
id: String,
name：String //简写,只需要提供类型，没有默认值
*/
},
attached: function() {
console.log("this.properties.name:" + this.properties.name);
},
/**
* 组件的初始数据
*/
data: {
user:[{
id:'1',
name:'我在人间迷路',
introduce:'希望听歌的人和夜晚的星星都没有意外',
advatar:'/icon/head/1.jpeg'
}]
},
// 组件的.wxml文件
<view class="user_avatar">
<image class="user_avatar_right" mode="scaleToFill" src="{
{advatar}}"></image>
<view class="user_avatar_left">
<view class="user_avatar_name" >{
{name}}</view>
<view class="user_avatar_introduce">{
{introduce}}</view>
</view>
</view>
页面部分
//页面.js，从服务器获取的数据
data: {
user:[{
id:'1',
name:'我在人间迷路',
introduce:'希望听歌的人和夜晚的星星都没有意外',
advatar:'/icon/head/1.jpeg',
},{
id:2,
name:'寄给二十一号的信',
introduce:'我想做一朵安静的流云，被风吹成你喜欢的样子。',
advatar:'/icon/head/2.jpeg',
},{
id:3,
name:'等日落热吻',
introduce:'最美好的事，是看到某人的微笑;更美好的事，是他因你而笑',
advatar:'/icon/head/3.jpeg',
},{
id:4,
name:'心远即安',
introduce:'不够成熟也不够幼稚，没有能力却有野心',
advatar:'/icon/head/4.jpeg',
}],
从服务器得到数据之后，需要在这个页面的自定义组件上把我们的数据渲染上去。
在后面直接通过属性值传给组件就行了
//页面的.wxml
<scroll-view class="scrollview" scroll-y="true">
<user_avatar class="user_avatar" wx:for="user" wx:key="id" id="{
{user[index].id}}" advatar="{
{user[index].advatar}}" name="{
{user[index].name}}" introduce="{
{user[index].introduce}}"></user_avatar>
</scroll-view>结果
还有两种方法
1.page在引用组件时通data-xxx设置，callphone.js在this.dataset获取
2. component > page
组件中的变量要传到page页面，可以通过事件触发this.triggerEvent()来实行