当前位置: 首页 > Web前端 > HTML5

你踩了多少次?微信H5小游戏开发的那些坑

时间:2023-04-04 23:34:17 HTML5

小游戏现在很火,很多团队也纷纷上线微信小游戏项目,在立项前期进行技术预研。但是从微信官方文档中,我们可以发现很多坑。一、运行环境的陷阱1、API兼容性1.1.网络APIBOM的核心是windows,它代表浏览器的一个实例。任何在网页中自定义的对象、变量或函数,都是以windows作为其全局对象。Dom的缺失意味着在使用http、websocket、本地存储等通信API时会出现问题。好在微信提供了这两个API的私有实现,我们只需要适配即可。适配的基本思路是检测是否运行在微信平台,然后利用JS动态语言特性动态改写BOMAPI。优缺点如下:1.优点是API调用方不需要做任何改动,适配成本几乎为0。不知道微信小游戏和浏览器运行环境的区别,它非常友好。2.缺点是会增加代码量,但是代码量增加带来的损失几乎可以忽略不计。这种适配方案非常划算,适配HTTP代码示例如下:1.2.微信的模块化微信小游戏提供了一个CommonJS风格的模块API,可以通过module.exports和exports导出模块,通过require导入模块。这与浏览器引入JS文件的方式相反,两者之间有一个隔离层。下面举个例子来说明模块化带来的问题。通常我们在浏览器上的js文件中使用一个自定义类,可以直接通过标签使用。但这在微信中是做不到的。API需要导入到一个对象中,使用的时候加上这个前缀。结果需要修改很多代码,那么如何避免加这个前缀呢?针对这种情况,解决方法是将所有需要对外使用的方法和对象动态附加到window对象上,稍微修改一下上面的代码。示例如下:工作流变化由于微信小游戏没有Dom和Bom,所以有很多依赖Dom和Bom的库不能直接使用,比如jquery。微信环境或多或少会引起我们工作流程的变化,使用第三方游戏开发引擎(如CocosCreateor/Egret/Laya)可以弥补这些问题带来的损失。二、资源限制1、每个小游戏允许上传的代码包总大小为4MB。方案一:压缩js文件,将图片资源放在服务器上进行预加载。方案二:使用第三方引擎的资源管理功能。2、微信小程序需要开发者服务器支持https和wss协议。解决方案:服务器启用HTTPS。有很多方法可以实现它。推荐使用Nginx反向代理。3.发布审核小游戏开发完成后,发布上线需要具备以下条件:1:服务器域名备案2:支持httpswss3:软件著作权证书复印件+盖章签名4:微信公众号平台账号和AppID5:开发者工具wechat_devtools_1.02.1803210_x646:游戏自查报告复印件+签名7:iOS开发账号(可选,没有则填空)8:游戏版本号(开通微信支付需要)9:企业开发者身份+公众号(需开通微信支付)