vue+cordova开发横屏游戏的坑
游戏本身就不说了，使用vue开发的，比较好上手，后期如果需要对接数据，再引入vuex，vue-resource，下面整理下开发中遇到的坑
屏幕适配
游戏的需求是要可以横屏+全屏，所以适配方案选择缩放viewport的方案，然后设计稿尺寸多大就做成多大。需要注意的是ios在切换横竖屏的时候， window.screen.width 值是不会变的，需要动态改变下。
<meta name="viewport" content="target-densitydpi=device-dpi,width=1334"> <script> function changeViewport() { var u = navigator.userAgent; var isiOS = !!u.match(//(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (window.orientation == 90 || window.orientation == -90 && isiOS) { var windowWidth = window.screen.height; } else { var windowWidth = window.screen.width; } if (windowWidth < 1334) { var ratio = windowWidth / 1334; var metas = document.querySelectorAll("meta[name=viewport]"); for (var i in metas) { if (typeof metas[i].setAttribute == 'function') { metas[i].setAttribute('content', 'width=1334, initial-scale=' + ratio + ', maximum-scale=' + ratio + ''); } } } } window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", changeViewport, false); </script>
自动横屏+全屏
考虑到浏览器有的不能隐藏地址栏，并且不能自动切换到横屏，所以用cordova封装成app。游戏是单页的，所以选择vue。整体的目录结构如下。
-app -build -config -src -hooks -platforms -plugins -www config.xml 根目录是cordova工程，app下是vue工程，用cordova-cli和vue-cli初始化。修改 config.xml 文件让app支持默认横屏+全屏
<platform name="android"> <allow-intent href="market:*" /> <preference name="Fullscreen" value="true" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> <preference name="EnableViewportScale" value="true"/> </platform> <preference name="Orientation" value="landscape" />
修改app/config/index.js，把vue的打包路径改为www
index: path.resolve(__dirname, '../../www/index.html'), assetsRoot: path.resolve(__dirname, '../../www'),
修改绝对路径为相对路径
vue默认打包是绝对路径的，cordova是不支持的，github的gh-pages也不支持，所以改成相对路径，修改app/config/index.js文件
assetsPublicPath: '',
修改app/build/webpack.prod.conf.js
vue: { loaders: utils.cssLoaders({ sourceMap: config.build.productionSourceMap, extract: false }) },
css3兼容
vue-loader可以配置支持 autoprefixer ，但是只支持单文件， @import 导入的没效果，还没找到解决方案。
正文到此结束
热门推荐
相关文章
近期评论
-
你这基本没有更新呀，最近文章显示还是2019年的文章。不符合要求哈
-
关键词：慕云博客 链接：https://www.lilun.me 描述：分享原创文字的个人博客
-
-
-
可以提供一下源码吗
-
不是商业站，鸡娃学习笔记
-
-
-
-
听他们说很厉害的样子
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
