微信小程序用户评论组件代码示例

以下是一个简单的微信小程序用户评论组件代码示例：

comment.wxml：

<view class="comment">
  <view class="avatar">
    <image src="{{avatarUrl}}" mode="scaleToFill"></image>
  </view>
  <view class="content">
    <view class="username">{{username}}</view>
    <view class="text">{{text}}</view>
    <view class="time">{{time}}</view>
  </view>
</view>

comment.js：

Component({
  properties: {
    avatarUrl: {
      type: String,
      value: ''
    },
    username: {
      type: String,
      value: ''
    },
    text: {
      type: String,
      value: ''
    },
    time: {
      type: String,
      value: ''
    }
  },
  data: {},
  methods: {}
})

comment.wxss：

.comment {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10rpx;
  border-bottom: 1rpx solid #eee;
}
.comment .avatar {
  margin-right: 10rpx;
}
.comment .avatar image {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}
.comment .content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.comment .username {
  font-size: 28rpx;
  margin-bottom: 5rpx;
}
.comment .text {
  font-size: 26rpx;
  line-height: 1.4;
  margin-bottom: 5rpx;
}
.comment .time {
  font-size: 24rpx;
  color: #999;
}

使用方法：

在需要使用评论组件的页面中引入组件：

<import src="path/to/comment.wxml"></import>

然后在页面中使用组件：

<comment avatarUrl="{{avatarUrl}}" username="{{username}}" text="{{text}}" time="{{time}}"></comment>

其中，`avatarUrl`、`username`、`text`、`time` 分别为评论的头像地址、用户名、评论内容和时间。