caochao / cocos_creator_proj_base

cocos creator项目基础类库，包括socket, http网络连接，资源加载与管理，ui加载与管理，热更新实现机制，定时器，事件系统，tween动画工具, 音效播放，常用控件如recycle listview，recycle scrollview等

cocos_creator_proj_base

cocos creator项目基础类库，包括socket, http网络连接，资源加载与管理，ui加载与管理，事件系统，音效播放，常用控件如listview，scrollview等

A cocos creator project framework, including socket, http, asset loading, ui loading, event system, audio play and some widget like recycle list view.

使用说明

1.ListView, 循环滚动列表，固定尺寸item, 屏幕可见范围外item会回收等待下次复用。支持横向，竖向，多行多列。支持追加删除数据。支持上右下左padding, 支持设置item锚点。

* 初始化，传入各种参数，设置item class
```
 @property(cc.Node)
 scrollView: cc.Node = null;

 private _listView:ListView;

 on_show(...params)
 {
     const maskNode = this.scrollView.getChildByName("mask");
     const content = maskNode.getChildByName("content");
     const item_tpl = content.getChildByName("item");
     const scrollview = this.scrollView.getComponent(cc.ScrollView);
     const mask = maskNode.getComponent(cc.Mask);
     this._listView = new ListView({
         scrollview,
         mask,
         content,
         item_tpl,
         item_class:UnlockNewSongItem,
         column:1,
         gap_y:8,
         item_anchorX:0.5,
         item_anchorY:0.5,
         direction:ListViewDir.Vertical,
     });
     this._listView.set_data(this._songs);
 }
```

* 实现列表item回调方法
```
export class UnlockNewSongItem extends ListViewItem 
{
    private _bg:cc.Sprite;
    private _txtSongName:cc.Label;
    private _txtAuthor:cc.Label;
    private _listenView:TrialListenView;

    onInit()
    {
        const node = this.node;
        this._txtSongName = node.getChildByName("songName").getComponent(cc.Label);
        this._txtAuthor = node.getChildByName("author").getComponent(cc.Label);

        this._listenView = new TrialListenView();
        this._listenView.addTo(node, 223, -151);
    }

    onUnInit()
    {
        this._listenView.destroy();
        this._listenView = null;
    }

    onSetData(songId:number, index:number)
    {
        const songCfg = appData.songLibrary.get(songId);
        if(!songCfg) return;
        
        //songname
        this._txtSongName.string = songCfg.name;
        this._txtAuthor.string = songCfg.author;

        this._likeView.setVisible(true);
        this._likeView.setLike(localData.songInfo.isFavoriteSong(songId));

        //试听
        if(songCfg.hasMp3) {
            const listenState = Mp3Player.getInst().getListenState(songId);
            this._listenView.setState(listenState || SongListenState.Idle);
        }
        else {
            this._listenView.setState(SongListenState.None);
        }
    }

    onRecycle(songId:number)
    {
        this._listenView.setState(SongListenState.None);
    }

    onTouchEnd(touchPos:cc.Vec2, songId:number, index:number)
    {
        if(this._listenView.handleTouchEnd(touchPos, songId)) {
            return;
        }
        if(this._likeView.handleTouchEnd(touchPos, songId, source)) {
            return;
        }
    }
}
```

2.ScrollView, 循环滚动列表，支持不定尺寸的item, 屏幕可见范围外item会回收等待下次复用。支持横向，竖向, 但不支持多行多列。支持追加删除数据。支持上右下左padding, 支持设置item锚点。

* 初始化，传入各种参数，设置item class
```
@property(cc.Node)
scrollView:cc.Node = null;

private initSongsView()
{
    const maskNode = this.scrollView.getChildByName("mask");
    const content = maskNode.getChildByName("content");
    const item_tpl = content.getChildByName("item");
    const scrollview = this.scrollView.getComponent(cc.ScrollView);
    const mask = maskNode.getComponent(cc.Mask);
    const templates:ScrollItemTemplate[] = [
        {key:PushViewItemType.PushSongItem, node:item_tpl, item_class:LatestSongPushItem},
    ];
    this._songsView = new ScrollPage({
        scrollview,
        mask,
        content,
        item_templates:templates,
        gap_x:-30,
        padding_left:124,
        padding_right:124,
        padding_top:200,
        direction:ScrollDirection.Horizontal,
        cb_host:this,
        on_turning:this.onTurning,
        on_scrolling:this.onScrolling,
        item_anchorX:0.5,
        item_anchorY:0.5,
    });
    const itemDatas:ScrollItemData[] = this._songs.map(data => {
        return {
            key:PushViewItemType.PushSongItem,
            data,
        }
    });
    this._songsView.set_data(itemDatas);
}
```

