cocoscreator+js客户端需要掌握的一些基础内容

遇到一个新的引擎，一定需要掌握以下内容：
创建基础对象；
获得基础对象；
设置基础对象；
点击坐标区域的判断；
事件传递和派发接收；
创建数据结构；
创建时间对象；
服务器请求和回调的数据解析；
打印调试语句；
动作序列调用；
存储数据到本地；
下面总结一下cocos+js的内容。

1.普通文本对象
在cocosctrator中先拖拽创建一个普通文本对象strText，在其父layer节点对应的js文件中，进行如下的声明：

properties: {
    strText:{
        default: null,
        type:cc.Node,
    },
}

这样，在这个js文件内，设置其内容的代码如下：

this.strText.getComponent(cc.Label).string = str;

2.普通静态图片对象
在cocosctrator中先拖拽创建一个普通图片对象fangZuoBi_bg，没有必要在properties进行声明（也可以声明，那么调用就用this.name），不声明的话，在js文件内的调用方式如下：

this.node.getChildByName("fangZuoBi_bg");

3.普通按钮对象
在cocosctrator中先拖拽创建一个普通按钮对象lahei_btn，在这个引擎中按钮设置方式有多种类型，有多个图片去表示按钮点击前后效果的，也有单张图表现的，具体方式请看cocoscreator的api文档。这里找个简单的例子，在sprite属性设置好单张图片之后，为button属性设置点击事件的效果onClickCancle，在js文件内填写该函数。

4.普通滑动列表
在cocosctrator中先拖拽创建一个普通滑动列表对象对象m_gameListScrollView，设置好方向属性。首先在代码中声明：

properties: {
    m_gameListScrollView:{
        default:null,
        type:cc.ScrollView,
    },
},

然后去设置滑动列表的内容和滑动列表的宽高：

addGameList:function()
{
    var gameList = require('HallControl').getInstance().getGameList();
    var nListSize = gameList.length;
    var columnCount = 2;
    var itemW = 280;
    var nButtonX = -250;
    var nButtonY = -130;
    var offsetX = 300 * 2 / columnCount;
    var offsetY = 260 * (columnCount - 1);
    var totalWidth = 0;
    var scrollViewSize =  this.m_gameListScrollView.node.getContentSize();
    for(var i=1;i<=nListSize;i++)
    {
        var buttonNode = new cc.Node('buttonNode');
        var  ccBtutton = buttonNode.addComponent(cc.CCButton);
        var gameInfo = gameList[i-1];
        ccBtutton.setCCButton('hallRes/gameicon/'+gameInfo.m_sEn,null,this.onClickButton.bind(this));
        ccBtutton.setObjectData(gameInfo);
        this.m_gameListScrollView.content.addChild(buttonNode);
        
        if(columnCount == 1)
        {
           offsetY = scrollViewSize.height / 2 - itemW/ 2;
        };
       
        buttonNode.x=nButtonX+ (Math.floor((i - 1) / columnCount) * offsetX - 20);
        buttonNode.y=nButtonY+(offsetY - (i + 1) % columnCount * offsetY);
        totalWidth = buttonNode.getPositionX()*2 +itemW
    } 
    this.m_gameListScrollView.content.width = totalWidth;

},

5.点击坐标区域
首先在onload中添加监听的事件，cocoscreator中集成了不少的Node.EventType，可以去查询api了解更多内容。
在事件的回调中，获得这个点击到的坐标，然后在目标区域上通过convertToNodeSpace函数转化坐标系，最后通过rectContainsPoint判断是否存在这个区域内。
这里范例代码使用了fangZuoBi_bg这块图片上的内容，实际上如果是活的整个的layer的坐标，直接使用this.node.convertToNodeSpace即可。

onLoad:function(){
    this.node.on(cc.Node.EventType.TOUCH_START, this.onTouch, this);
},

onTouch:function(event){
    var poistion = event.touch.getLocation();
    var locationInNode = this.node.getChildByName("fangZuoBi_bg").convertToNodeSpace(poistion);    
    var s = this.node.getChildByName("fangZuoBi_bg").getContentSize();
    var rect = cc.rect(0, 0, s.width, s.height);
    if (cc.rectContainsPoint(rect, locationInNode)) {
        
    }
    else{         
        this.node.active = false;
    }
},

6.事件派发
cocoscreator有两种事件派发的方法，一种是emit另外一种是dispatchEvent，后者可以做事件传递，尽量还是使用后者。
事件使用on来监听，off关闭监听。

