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

• 静态页面
• 流行
• 书单
• 喜欢

依照教学视频的建议，尝试依照设计图及已有DEMO制作测试项目

静态页面

主要分为三个页面：流行、书单、喜欢

流行

classic.wxml

<view class='container'>
  <view class='header'>
    <epsoide-cmp class="epsoide" index="{{classic.index}}" />
    <view class="like-container">
      <like-cmp bind:like="onLike" class="like" like="{{like}}" count="{{count}}" />
        <img-btn-cmp class="share-btn" open-type="share">
          <image class="share" slot="img" src="/images/icon/share.png" />
        </img-btn-cmp>
    </view>
  </view>
  <movie-cmp wx:if="{{classic.type==100}}" img="{{classic.image}}" content="{{classic.content}}" />
  <music-cmp wx:if="{{classic.type==200}}" img="{{classic.image}}" content="{{classic.content}}" src="{{classic.url}}" title="{{classic.title}}" />
  <essay-cmp wx:if="{{classic.type==300}}" img="{{classic.image}}" content="{{classic.content}}" />
  <navi-cmp class="navi" latest="{{latest}}" first="{{first}}" catch:left="onNext" catch:right="onPrevious" title="{{classic.title}}" />
</view>

classic.wxss

.header{
  width:100%;
  display: flex;
  flex-direction: row;
  height:50px;
  align-items: center;
  justify-content: space-between;
  border-top :1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
}

.container{
  width:100%;
  display:flex;
  flex-direction: column;
  align-items: center;
}

.like{
  margin-right: 30rpx;
  margin-top:12rpx;
}

.like-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-right:30rpx;
}

.share-btn{
  margin-top:28rpx;
  margin-left:10rpx;
}

.share{
  /* padding:10rpx; */
  width:40rpx;
  height:40rpx;
}

.navi{
   position: absolute;  
   bottom: 40rpx; 
}

.epsoide{
   margin-left:10px; 
   margin-top:7px;
}

书单

book.wxml

<view>
<view wx:if="{{!searchPanel}}" class="container">
   <view class="header">
     <view class='box' bind:tap="onActivateSearch">
      <image src="/images/icon/search.png" />
      <text>搜索书籍</text>
    </view> 
  </view> 
   <view class="sub-container">
    <image class="head-img" src="/images/book/quality.png" />
    <view class="books-container">
      <block wx:for="{{books}}">
        <book-cmp book="{{item}}" class="book" />
      </block>
    </view>
  </view> 
</view>
  <search-cmp more="{{more}}" wx:if="{{searchPanel}}" bind:cancel="onCancel" />  
</view>

book.wxss

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width:100%;
}

 .sub-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
  margin-top:100rpx;
  /* z-index:0;  */
} 

.books-container{
  margin-top:10rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 90rpx 0 90rpx;
  justify-content: space-between;
}

.books-container book-cmp{
  margin-bottom: 30rpx;
}

.box{
  display:flex; 
  flex-direction: row;
  justify-content: center;
  align-items: center; 
  border-radius: 50px;
  background-color: #f5f5f5;
  height: 34px;
  width:700rpx;
  color:#999999;
}

.header{
  position: fixed; 
  background-color: #ffffff;
  height:100rpx;
  width:100%;
  border-top:1px solid #f5f5f5;
  border-bottom:1px solid #f5f5f5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-shadow:0 0 3px 0 #e3e3e3; 
  z-index: 99;
}

.head-img{
  width:106rpx;
  height:34rpx;
  margin-top:40rpx;
}

.box image{
  margin-right:10px;
  width:14px;
  height:14px;
  margin-bottom:-2px;
}

喜欢

my.wxml

<view class="container">
  <image src="/images/my/my@bg.png" class="bg"></image>
  <img-btn-cmp wx:if="{{!hasUserInfo}}" open-type="getUserInfo" class="avatar-position" bind:getuserinfo="onGetUserInfo">
     <image slot="img" class="avatar" src="/images/my/my.png" /> 
  </img-btn-cmp>
  <view class="avatar-container avatar-position">
    <image src="{{userInfo.avatarUrl}}" wx:if="{{hasUserInfo}}" class="avatar" />
    <open-data wx:if="{{hasUserInfo}}" type="userNickName"></open-data>
  </view>
  <view class="about-container">
    <view bind:tap="onJumpToAbout" class="about-us">
      <image src="/images/my/about.png" />
      <text class="description">关于我们</text>
    </view>
    <view class="about-us">
      <text class="book-num">{{myBooksCount}}</text>
      <text class="description">喜欢的书</text>
    </view>
  </view>
  <view class="like-container">
    <image class=".headline" src="/images/my/like.png" />
    <view class="preview-container">
      <block wx:for="{{classics}}">
        <previe-cmp bind:tap="onPreviewTap" class="preview" classic="{{item}}" />
      </block>
    </view>
  </view>
</view>

<image bind:tap="onStudy" class="study" src="/images/my/study.png"></image>

my.wxss

.container{
  display:flex;
  flex-direction:column;
  align-items: center;
}

.bg{
  width:750rpx;
  height:574rpx;
}

.avatar-position{
  position:absolute; 
  top:255rpx;
}

.my-img{
  width:120rpx;
  height:120rpx;
}

.avatar-container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar{
  width:120rpx;
  height:120rpx;
  border-radius: 50%;
  /* margin-bottom: 10rpx; */
}

.about-container{
  padding: 0 100rpx;
  width:550rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position:absolute;
  top:440rpx;
}

.about-us image{
  width:34rpx;
  height:34rpx;
}
.preview-container{
  margin-top:30rpx;
  display: flex;
  flex-direction: row;
  padding:0 30rpx;
  flex-wrap: wrap;
  justify-content: space-between;
}

.preview{
  margin-bottom: 30rpx;
}
.about-us{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  
}

.book-num{
  font-size:36rpx;
  color:#000000;
}

.description{
  font-size:24rpx;
  color:#999999;
}

.about-container > view:nth-child(2){
  margin-top: -5rpx;
}

.like-container{
  /* margin-top:30rpx; */
  width:100%;
  margin-top: -13rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
}

.headline{
  margin-top:30rpx;
  width:97rpx;
  height:42rpx;
}

.study{
  width:88rpx;
  height:88rpx;
  position: absolute;
  top:40rpx;
  right:45rpx;
}

.test{
  background-color: red !important;
  border-radius: 15px !important;
}

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