cocos微信小游戏开发-http请求-使用微信云函数-toast-loading-动态加载图片-添加触摸事件-微信分享-label点击事件-背景音乐&音效-程序活动状态判断-性能优化

cocos开发微信小游戏相关-《益智推箱》

扫码查看功能，有需要可直接提问

Cocos Creator 3.4 用户手册
cocos creator基本操作
微信开发文档|云函数

1. http请求

let that = this;
let url = "";
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
       
    }
};
xhr.open("get", url, true);
xhr.send();

2. 使用微信云函数

//判断平台环境避免报错
if (cc.sys.platform === cc.sys.WECHAT_GAME) {
	//初始化云函数环境
    wx.cloud.init({env: 'cloud1-xxxxxxxxx'})
    //直接调用云函数
    wx.cloud.callFunction({
	   name: 'queryUser',
	   data:{
	       appId: window.user.appId
	   }
	}).then(res => {
	  
	}).catch(err => {
	   console.error(err)
	})
}

3. toast

使用示例： Toast(“没有更多数据了”,1500)
如下图所示先制作一个toast预制组件放在resources文件夹下
然后导入下方js即可

export function Toast(text,time) {
    var CanvasNode = cc.find('Canvas');
    if( !CanvasNode ) { cc.console( 'find Canvas error' ); return; }
    const wx = window['wx'];//避开ts语法检测
    const info  = wx.getSystemInfoSync();//立即获取系统信息
    const w  = info.screenWidth;//屏幕宽
    const h  = info.screenHeight;//屏幕高
    var onResourceLoaded = function(errorMessage, loadedResource )
    {
        if( errorMessage ) { console.log( 'Prefab error:' + errorMessage ); return; }
        if( !( loadedResource instanceof cc.Prefab ) ) { console.log( 'Prefab error' ); return; }
        var newMyPrefab = cc.instantiate( loadedResource );
        let toastBg = cc.find('background',newMyPrefab).getComponent(cc.Graphics);
        let toastText =  cc.find("text",newMyPrefab);



        toastText.getComponent(cc.Label).string = text;
        CanvasNode.addChild( newMyPrefab );
        toastBg.roundRect(
            -( toastText.width + 80)/2,
            -(toastText.height+40)/2,
            toastText.width + 80,
            toastText.height+40,
            (toastText.height+40)/2
        );
        toastBg.fillColor = cc.Color.BLACK;
        toastBg.fill()
        let timer = setTimeout(function () {
            newMyPrefab.removeFromParent();
            newMyPrefab.destroy();
            clearTimeout(timer);
            timer = null;
        },time)
    };
    cc.loader.loadRes('toast', onResourceLoaded );
}

3. loading加载动画

使用实例：Loading.show(); 或 Loading.hide();
与toast组件一样先制作loading预制组件放在resources文件夹下（通过动画编辑器添加旋转动画）
然后添加下方js即可使用

let Loading ={
    ele:null,
    hideFlage:false,
    show(){
        Loading.hideFlage = false;
        var CanvasNode = cc.find('Canvas');
        if( !CanvasNode ) { cc.console( 'find Canvas error' ); return; }
        var onResourceLoaded = function(errorMessage, loadedResource )
        {
            if( errorMessage ) { console.log( 'Prefab error:' + errorMessage ); return; }
            if( !( loadedResource instanceof cc.Prefab ) ) { console.log( 'Prefab error' ); return; }
            var newMyPrefab = cc.instantiate( loadedResource );

            if(!Loading.hideFlage){
                CanvasNode.addChild( newMyPrefab );
                Loading.ele = newMyPrefab;
            }else{
                newMyPrefab.destroy();
            }
        };
        //通过名称加载资源
        cc.loader.loadRes('loading', onResourceLoaded );
    },
    hide(){
        if(Loading.ele){
            Loading.ele.removeFromParent();
            Loading.ele.destroy();
            Loading.ele = null;
        }
        Loading.hideFlage = true;
    }
}

4. 动态加载图片

cocos编辑器中新增一个layout组件命名为gameBn，然后添加下方js即可

//获取组件
if(this.gameBn == null) this.gameBn = cc.find('Canvas/gameBn').getComponent(cc.Sprite)
//加载远程图片
cc.assetManager.loadRemote(window.bgUrlBase+ '_400x240.jpg', function (err, texture) {
    var sprite  = new cc.SpriteFrame(texture, cc.rect(0,0,400,240));
    that.gameBn.spriteFrame = sprite; //设置精灵组件图片资源
});

5. 添加触摸事件

   addTouchEvents(){
        let that = this;
        let figureLocation = null;
        this.node.on('touchstart', function (event) {
            figureLocation = event.getLocation();
        }, this);
        this.node.on('touchend', function (event) {
            let endLocation = event.getLocation();
            if(Math.abs(figureLocation.x - endLocation.x) > Math.abs(figureLocation.y - endLocation.y)){
                if((figureLocation.x - endLocation.x) < -50){
                    // console.log("右滑")
                }
                else if((figureLocation.x - endLocation.x) > 50){
                    // console.log("左滑")
                }
            }else{
                if((figureLocation.y - endLocation.y) < -50){
                    // console.log("上滑")
                }
                else if((figureLocation.y - endLocation.y) > 50){
                    // console.log("下滑")
                }
            }
        }, this);
    },

6. 微信分享

if (cc.sys.platform === cc.sys.WECHAT_GAME) {
   var titString =  '益智推箱';
   wx.shareAppMessage({
       title: titString,
       // imageUrl: data.url,
       query: '分享',
   })
}

7. label点击事件

let oneSayLabel = cc.find("Canvas/mainBg/oneSay").getComponent(cc.Label);
this.oneSayLabel.node.on('touchend', function(){
    //do something       
}, this)

8. 背景音乐&音效

在resources文件夹新增music文件夹然后下添加bg_music.mp3音频文件

window.bgMusic=null;
if(cc.sys.platform === cc.sys.WECHAT_GAME){
	// 需要频繁播放时设置 useWebAudioImplement:true
	window.bgMusic = wx.createInnerAudioContext({useWebAudioImplement:true});
        window.moveMusic = wx.createInnerAudioContext({useWebAudioImplement:true});
        
        cc.resources.load("music/bg_music", cc.AudioClip, null, function (err, clip) {
             //背景音乐循环播放
             window.bgMusic.src =clip.url;
             window.bgMusic.loop = true;
             window.bgMusic.play();
			
			//音效多次播放
			//window.bgMusic.stop();
        	//window.bgMusic.play();
         });
}

9. 程序活动状态判断

 onLoad () {
     cc.game.on(cc.game.EVENT_HIDE, function(){
         // console.log("游戏进入后台");
     },this);
     cc.game.on(cc.game.EVENT_SHOW, function(){
         // console.log("重新返回游戏");
     },this);
 },

性能优化：

不需要的节点及时销毁

 //销毁当前节点
 this.node.destroy();
 //销毁所有子节点
 this.node.destroyAllChildren()