onLoad: function () {
this.node.on('mousedown', function ( event ) {
    console.log('Hello!');
});

_sayHello: function () {
    console.log('Hello World');
},
  
onEnable: function () {
    this.node.on('mousedown', this._sayHello, this);
},

start: function () {
    this.node.emit('mousedown', {
        msg: 'Hello, this is Cocos Creator',
    });
},

this.node.dispatchEvent( new cc.Event.EventCustom('mousedown', true) );

7.表的结构
使用new Array()创建一个数组，然后调用push去插入一个数据

var stEat = new Array();
this.m_stSceneData = {}
this.m_stSceneData.cbCurrentCard = 0
stEat.push(this.m_stSceneData.cbCurrentCard)
pEatCase.push(stEat);

也可以创建一个{}然后用字母表示来给这个表添加元素。

8.时间调用
首先使用 cc.director.getScheduler() 来获取系统定时器，然后通过unscheduleCallbackForTarget和scheduleCallbackForTarget分别对计时器进行取消和定义

startTimer:function(overTimeFunc, nDowntime){
    var scheduler = cc.director.getScheduler();
    scheduler.unscheduleCallbackForTarget(this, this.m_timerUpdate)
    var timeLabel = this.node.getChildByName("gameBg").getChildByName("diceNode").getChildByName("timeLabel");
    timeLabel.setLocalZOrder(10);
    timeLabel.getComponent(cc.Label).string = "";
    timeLabel.active = true;
    var strLeftTime = "";
    var update = function(){
        if(nDowntime < 0){
            timeLabel.getComponent(cc.Label).string = "";
            if (overTimeFunc){
                overTimeFunc();
            }
            scheduler.unscheduleCallbackForTarget(this, update)
            return;
        }

        strLeftTime = strLeftTime = nDowntime;
        if(nDowntime < 10){ 
            strLeftTime = "0" + strLeftTime;
        }
        timeLabel.getComponent(cc.Label).string = strLeftTime;
        nDowntime = nDowntime - 1;           
    };
    
    this.m_timerUpdate = update;
    scheduler.scheduleCallbackForTarget(this, update, 1, cc.macro.REPEAT_FOREVER, 0, false);
},

9.服务器请求和回调数据的解析
一般短连接的使用方法：使用 new XMLHttpRequest() 来创建一个连接对象，也可以通过 cc.loader.getXMLHttpRequest() 来创建，两者效果一致。
有关下面代码中几个接口的描述请看https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest 这个MSDN的文档。
onreadystatechange当readyState属性改变时会调用它。
readyState请求的5种状态4是指DONE (请求完成) 整个请求过程已经完毕。
status该请求的响应状态码 (例如, 状态码200 表示一个成功的请求).只读.
open初始化一个请求。
setRequestHeader给指定的HTTP请求头赋值.在这之前,你必须确认已经调用 open() 方法打开了一个url.
timeout是一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数
send发送请求.
我检查了代码，只有微信支付和获得签名这两处代码调用了GET请求，其他都使用封装过后的POST。post和get的区别可以参考这个文章https://www.cnblogs.com/logsharing/p/8448446.html。

var WebRequest = cc.Class({
    _callBack: null,
    getData: function (url, data, callback, post) {
        this._callBack = callback;
        var self = this;
        var xhr = cc.loader.getXMLHttpRequest();
        // Simple events
        ['loadstart', 'abort', 'error', 'load', 'loadend', 'timeout'].forEach(function (eventname) {
            xhr["on" + eventname] = function () {
                if (eventname == 'abort' || eventname == 'error' || eventname == 'timeout') {
                    if (self._callBack != null) {
                        self._callBack(false, "");
                    }
                }
            };
        });

        // Special event
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
                if (self._callBack != null) {
                    // var XmlToJson = require('XmlToJson');
                    // var xmlToJson = new  XmlToJson();
                    // var jsonData = JSON.stringify(xmlToJson.parse(xhr.responseText));                    
                    self._callBack(true, xhr.response);                    
                }
            }
        };
        xhr.timeout = 5000;//5 seconds for timeout
        if (post == null || post == false) {
            xhr.open("GET", url + data, true);
            if (cc.sys.isNative) {
                xhr.setRequestHeader("Accept-Encoding", "gzip,deflate");
            }
            xhr.send();
        }
        else {
            xhr.open("POST", url);
            //set Content-type "text/plain" to post ArrayBuffer or ArrayBufferView
            // xhr.setRequestHeader("Content-Type","text/plain");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // Uint8Array is an ArrayBufferView
            //xhr.send(new Uint8Array([1,2,3,4,5]));
            xhr.send(data);
        }

    },
});

