六、逻辑代码开发

逻辑代码部分主要包括三部分：

• 调用数据接口，返回数据，渲染视图。
• 组件内事件交互。
• 组件之间相互通信。

在message组件中需要拉取聊天列表信息并且渲染，代码如下：

<template>
    <view class="message">
        <block wx:for="{{list}}" wx:for-index="index" wx:for-item="item">
            <view class="item" bindtap="select" data-wepy-params="{{item.id}}">
                <view class="header">
                    <image class="img" src="{{item.icon}}"></image>
                </view>
                <view class="content">
                    <view class="name">{{item.name}}</view>
                    <view class="lastmsg">{{item.lastmsg}}</view>
                </view>
            </view>
        </block>
    </view>
</template>
<script>
    import wepy from 'wepy';
    import api from '../common/api';

    export default class Message extends wepy.component {

        data = {
            list: []
        };
      
        methods = {
            select (evt, id) {
                wx.navigateTo({url: 'chat?id=' + id});
            }
        };
        async loadMessage () {
            this.list = await api.getMessageList();
            this.$apply();
        }
    }
</script>

message组件中只有一个数据源list，通过自定义方法loadMessage调用api模块获取聊天列表信息进行渲染，因为是在自定义的异步方法中进行数据绑定，所以需要执行this.$apply()让视图渲染。同时，组件响应页面的tap事件select，选中聊天之后跳转至chat页面。在chat页面进行聊天之后，返回到index页面时，需要message页面再次调用接口数据，重新渲染聊天列表页，这就需要在index页面的onShow方法中去让message组件重新调用loadMessage方法。这里可以选用 wepy 提供的$boradcast方法或者$invoke方法，代码如下：

// src/pages/index.wpy
onShow() {
    this.$invoke('message', 'loadMessage');
}

这样就完成了message组件的所有功能，进入页面渲染列表，点击消息进入聊天页面。

在index页面中加入状态currentTab来标记当前选中tab。并提供切换tab事件。

src/pages/index：

<template>
    <view class="body">
        <view class="tab_item tab_message" hidden="{{currentTab != 0}}">
            <component id="message"></component>
        </view>
        <view class="tab_item tab_contact" hidden="{{currentTab != 1}}">
            <component id="contact"></component>
        </view>
        <view class="tab_item tab_discovery" hidden="{{currentTab != 2}}">
            <component id="discovery"></component>
        </view>
        <view class="tab_item tab_me" hidden="{{currentTab != 3}}">
            <component id="me"></component>
        </view>
        <component id="tab"></component>
    </view>
</template>

<script>
    //....
    changeTab (idx) {
        this.currentTab = +idx;
        this.$apply();
    }
</script>

然后在tab组件中的每个tab中添加bindtap="change" data-wepy-params="{{index}}"事件。

<script>
    import wepy from 'wepy';

    export default class Tab extends wepy.component {
        data = {
            active: 0,
        };
        methods = {
            change (evt, idx) {
                this.active = +idx;
                this.$parent.changeTab(idx);
            }
        };
    }
</script>

在tab组件中，直接通过$parent去调用父组件的changeTab方法，来达到实现tab切换效果：

至此已完成大致雏形，更多代码还请参考提供源代码。