vue+cordova开发横屏游戏的坑

[zhouwenbin]

项目地址

https://github.com/zhouwenbin/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，修改app/build/webpack.base.conf.js文件

  vue: {
    loaders: utils.cssLoaders(),
    autoprefixer: {
      browsers: ["Android >= 2.3", "ChromeAndroid > 1%", "iOS >= 7"]
    }
  }

但是只支持单文件，@import导入的没效果，还没找到解决方案。