* 实现列表item回调方法
```
export class LatestSongPushItem extends ScrollViewItem
{
    private _defaultCover:cc.Node;
    private _coverSprite:cc.Sprite;
    private _coverSpriteFrame:cc.SpriteFrame;
    private _listenView:TrialListenView;

    onInit(key:PushViewItemType)
    {
        const node = this.node;
        this._defaultCover = node.getChildByName("defaultCover");
        this._coverSprite = node.getChildByName("cover").getComponent(cc.Sprite);

        this._coverSpriteFrame = new cc.SpriteFrame();
        this._coverSpriteFrame.name = "LatestSongPushItemSpriteFrame";

        this._listenView = new TrialListenView({
            prefabPath:"prefabs/misc/trialListen2",
            downloadingTexure:"xinge_tanchuang_shiting_02",
            listeningDbPath:"main/xinge_shiting_dh",
            listeningDbArmature:"xinge_shiting_dh",
            listeningDbAnim:"xinge_shiting_dh",
            listeningDbPosX:0,
            listeningDbPosY:0,
        });
        this._listenView.addTo(node, 89, -331);
    }

    onUnInit(key:PushViewItemType)
    {
        this._listenView.destroy();
        this._listenView = null;

        this._coverSpriteFrame.clearTexture();
        // this._coverSpriteFrame.destroy();
        this._coverSpriteFrame = null;
    }

    private _currSongId:number;
    onSetData(key:PushViewItemType, songId:number, index:number, is_mesure:boolean):[number, number]
    {
        if(is_mesure) {
            return [this.node.width, this.node.height];
        }

        const songCfg = appData.songLibrary.get(songId);
        if(!songCfg) return [this.node.width, this.node.height];

        this._defaultCover.active = !songCfg.cover;
        this._coverSprite.node.active = !!songCfg.cover;
        if(songCfg.cover) {
            this._currSongId = songId;
            ImageUtil.getInst().setExternalSpriteFrame(songCfg.cover, songId, (tag, tex) => {
                if(tag == this._currSongId && cc.isValid(this.node) && cc.isValid(this._coverSpriteFrame)) {
                    this._coverSpriteFrame.setTexture(tex);
                    this._coverSprite.spriteFrame = this._coverSpriteFrame;
                }
            });
        }

        //试听
        if(songCfg.hasMp3) {
            const listenState = Mp3Player.getInst().getListenState(songId);
            this._listenView.setState(listenState || SongListenState.Idle);
        }
        else {
            this._listenView.setState(SongListenState.None);
        }

        return [this.node.width, this.node.height];
    }

    onRecycle(key:PushViewItemType, songId:number, is_mesure:boolean)
    {
        if(is_mesure)
        {
            return;
        }
        this._coverSprite.spriteFrame = null;
        this._listenView.setState(SongListenState.None);
    }

    onTouchEnd(key:PushViewItemType, songId:number, touchPos:cc.Vec2, index:number)
    {
        this._listenView.handleTouchEnd(touchPos, songId);
    }
}
```

* 追加数据, 传入key及item数据
```
const notify:pb.IRoomChatNotify = resp.roomChatNotify;
const key:number = notify.sender.acc == appdata.user.acc ? MsgType.RIGHT_CHAT : MsgType.LEFT_CHAT;
let data:ScrollItemData = {key:key.toString(), data:notify};
this.scview.append_data(data);
```

3.TabView, 多标签界面。支持按需加载。

* 初始化TabView, 传入tab根节点, tab页父节点, tab页class及对应prefab, tabbtn节点路径及文本.
```
this._tabView = new TabView({
    tabContainer: this.tabContainer,
    pageContainer: this.pageContainer,
    pages:[
        {
            key:TabKeys.LatestSongs,
            btnPath:"tab1",
            btnTxt:i18n.t("新歌"),
            resPath:"prefabs/pages/latestSongView",
            clazz:LatestSongView,
        },
        {
            key:TabKeys.MainSongs,
            btnPath:"tab2",
            btnTxt:i18n.t("音乐"),
            resPath:"prefabs/pages/mainSongView",
            clazz:MainSongView,
        },
    ],
    onTabSelected:this.onTabSelected.bind(this),
});
```

* 实现tab页
```
export class MainSongView extends TabPage
{
    onInit()
    {
        //...
    }

    protected onBecameVisible()
    {
        //...
    }

    protected onBecameInvisible()
    {
        //...
    }
```

4.TweenUtil, 缓动工具

* 传入节点，用时，延时，要变动的属性, 曲线函数
```
let tween = TweenUtil.to({
    node:coin, duration:0.8, delay:delay, x:dest_pos.x, y:dest_pos.y, tweenFunc:TweenFunc.Sine.easeIn,
    onComplete:utils.gen_handler(this.on_fly_to_dest, this)
});
```
* 取消缓动
```
TweenUtil.kill(tween);
```

5.TimerMgr, 定时器

* 无限循环
```
TimerMgr.getInst().loop(0.1, utils.gen_handler(this.loop, this));
```
* 循环10次

TimerMgr.getInst().loopTimes(0.1, 10, utils.gen_handler(this.loopTimes, this));

• 延时0.2秒后再循环
• 0.2秒后再循环

TimerMgr.getInst().delayLoop(0.1, 0.2, utils.gen_handler(this.delayLoop, this));

• 延时0.2秒后招行一次
• 0.2秒后执行一次

TimerMgr.getInst().once(0.2, utils.gen_handler(this.once, this));