微信小程序商业级开发实战周记（二）

流行

主要功能

该页面主要展示比较热门的书籍，需要实现的功能如下：
1、书籍基本信息显示
需要显示的有标题、序号以及发布时间
.wxml文件

<view class="container">
  <view class="index-container">
    <text class="plain">No.</text>
    <text class="index">{{_index}}</text>
    <view class="vertical-line"></view>
  </view>
    <view class="date"> 
     <text class="month">{{month}}</text> 
    <text class="year">{{year}}</text>
   </view>  
</view>

.js文件

Component({
  properties: {
    index:{
      type: Number,
      observer:function(newVal, oldVal, changedPath){
        if (newVal < 10) {
          this.setData({
            _index: '0' + newVal
          })
        }
      }
    }
  },

  /**
   * 组件的初始数据, data 的值也会被页面绑定, 但data的值不可以从组件外部设置
   * 使用text组件会出现双文字的情况
   */
  data: {
      months:[
        '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月',
        '十二月'
      ],
      year:Number,
      month:String,
      _index:String
  },

  ready:function(){
    let date = new Date()
    let month = date.getMonth()
    let year = date.getFullYear()
    this.setData({
      month:this.data.months[month],
      year:year
    })
  },

  methods: {
  }
})

2、点赞及分享功能
使用已有功能，点赞及跳转至推送页面

书单

主要功能

搜索页面和展示页面的切换，以及历史搜索和热门搜索的展示
.wxml文件

<view class="container">
  <view class="header">
    <view class="search-container">
      <image class="icon" src="images/search.png" />
      <input placeholder-class='in-bar' placeholder='书籍名' class='bar' bind:confirm="onConfirm" value="{{q}}" auto-focus="true" />
      <image bind:tap="onDelete" class="cancel-img" src="images/cancel.png" />
    </view>
    <view class='cancel' bind:tap="onCancel">取消</view>
  </view>
  <view wx:if="{{!finished}}">
    <view class="history">
      <view class="title">
        <view class="chunk"></view>
        <text>历史搜索</text>
      </view>
      <view class="tags">
        <tag-cmp bind:tapping="onConfirm" wx:for="{{historyKeys}}" text="{{item}}" />
      </view>
    </view>
    <view class="history hot-search">
      <view class="title">
        <view class="chunk"></view>
        <text>热门搜索</text>
      </view>
        <view class="tags">
          <tag-cmp bind:tapping="onConfirm" wx:for="{{hotKeys}}" text="{{item}}" />
        </view>
    </view>
  </view>
  <view class="books-container" wx:if="{{finished}}">
    <block wx:for="{{dataArray}}" wx:key="{{item.id}}">
      <book-cmp show-like="{{false}}" book="{{item}}" class="book" />
    </block>
  </view>
  <loading-cmp class="loading" wx:if="{{loading}}" />
  <loading-cmp class="loading-center" wx:if="{{loadingCenter}}" />
  <text wx:if="{{empty}}" class="empty-tip">没有搜索到书籍</text>
</view>

此文仅为个人对一周学习的记录，侵删