wepy底部导航栏效果

不念不忘少年蓝@ 2022-03-01 01:46 324阅读 0赞

### 文档 ###

*  [wepy快速指南][wepy]
 *  [小程序框架wepy开发文档][wepy 1]
 *  [wepy开源][wepy 2]
 *  [wepy官方文档][wepy 3]

--------------------

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

先上效果图

![267][]

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>

![1000][]

2:编写index界面代码

![1000 1][]

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

![263][]

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

![1000 2][]

5：一切准备就绪，编译

![646][]

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

![1000 3][]

github:[https://github.com/wangxiaoting666/wepy-myproject][https_github.com_wangxiaoting666_wepy-myproject]

--------------------

> 原文作者：祈澈姑娘 技术博客：[https://www.jianshu.com/u/05f416aefbe1][https_www.jianshu.com_u_05f416aefbe1]  
> 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。

*  关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

![70][]

[wepy]: https://tencent.github.io/wepy/document.html
[wepy 1]: https://www.w3cschool.cn/qdwzc/
[wepy 2]: https://github.com/Tencent/wepy
[wepy 3]: https://tencent.github.io/wepy/
[267]: /images/20220301/013f4d154f204a02b795c5bf629dc5ec.png
[1000]: /images/20220301/ef85477565a2481a9b47fb2cba97ecbe.png
[1000 1]: /images/20220301/e5ef64a27c2e48e48967303f55ed5a1b.png
[263]: /images/20220301/bfea4d45b5d845baa4f9d4917c1f02ed.png
[1000 2]: /images/20220301/6edcfc8e82844d988ccf946a8b66e7f7.png
[646]: /images/20220301/1a763c4df52b4eac9cf668c0c1c39d79.png
[1000 3]: /images/20220301/1540b11d0c794cd290a61d8a7dacff3c.png
[https_github.com_wangxiaoting666_wepy-myproject]: https://github.com/wangxiaoting666/wepy-myproject
[https_www.jianshu.com_u_05f416aefbe1]: https://link.jianshu.com?t=http%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttps%253A%2F%2Fwww.jianshu.com%2Fu%2F05f416aefbe1
[70]: /images/20220301/59e32dc3aa744dee87ad6ddff0870e50.png