转载

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
正文到此结束
Loading...