对于微信小游戏JS开发的一点整理

对于微信小游戏JS开发的一点整理

我像大家一样，遇到了不懂的喜欢在csdn上搜索解决问题，这篇文章参考了csdn上一些博主的文章，故标为转载，主要是参考博主：陈田田。

tips

代码包大小上限为4MB;
只支持js

js文件夹

打开微信给的小游戏的样例我们可以发现三个主要的js文件夹
分别是:
.game.js文件； （*必要 小程序入口文件）
.game.json文件； （*必要 配置文件）
.project.config.json文件；

GAME.JSON

主要是放一些游戏的配置文件，个人觉得除了横竖屏以外没有特殊需求的话保留其默认值即可
deviceOrientation String 屏幕方向，portrait为竖屏，landscape为横屏 （可变横屏）
showStatusBar Boolean 是否显示状态栏
networkTimeout Number 网络请求的超时时间
networkTimeout.request Number wx.request的超时时间
networkTimeout.connectSocket Number wx.connectSocket的超时时间
networkTimeout.uploadFile Number wx.uploadFile的超时时间
networkTimeout.downloadFile Number wx.downloadFile的超时时间
workers String 多线程Worker的配置项

API

canvas

//于game.js中编写
wx.createCanvas()接口 var canvas=wx.creatCanvas()
2d渲染：var context=canvas.getContext(“2d”);
颜色 context.fillStyle=‘red’;
大小 context.fillRect(0,0,100,100); （左上角100*100）
（上屏convas）

Image

wx.createImage()接口 var image = wx.createImage();
img的src属性
示例：
image.onload = function(){
console.log(image.width, image.height); 打印其宽高
context.drawImage(image,0,0);
}
image.src=’logo.png’; 指定image路径

多个canvas

var offScreenCanvas = wx.createCanvas(); //（离屏canvas）
var offContext = offScreenCanvas.getContext(‘2d’);
offContext.fillStyle = ‘green’;
offContext.fiiRect(0,100,100,100);
context.drawImage(offscreenCanvas,o,o); //将离屏canvas绘制到canvas上；

动画

setInterval()；
setTimeout()；
requestAnimationFrame(）；
似乎有一个通过wx.函数修改回调函数频率以降低能耗的方法；

微信小游戏提供的触摸事件

touchstart手指触摸 touchmove手指触摸后移动 touchcancel手指触摸动作被打断，如弹窗和来电
touchend手指触摸动作结束 tap手指触摸后离开 longtap手指触摸后后，超过350ms离开
wx.onTouchStart()
wx.onTouchMove()
wx.onTouchEnd()
wx.onTouchCancel()

示例：
wx.onTouchStart(function(e){
console.log(e.touches);
})

游戏允许的文件类型

png jpg jpeg gif svg js json cer obj dae fbx mtl stl 3ds mp3 pvr wav plist ttf
fnt gz ccz m4a mp4 bmp atlas swf ani part proto bin sk mipmaps txt zip tt
map ogg slik dbmv etc lmat lm ls lh lani lav lsani ltc

adapter

//不使用wx api而用bom和dom api的情况。
weapp-adapter对浏览器环境的模拟
游戏引擎接入微信小程序 require(‘./weapp-adapter’);

创建音频对象

let audio = wx.createInnerAudioContext()
audio.src = ‘audio/bgm.mp3’;
audio.play();
在IOS系统上，默认遵循静音键设置。
如果希望在静音时也能播放声音，可以设置obeyMuteSwitch为false。

设置autoplay和loop属性可以自动播放和循环播放音频，一般适用于背景音乐。
var bgm = wx.createInnerAudioContext();
bgm.autoplay = true;
bgm.loop = true;
bgm.src = ‘audio/bgm.mp3’;