微信小程序wepy框架入门教程-底部导航栏效果（五）

文档

• wepy快速指南
• 小程序框架wepy开发文档
• wepy开源
• wepy官方文档

---

wepy是腾讯自己开发的框架，作用主要是提高开发者的开发效率，采用了类似使用了vue的代码书写风格，开发者可以熟练的上手小程序开发。

先上效果图

1：新建四个界面
在components
底下新建四个wepy文件
分别是
message 消息列表界面

<template>
  <view class="me">
   消息列表界面
  </view>
</template>
<script>
  import wepy from 'wepy';
  export default class Me extends wepy.component {
    components = {
    }
    methods = {
    };
  }
</script>

contact联系人界面

<template>
  <view class="me">
    联系人界面
  </view>
</template>
<script>
  import wepy from 'wepy';
  export default class Me extends wepy.component {
    components = {
    }
    methods = {
    };
  }
</script>

discovery发现界面

<template>
  <view class="me">
   发现界面
  </view>
</template>
<script>
  import wepy from 'wepy';
  export default class Me extends wepy.component {
    components = {
    }
    methods = {
    };
  }
</script>

me我的主页

<template>
  <view class="me">
   我的主页
  </view>
</template>
<script>
  import wepy from 'wepy';
  export default class Me extends wepy.component {
    components = {
    }
    methods = {
    };
  }
</script>

2:编写index界面代码

<style type="scss">
  .tab_item {
    height: 100%;
  }
  page, .body{
    height: 100%;
    font-family: '\5FAE\8F6F\96C5\9ED1', arial;
    background-color: #f0eff5;
  }
</style>
<template>
  <view class="body">
    <view class="tab_item tab_message" hidden="{{currentTab != 0}}">
      <message />
    </view>
    <view class="tab_item tab_contact" hidden="{{currentTab != 1}}">
      <contact />
    </view>
    <view class="tab_item tab_discovery" hidden="{{currentTab != 2}}">
      <discovery />
    </view>
    <view class="tab_item tab_me" hidden="{{currentTab != 3}}">
      <me />
    </view>

    <tab :active.sync="currentTab" />
    <toast />
  </view>
</template>

<script>
  import wepy from 'wepy';
  import Message from '../components/message';
  import Discovery from '../components/discovery';
  import Contact from '../components/contact';
  import Me from '../components/me';
  import Tab from '../components/tab';
  import Toast from 'wepy-com-toast';

  export default class Index extends wepy.page {
    config = {
      'navigationBarTitleText': 'wepy - 微信',
      'navigationBarTextStyle': 'white',
      'navigationBarBackgroundColor': '#3b3a40'
    };

    components = {
      message: Message,
      discovery: Discovery,
      me: Me,
      contact: Contact,
      tab: Tab,
      toast: Toast
    };

    data = {
      currentTab: 0
    };

    methods = {
    };

    onShow() {
      this.currentTab = 0;
      this.$invoke('message', 'loadMessage');
    }

    showToast(name) {
      let promise = this.$invoke('toast', 'show', {
        title: `${name}`,
        img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/star.png'
      });

      promise.then((d) => {
        console.log('toast done');
      });
    }
  }
</script>

3：新建images文件夹，准备图标

4:在components底下新建tab.wpy
编写代码

<style type="scss">
  $fontcolor: #7b7b7b;
  $activecolor: #13b113;
  .tab {
    color: $fontcolor;
    position: fixed;
    bottom: 0;
    height: 100rpx;
    width: 100%;
    border-top: 1px solid #dad9d6;
    background-color: #f7f7f7;
    font-size: 24rpx;
    white-space: nowrap;
    .tab_item {
      &.active {
        color: $activecolor;
      }
      display: inline-block;
      width: 25%;
      text-align: center;
    }
    .icon {
      width: 60rpx;
      height: 60rpx;
      display: block;
      margin: auto;
    }
    .title {
      padding-top: 6rpx;
      display: block;
    }
  }
</style>
<template>
  <view class="tab">
    <view class="tab_item tab_message{{active == 0 ? ' active' : ''}}" @tap="change(0)">
      <image class="icon" src="../images/message{{active == 0 ? '_active' : ''}}.png"></image>
      <text class="title">微信</text>
    </view>
    <view class="tab_item tab_contact{{active == 1 ? ' active' : ''}}" @tap="change(1)">
      <image class="icon" src="../images/contact{{active == 1 ? '_active' : ''}}.png"></image>
      <text class="title">通讯录</text>
    </view>
    <view class="tab_item tab_discovery{{active == 2 ? ' active' : ''}}" @tap="change(2)">
      <image class="icon" src="../images/discovery{{active == 2 ? '_active' : ''}}.png"></image>
      <text class="title">发现</text>
    </view>
    <view class="tab_item tab_me{{active == 3 ? ' active' : ''}}" @tap="change(3)">
      <image class="icon" src="../images/me{{active == 3 ? '_active' : ''}}.png"></image>
      <text class="title">我</text>
    </view>
  </view>
</template>
<script>
  import wepy from 'wepy';
  export default class Tab extends wepy.component {
    props = {
      active: {
        twoWay: true
      }
    };
    data = {
    };
    methods = {
      change (idx, evt) {
        this.active = +idx;
      }
    };
    onLoad () {
    }
  }
</script>

5：一切准备就绪，编译

6：打开微信开发者工具，查看效果（开篇已经给出动态图效果）

github:https://github.com/wangxiaoting666/wepy-myproject

---

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。