# cocos_creator_proj_base

**Repository Path**: mrmriacle/cocos_creator_proj_base

## Basic Information

- **Project Name**: cocos_creator_proj_base
- **Description**: cocos creator项目基础类库，包括socket, http网络连接，资源加载与管理，ui加载与管理，热更新实现机制，定时器，事件系统，tween动画工具, 音效播放，常用控件如recycle listview，recycle scrollview等
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 7
- **Created**: 2023-05-15
- **Last Updated**: 2023-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# cocos_creator_proj_base
 cocos creator项目基础类库，包括socket, http网络连接，资源加载与管理，ui加载与管理，事件系统，音效播放，常用控件如listview，scrollview等
 
 使用说明
 
 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));
   ```