微信小程序豆瓣项目Day1(components组件+index主页)

创建自定义组件

创建好所需要的所有自定义组件目录
如下图：
这是我们需要实现的页面样式：

页面分为了搜索框、电影、电视剧、综艺、四个模块。
我们可以定义出搜索的模块以及下面三个影视列表的显示模块。

1.搜索组件模块

在这里插入图片描述

如图：

1.我们在search.wxml中添加

<view class="searchbar">
  <navigator wx:if="{{isnavigator}}" style="background-position: {{position}}" url='/pages/search/search' class='search-navigator'></navigator>
  <view wx:else class="search-input-group">
    <input class='search-input' placeholder='搜索' value="{{historyKey}}" bindinput='onInputEvent'></input>
  </view>
</view>

2.我们在json中添加"component": true,的属性。
3.js的p’roperties中添加

properties: {
    isnavigator: {
      type: Boolean,
      value: false
    },
    position: {
      type: String,
      value: "left"
    },
    historyKey:null
  },

methods方法中添加

onInputEvent: function(event){
      var value = event.detail.value;
      var detail = {"value": value};
      var options = {};
      this.triggerEvent("searchinput",detail,options);
    }

3.在wxss中添加

.searchbar{
  background-color: #161827;
  padding: 20rpx;
}
.search-navigator{
  width: 100%;
  height: 60rpx;
  background-color: #fff;
  border-radius: 10rpx;
  background-image: url("data:image/png;base64,");
  background-repeat: no-repeat;
  background-size: 8%;
}
.search-input-group{
  width: 100%;
  height: 60rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
}
.search-input{
  min-height: 40rpx;
  height: 40rpx;
  font-size: 12px;
}

主页

我们需要在pages下创建如下目录：

根据我们的图片可知我们需要引入组件中的搜索组件以及视频组件。
1.index.wxml

<search isnavigator="{{true}}" position="{{center}}" bindtap="showSearch"></search>
<listView title="电影" items="{{movies}}" moreurl="/pages/list/list?type=movie" type="movie"></listView>
<listView title="电视剧" items="{{teleplay}}" moreurl="/pages/list/list?type=tv" type="tv"></listView>
<listView title="综艺" items="{{variety}}" moreurl="/pages/list/list?type=tvshow" type="tv"></listView>

2.在index.json中引入组件

"usingComponents": {
    "search": "/componets/search/search",
    "listView": "/componets/listView/listView",
    "userComment": "/componets/userComment/userComment"
  }

接下来我们需要编写如下来个组件

listView组件

1.wxml文件

<!--componets/listView/listView.wxml-->
<view class='module-group'>
  <view class='module-top'>
    <view class='module-title'>{{title}}</view>
    <navigator url="{{moreurl}}" class='module-more'>更多</navigator>
  </view>
  <scroll-view class='module-scroll-view' scroll-x="{{true}}">
    <itemBox wx:for="{{items}}" wx:key="{{item.title}}" item="{{item}}" itemurl="/pages/detail/detail?type={{type}}&id={{item.id}}"></itemBox>
  </scroll-view>
</view>

2.wxss

.module-group{
  padding: 40rpx;
  background-color: #161827;
}
.module-group .module-top{
  font-size: 36rpx;
  display: flex;
  justify-content: space-between;
}
.module-top .module-title{
  color: #fff;
}
.module-top .module-more{
  color: #fff;
}
.module-scroll-view{
  margin-top: 40rpx;
  margin: 15rpx;
  width: 100%;
  height: 400rpx;
  color: #fff;
  white-space: nowrap;
}

3.json
这里引入了itemBox组件

 "component": true,
  "usingComponents": {
    "itemBox": "/componets/itemBox/itemBox"
  }

4.js中
在properties中写入方法

// componets/listView/listView.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: ""
    },
    moreurl: {
      type: String,
      value: ""
    },
    items: {
      type: Array,
      value: []
    },
    type: {
      type: String,
      value: ""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },
  //  组件生命周期声明对象
  lifetimes: {
    // 组件生命周期函数-在组件实例进入页面节点树时执行
    // attached: function () {
    //   this.setData({
    //     obj:getApp().globalData.listData
    //   })
    // }
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

itemBox

1.wxml

<!--componets/itemBox/itemBox.wxml-->
<navigator wx:if="{{item}}" class='item-navigator' url="{{itemurl}}">
  <view class='item-group'>
    <view class='thumbnail-group'>
      <image class='thumbnail' src='{{item.cover.url}}'></image>
    </view>
    <view class='item-title'>{{item.title}}</view>
    <star rate="{{item.rating.value}}" starSize="25" fontSize="25"></star>
  </view>
</navigator>
<view wx:else class="item-navigator"></view>

2.css样式

/* componets/itemBox/itemBox.wxss */
image{
  height: 68rpx;
  width: 102rpx;
  border-radius: 10rpx;
}
.item-navigator{
  width: 200rpx;
  margin-right: 20rpx;
  display: inline-block;
}
.item-navigator .item-group{
  width: 100%;
  padding: 18rpx;
}
.item-group .thumbnail-group{
  width: 100%;
  height: 284rpx;
}
.thumbnail-group .thumbnail{
  width: 100%;
  height: 100%;
}
.item-group .item-title{
  font-size: 22rpx;
  text-align: center;
  margin-top: 20rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 20rpx;
}

3.json
引用了星星组件的方法。

"component": true,
  "usingComponents": {
    "star": "/componets/star/star"
  }

4.js

// componets/itemBox/itemBox.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    item: {
      type: Object,
      value: {}
    },
    itemurl: {
      type: String,
      value: ""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },
  //  组件生命周期声明对象
  lifetimes: {
    // 组件生命周期函数-在组件实例进入页面节点树时执行
    attached: function () {
      // console.log(this.properties.item)
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {

  }
})

