1.实现欢迎页效果

1.欢迎页

1.1配置页面路径

打开全局配置文件app.json,对页面地址进行配置
1)在"pages"中删除原有配置;
2)删除pages文件夹中的原有文件;
3)在app.json中配置 “pages/welcome/welcome”,
“pages/posts/post”
4)配置完成,ctr+s保存后,pages文件夹中会创建welcome和posts两个目录,每个目录都包含4个文件(WXML、WXSS、js、json)

1.2欢迎页结构

1.3欢迎页样式

/* pages/welcome/welcome.wxss */
.container {
  background-color: #b3d4db;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.container .avantar image {
  width: 200rpx;
  height: 200rpx;
  margin-top: 160rpx;
}

.container text {
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 100rpx;
}

.container .btn {
  border: 1px solid #405f80;
  width: 200rpx;
  height: 80rpx;
  border-radius: 5px;
  margin-top: 200rpx;
  text-align: center;
}

.container .btn text{
  font-size: 22rpx;
  font-weight: bold;
  line-height: 80rpx;
  color: #405f80;
}

1.4欢迎页配置

//pages/welcome/welcome.json
{
 //navigationBarBackgroundColor是设置页面顶部颜色
  "navigationBarBackgroundColor":"#b3d4db"
}

欢迎页配置效果

1.5欢迎页逻辑

主要实现从欢迎页面跳转到首页，由于首页有配置tab导航菜单，故用wx.switchTab来实现路由跳转

// pages/welcome/welcome.js
Page({
  onTap:function(){
    //页面跳转有返回按钮
    // wx.navigateTo({
    //   url: '../posts/post',
    // });

    //页面跳转无返回按钮:但是必须跳转到有tab导航栏的页面,否则报错
    wx.switchTab({
      url: '../posts/post',
    })
  }
})

欢迎页效果

2.首页post配置底部tab菜单

1)打开全局配置中的app.json文件;
2)在tabBar的list中配置tabbar切换;

//app.json文件
{
  "pages": [//配置页面路径
    "pages/welcome/welcome",
    "pages/posts/post"
  ],
  "window": {
    "backgroundTextStyle": "light",//配置小程序顶部导航条字体样式
    "navigationBarBackgroundColor": "#fff",//配置小程序顶部导航条颜色
    "navigationBarTitleText": "新闻",//配置小程序顶部导航条文字
    "navigationBarTextStyle": "black"//配置小程序顶部导航条文字颜色(只能填black/white)
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {//配置底部Tab切换
    "list": [{
              "pagePath": "pages/posts/post",//页面路径
              "text": "阅读",//Tab标题
              "iconPath": "./images/tab/yuedu.png",//未选择图标
              "selectedIconPath": "./images/tab/yuedu_hl.png"//选中后图标
             },
             {
              "pagePath": "pages/posts/post",
              "text": "电影",
              "iconPath": "./images/tab/dianying.png",
              "selectedIconPath": "./images/tab/dianying_hl.png"
            }]
  }
}

实现效果

3.swiper插件实现banner

3.1结构

该结构为微信小程序的swiper插件的结构
1)swiper标签配置轮播属性:autoplay、interval
2）swiper-item标签中放image标签（轮播图片）

<view>
<!-- 1)autoplay配置是否自动播放 2)indicator-dots配置是否显示切换条 3)interval配置切换间隔时间-->
<!-- 所有布尔值都要用双花括号{{}} 包裹,例如autoplay="{{true}}",否则双引号内只要有字符串就会被解读为true-->
  <swiper autoplay="{{true}}" indicator-dots="{{true}}" interval="5000">
    <swiper-item>
      <image src="../../images/iqiyi.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="../../images/vr.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="../../images/wx.png"></image>
    </swiper-item>
  </swiper>
</view>

3.2样式

/* pages/posts/post.wxss */
swiper,
swiper image{
  width: 100%;
  height: 600rpx;
}

实现效果