标签：实战 flex direction 微信 周记 display width margin top

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

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

依照教学视频的建议，尝试依照设计图及已有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;
}

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

标签：实战,flex,direction,微信,周记,display,width,margin,top
来源： https://blog.csdn.net/GUANYI887/article/details/104906266

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。