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:truewindow.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()

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

Unity3D游戏开发之使用AssetBundle和Xml实现场景的动态加载
各位朋友,大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是http://qinyuanpei.com/. 引言今天我想和大家聊聊在Unity3D中关于场景的动态加载的问题.众所周知在Unit ...
微信小游戏开发入门：示例代码介绍
什么是微信小游戏? 看前几天的科技新闻,微信中的"跳一跳"小游戏从去年12月发布,截至到今年3月份已经积累了3.9亿玩家,这是一个多么恐怖的数字,"跳一跳"游戏 ...
微信小游戏开发学习记录2
接上一篇:微信小游戏开发学习记录_寂静流年韶华舞的博客-CSDN博客_微信小游戏开发学习目录一.UI系统 1.基础渲染组件-精灵组件 (1)操作: (2)Sprite 属性 (3)渲染模式 2.L ...
动态加载子节点_微信小游戏开发之场景切换和常驻节点传递数据
主题场景切换场景间数据传递方式小游戏全局背景音效特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文档中有些知识点的 ...
微信小游戏开发教程-游戏实现1
微信小游戏开发教程-游戏实现1 概述微信开发者工具官方提供一个飞机大战的游戏Demo,这里我们不再使用这个demo,我们以FlappyBird为例,为了让读者更加容易理解. 源码 https://g ...
白鹭引擎正式支持微信小游戏开发
12月28日微信迎来更新,正式上线小游戏,并开放了小游戏开发文档和开发者工具.在微信发布新版本后,白鹭引擎立即添加了对于微信小游戏开发的支持,开发者只需要使用白鹭引擎的最新版本,通过使用白鹭引擎完整工 ...
《欢乐坦克大战》微信小游戏开发总结
<欢乐坦克大战>微信小游戏开发总结 <欢乐坦克大战>微信小游戏开发总结前言 <欢乐坦克大战>是一款支持3V3实时对战并首批参与上线的微信小游戏中的作品.因为该游戏 ...
白鹭引擎拉伸高度_答疑汇总|白鹭引擎架构师开源中国社区分享微信小游戏开发技巧...
原标题:答疑汇总|白鹭引擎架构师开源中国社区分享微信小游戏开发技巧 1月31日-2月6日,开源中国社区邀请白鹭引擎首席架构师王泽以"微信小游戏开发技巧分享"为主题,为广大开发者带来 ...
微信小游戏开发实战教程11-使用本地缓存
这是微信小游戏开发实战系列的第11篇. 本节主要内容:使用本地缓存来记录玩家的设置以及各种类型数据的本地缓存和读取操作. 如果你没有任何的游戏开发经验,欢迎阅读我的"人人都能做游戏" ...