微信小程序首页代码,有导航栏,轮播图

下面是一个简单的微信小程序首页代码，包括了导航栏和轮播图。请注意，这只是一个示例代码，实际情况下需要根据自己的需求进行修改和完善。

wxml代码：

<view class="container">
  <view class="header">
    <view class="logo">小程序名称</view>
    <view class="search">搜索框</view>
  </view>
  <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <swiper-item>
      <image src="轮播图1"></image>
    </swiper-item>
    <swiper-item>
      <image src="轮播图2"></image>
    </swiper-item>
    <swiper-item>
      <image src="轮播图3"></image>
    </swiper-item>
  </swiper>
  <view class="entry">
    <view class="item">功能入口1</view>
    <view class="item">功能入口2</view>
    <view class="item">功能入口3</view>
    <view class="item">功能入口4</view>
  </view>
  <view class="recommend">
    <view class="title">热门推荐</view>
    <view class="list">
      <view class="item">推荐内容1</view>
      <view class="item">推荐内容2</view>
      <view class="item">推荐内容3</view>
      <view class="item">推荐内容4</view>
    </view>
  </view>
  <view class="footer">
    <view class="tab">底部导航栏1</view>
    <view class="tab">底部导航栏2</view>
    <view class="tab">底部导航栏3</view>
  </view>
</view>

样式代码：

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.search {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 15px;
  text-align: center;
  line-height: 30px;
}

.swiper {
  height: 200px;
}

.entry {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

.item {
  width: 80px;
  height: 80px;
  border: 1px solid #ccc;
  border-radius: 10px;
  text-align: center;
  line-height: 80px;
}

.recommend {
  padding: 10px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.list {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  text-align: center;
  line-height: 100px;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}
.tab {
  font-size: 16px;
  font-weight: bold;
}

JS代码：

Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  },
})

这段代码中，我们使用了微信小程序提供的swiper组件来实现轮播图，使用了flex布局来实现页面的排版和布局，同时使用了微信小程序提供的Page方法来实现页面的逻辑处理。