六、逻辑代码开发

2018-06-17 11:52 更新

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

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

在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切换效果:


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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号