转载

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 导入的没效果，还没找到解决方案。

原文 https://github.com/zhouwenbin/blog/issues/17

正文到此结束

所属分类：编程技术

本文标签： 目录需求 value ORM js GitHub XML IOS https CSS Select http git 数据 Document src ip UI Android build ssl 配置 HTML 开发 root map App onchange web tar CTO list plugin
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

vue+cordova开发横屏游戏的坑

屏幕适配

自动横屏+全屏

修改绝对路径为相对路径

css3兼容

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流