有关数据解析：下面是我们的xml转json的办法和具体代码解析方式。

 var onResponse = function(success, data){
    if(success){
        var XmlToJson = require('XmlToJson');           
        var xmlToJson = new  XmlToJson();       
        var jsonData = JSON.stringify(xmlToJson.parse(data));  
        var jsonObject = JSON.parse(jsonData);

        var root = jsonObject;

        var property = {};
        property.RetCode = root.retcode 
        vBeReportList.push(property);
    }
    else{
        console.log("HallWebRequest.requestCheatReport load xml data fail！");
        return;
    }
}

var XmlToJson=cc.Class({
    // Changes XML to JSON
    parseXmlToJson:function(xmlStr) {
        // Create the return object
        var obj = {};
        if (xml.nodeType == 1) { // element
            // do attributes
            if (xml.attributes.length > 0) {
            obj["@attributes"] = {};
                for (var j = 0; j < xml.attributes.length; j++) {
                    var attribute = xml.attributes.item(j);
                    obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
                }
            }
        } else if (xml.nodeType == 3) { // text
            obj = xml.nodeValue;
        }
        // do children
        if (xml.hasChildNodes()) {
            for(var i = 0; i < xml.childNodes.length; i++) {
                var item = xml.childNodes.item(i);
                var nodeName = item.nodeName;
                if (typeof(obj[nodeName]) == "undefined") {
                    obj[nodeName] = xmlToJson(item);
                } else {
                    if (typeof(obj[nodeName].length) == "undefined") {
                        var old = obj[nodeName];
                        obj[nodeName] = [];
                        obj[nodeName].push(old);
                    }
                    obj[nodeName].push(xmlToJson(item));
                }
            }
        }
        return obj;
    },
});

XmlToJson.prototype.setXml = function(xml) {
    if(xml && typeof xml == "string") {
        this.xml = document.createElement("div");
        this.xml.innerHTML = xml;
        this.xml = this.xml.getElementsByTagName("*")[0];
    }
    else if(typeof xml == "object"){
        this.xml = xml;
    }
};
XmlToJson.prototype.getXml = function() {
    return this.xml;
};
XmlToJson.prototype.parse = function(xml) {
    this.setXml(xml);
    return this.convert(this.xml);
};
XmlToJson.prototype.convert = function(xml) {
    if (xml.nodeType != 1) {
        return null;
    }
    var obj = {};
    obj.xtype = xml.nodeName.toLowerCase();
    var nodeValue = (xml.textContent || "").replace(/(\r|\n)/g, "").replace(/^\s+|\s+$/g, "");
    
    if(nodeValue && xml.childNodes.length == 1) {
        obj.text = nodeValue;
    }
    if (xml.attributes.length > 0) {
        for (var j = 0; j < xml.attributes.length; j++) {
            var attribute = xml.attributes.item(j);
            obj[attribute.nodeName] = attribute.nodeValue;
        }
    }
    if (xml.childNodes.length > 0) {
        var items = [];
        for(var i = 0; i < xml.childNodes.length; i++) {
            var node = xml.childNodes.item(i);
            var item = this.convert(node);
            if(item) {
                items.push(item);
            }
        }
        if(items.length > 0) {
            obj.items = items;
        }
    }
    return obj;
};

10.打印语句

console.log
cc.log

都可以

11.动作序列
看下面代码感受下，其它方法去查看api吧

onSendChat:function(){
    var node = new cc.Node();

    var callFunc1 = cc.callFunc(()=>{
        timerSprite.spriteFrame = this.TimerAssets[2];
    }, this)

    var delay1 = cc.delayTime(1);

    var callFunc2 = cc.callFunc(()=>{
        timerSprite.spriteFrame = this.TimerAssets[1];
    }, this)

    var delay2 = cc.delayTime(1);

    var callFunc3 = cc.callFunc(()=>{
        timerSprite.spriteFrame = this.TimerAssets[0];
    }, this)

    var delay3 = cc.delayTime(1);

    var callFunc4 = cc.callFunc(()=>{
        node.removeFromParent()
        this.quickChatBtn.node.active = true;
    }, this)

    var sequence = cc.sequence(callFunc1, delay1, callFunc2, delay2, callFunc3, delay3, callFunc4);
    node.runAction(sequence);
},

12.本地数据存储
localStorage可以保存相关数据

var imei = cc.sys.localStorage.getItem("imei");
cc.sys.localStorage.setItem("imei", imei);