userComment

1.wxml

<!--componets/userComment/userComment.wxml-->
<view class='comment-group'>
  <view class='left-comment'>
    <image class="avatar" src="{{item.user.avatar}}"></image>
  </view>
  <view class='right-comment'>
    <view class='username-rate'>
      <text class='username'>{{item.user.name}}</text>
      <star rate="{{item.rating.value*2}}" starsize="30" isText='{{false}}'></star>
    </view>
    <view class="release-time">{{item.create_time}}</view>
    <view class='content'>{{item.comment}}</view>
  </view>
</view>

2 css修饰

.comment-group{
  display: flex;
  justify-content: flex-start;
  padding-top: 40rpx;
}
.comment-group .left-comment{
  width: 70rpx;
  margin-right: 20rpx;
}
.left-comment .avatar{
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}
.comment-group .right-comment{
  flex: 1;
}
.right-comment .username-rate{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.username-rate .username{
  font-size: 36rpx;
  margin-right: 20rpx;
}
.release-time{
  color: #b3b3b3;
  font-size: 32rpx;
  margin-top: 10rpx;
}
.content{
  font-size: 32rpx;
  color: #353535;
  margin-top: 10rpx;
}

3js方法：

// componets/userComment/userComment.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    item: {
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

4.json：
这里又引用了星星的组件方法。

  "component": true,
  "usingComponents": {
    "star": "/componets/star/star"
  }

start组件

1.wxml

<!--componets/star/star.wxml-->
<view class="starBox">
  <image style="width: {{starSize}}rpx;height: {{starSize}}rpx;" wx:for="{{lightStar}}" src="/images/x3.png" />    
  <image style="width: {{starSize}}rpx;height: {{starSize}}rpx;" wx:for="{{halfStar}}" src="/images/x2.png" />    
  <image style="width: {{starSize}}rpx;height: {{starSize}}rpx;" wx:for="{{grayStar}}" src="/images/x1.png" />    
  <text wx:if="{{isText}}" style="color:{{fontColor}};font-size:{{fontSize}}rpx;margin-left:5rpx">{{ratetext}}</text>
</view>

2.json中加入：“component”: true,
3.js

// componets/star/star.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 评分
    rate:{
      type:Number,
      value: 5.3
    },
    //星星大小rpx
    starSize:{
      type:Number,
      value: 30
    },
    // 是否显示文字
    isText:{
      type:Boolean,
      value: true
    },
    // 评分文字颜色
    fontColor:{
      type:String,
      value: '#FFB712'
    },
    // 评分文字大小rpx
    fontSize:{
      type:Number,
      value: 30
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
  },
  //  组件生命周期声明对象
  lifetimes: {
    // 组件生命周期函数-在组件实例进入页面节点树时执行
    attached: function () {
      this.updateRate();
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    updateRate: function () {
      var that = this;
      var rate = this.properties.rate; //评分
      var intRate = parseInt(rate);    //将输入的评分取整
      var light = parseInt(intRate / 2);  //计算亮着的星星，评分除以二后取整
      var half = intRate % 2;   //半星的计算就是取整后的评分取余
      var gray = 5 - light - half; //灰色星星的计算
      var lights = [];
      var halfs = [];
      var grays = [];
      for (var i = 1; i <= light; i++) {
        lights.push(i)
      }

      for (var i = 1; i <= half; i++) {
        halfs.push(i)
      }

      for (var i = 1; i <= gray; i++) {
        grays.push(i)
      }
      // toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
      var ratetext = rate && rate > 0 ? rate.toFixed(1) : "未评分"
      this.setData({
        lightStar: lights,
        halfStar: halfs,
        grayStar: grays,
        ratetext: ratetext
      })
    }
  }
})

css:
/* componets/star/star.wxss */
.starBox{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

最后还有点击搜索跳转之后的页面

有历史记录。

在组件下：

1.wxml

<!--componets/searchItem/searchItem.wxml-->
<view class="searchItemBox" wx:for="{{listData}}">
  <image src="{{item.pic.normal}}" mode="aspectFill"></image>
  <view class="right">
    <view style="color:#fff;font-size:25rpx">{{item.title}}</view>
    <view style="font-size: 28rpx;color: 	#A9A9A9;">{{item.rating.value}}分/{{item.pubdate}}</view>
  </view>
</view>

2.css样式

/* componets/searchItem/searchItem.wxss */
.searchItemBox {
  width: 100vw;
  height: 13vh;
  box-sizing: border-box;
  padding: 10rpx 20rpx;
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #dcdcdc;
}

.searchItemBox image {
  width: 80rpx;
  height: 100rpx;
  margin-right: 20rpx;
}

.searchItemBox .right {
  width: 60vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: column;
  line-height: 60rpx;
}

3.json中引入： “component”: true,
4.js

// componets/searchItem/searchItem.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    listData:{
      type: Object,
      value:{}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

我们可以看到我们所有的组件js中定义的方法几乎相同，都是通过定义type和value来获取传过来的值并显示在页面上的。