这是最近的一个h5项目。由于某些原因，无法发布预览地址。不过这不是重点，没有demo看文章不行吗？哈哈哈~文中提到的pixi就是pixiJs，精灵是pixiJs中的一个概念。阅读这篇文章假设你已经知道这些东西，但是这篇文章中关于这个库的内容并不多。如果觉得本文对自己有帮助，就让它去收藏夹吃灰吧；觉得没用或者写的不好的，可以留下脚印；如果大家觉得我的代码或者文字有什么可以改进的地方，我们可以通过多人运动来交流~现在开始正经的东西：适配方案本项目使用rem适配配置方案是通过计算设置html的font-size属性装置宽度/设计稿宽度之比，以达到适配的目的。代码如下：functionsetSize(){//设备宽度letdeviceWidth=window.screen.width;//设计稿宽度constbaseValue=750;//HTML字体大小=(设备宽度/设计稿宽度)*100document.documentElement.style.fontSize=(deviceWidth/baseValue)*100+'px';}//DOM树加载完成后，执行window.addEventListener("DOMContentLoaded",function(){setSize();})//当屏幕变化时执行window.addEventListener("resize",function(){setSize();})setSize();预加载资源的预加载资源使用preloadjs中文官网：http://www.createjs.cc/preloadjs用法也极其简单：varqueue=newwindow.createjs.LoadQueue(true);queue.on("完成",this.allLoadComplete);//触发queue.on("fileload",this.aloneLoadComplete);//触发queue.on("progress",this.fileProgress);//加载进度queue.loadManifest(allImg);//要加载的资源数组queue.load();图片导入多的问题怎么解决这里用到了webpackapi:require.context，这个技术在项目需要导入很多资源的时候很有必要，如果想掌握可以看这篇使用require.context的文章自动导入ES模块-yeyan1996.本文不深入讨论如何实现改造。如何改变性格也是一个问题。尝试之后发现可以直接切换精灵的贴图这样就可以实现this.personContainers[key].children.map((item,index)=>{if(item.type==type){item.texture=loadSources[name].texture}})piximultiplecontainers在pixi中，如果要动态改变一个精灵或容器的等级，不能只改变一个，还需要降低其他的等级不相关的元素。例如：personContainers.map((item,i)=>{item.zIndex=0;//将不相关元素的级别设置为最低if(index==i){item.zIndex=99;//设置目标元素的级别达到最高}}）精灵移动的touchend事件我不知道它为什么会失败。我的解决方案是：给精灵touchendoutside绑定一个touchendoutside事件：当触摸开始并且对象被释放时触发html2canvas。图片不要用background来设置图片，全部换成img标签，可以大大提高图片的清晰度。ios键盘会将页面向上推，而不是自动向下。问题描述：移动端ios键盘弹出后，会把页面往上推，输入完成后，页面不会自动下来。解决方案：document.body.addEventListener('focusout',function(){window.scrollTo(0,0);});当检测到body中的某个元素失去焦点时，页面会显示Rollupfocusout：focusout事件在元素即将失去焦点时触发focusout事件和blur事件的主要区别在于后者不冒泡——MDN如何监听textarea的输入本项目使用的是多行输入框textarea，直接添加监听事件后发现什么都没有给label...，后来找到解决办法：this.$refs.textarea.addEventListener('input',e=>{console.log(e.target.value);//textareainputtext},false)滑动加载与获取滑动加载的关键在于，如果页面滑动到底部，就会请求数据。页面底部如何返回数据需要提前和后台沟通。滑动到页面底部的条件：滚动条到顶部的距离（document.body.scrollTop）+窗口文档显示区域的高度（window.innerHeight）>=实际高度文档的(document.body.scrollHeight)这里有一个坑，关于获取文档的实际高度：document.body.scrollHeight在手机上可以获取文档的实际高度，但是在chrome中获取的高度是0document.documentElement.scrollHeight在chrome中可以正常获取，但是在手机上获取到的高度为0，此时需要先判断当前设备是手机还是pc然后是否获取,NoNoNo，有一种优雅的写法：//获取文档/移动端的实际高度varbodyHeight=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);不丢掉最基本的东西，这里应该鼓掌[啪啪啪]vscode回到上一个编辑点当代码写的像又臭又长的意大利式代码时，你需要调试某个功能，发现另一个功能有问题。需要回头，很难登顶。后来发现这个放手快捷键-返回上一个/下一个编辑点：Alt+←/→(windows)去掉iphonex的小尾巴。每个人都称这个东西为胡子。我更喜欢叫它小尾巴~，就是iPhonex下的那个东西。了解更多请点击：https://imweb.io/topic/5baa38...我会在这里谈谈我如何使用它。添加viewport-fit=cover
