【微信小程序】小茶书项目

1. app.json代码： 

"pages": [

    "pages/home/home",

    "pages/auction/auction",

    "pages/promulgate/promulgate",

    "pages/news/news",

    "pages/mine/mine",

    "pages/index/index",

    "pages/logs/logs",

    "pages/redirect/redirect",

    "pages/bind/bind",

    "pages/login/login",

    "pages/goods/goods",

    "pages/publish/publish",

    "pages/detail/detail",

    "pages/telphone/telphone"

  ],

  "window": {

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#FF8247",

    "navigationBarTitleText": "小茶书",

    "navigationBarTextStyle": "black"

  },

  "tabBar": {

    "selectedColor": "#EE5C42",

    "list": [

      {

        "pagePath": "pages/home/home",

        "text": "首页",

        "iconPath": "pages/images/1.png",

        "selectedIconPath": "pages/images/1.1.png"

      },

      {

        "pagePath": "pages/auction/auction",

        "text": "拍卖",

        "iconPath": "pages/images/2.png",

        "selectedIconPath": "pages/images/2.2.png"

      },

      {

        "pagePath": "pages/promulgate/promulgate",

        "text": "发布",

        "iconPath": "pages/images/3.png",

        "selectedIconPath": "pages/images/3.3.png"

      },

      {

        "pagePath": "pages/news/news",

        "text": "消息",

        "iconPath": "pages/images/4.png",

        "selectedIconPath": "pages/images/4.4.png"

      },

      {

        "pagePath": "pages/mine/mine",

        "text": "我的",

        "iconPath": "pages/images/5.png",

        "selectedIconPath": "pages/images/5.5.png"

      }

    ]

  },

  "style": "v2",

  "sitemapLocation": "sitemap.json"

}

2.首页

 wxml代码:

<view class="container">

  <view class="top-view">

    <view class="item">

      <image src="../images/6.png"></image>

      <text>精品文章</text>

    </view>

    <view class="item">

      <image src="../images/7.png"></image>

      <text>小视频</text>

    </view>

    <view class="item">

      <image src="../images/8.png"></image>

      <text>名人堂</text>

    </view>

    <view class="item">

      <image src="../images/9.png"></image>

      <text>观点说</text>

    </view>

  </view>



  <view class="middle-view">

    <view class="mood1">

      <image src="../images/10.png"></image>

      <view class="author">

        <view class="left">

          <image src="../images/touxiang.png"></image>

          <view class="name">枫叶堂堂主</view>

        </view>

        <view class="right">

          <image src="../images/28.png"></image>

          <text>20</text>

        </view>

      </view>

      <view class="Content">小茶书图册</view>

    </view>

    <view class="mood">

      <image src="../images/11.png"></image>

      <view class="author">

        <view class="left">

          <image src="../images/touxiang.png"></image>

          <view class="name">枫叶堂堂主</view>

        </view>

        <view class="right">

          <image src="../images/28.png"></image>

          <text>20</text>

        </view>

      </view>

      <view class="Content">乾隆年间青花瓷</view>

    </view>

  </view>

</view>

wxss代码：

.item image{

  width: 100rpx;

  height: 100rpx;

  border-radius: 50rpx;

}

.top-view{

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  padding: 40rpx;

}

.item{

  display: flex;

  flex-direction:column;

  align-items:center;

  font-size: 30rpx;

  font-weight: 550;

}

.menu1 {

  display: flex;

  flex-direction: row;

  justify-content: space-around;

}

.mood image{

  width: 350rpx;

  height: 200rpx;

}

.mood1 image{

  width: 35