Cordova 打包phaser3.0 iOS游戏

公司的项目是使用vue做前端的界面和逻辑，后面有一部分是使用phaser3.0 做了一个小游戏放到里面，然后整个项目打包成ios 和 android 项目。
其中遇到的几个问题总结一下，希望给有遇到同样问题困扰的人一个解决问题的方向：

1、vue界面和phaser界面的交互

这是我们最先面临的问题，我们需要数据的交互传递。
1、从vue界面传递到phaser游戏界面：（变量和无参数方法）

//定义变量
data() {
        return {
            game: null,
            datainfo:{
                name:'',
                colorNum:'',
                origin:'0',
                rewardImg1:'',
                coin:0,
                presentPrice:'100',
                musicOpen:true,
                musicEffectsOpen:true,
            },
         }
}
methods: {
        back(){
            console.log('lipstick game vue back');
            this.$router.push({path: '/home'});
        },
}

mounted() {
        let gameConfig = {
            type: Phaser.CANVAS,
            width: 780,
            height: 1350,
            backgroundColor: 0xdddddd,
            parent: this.$el,
            // 物理引擎
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: {
                        y: 300
                    },
                    debug: false
                }
            },
            scene: [PlayGame,Redirect]
        }
        this.game = new Phaser.Game(gameConfig)
        // 设置vue的对象
        this.game.vue = this
        //传递的信息
        this.game.dataInfo = this.datainfo
        //返回方法
        this.game.back = this.back
        this.resize()
        window.addEventListener('resize', this.resize, false)
}

我们在vue界面中定义好变量和方法，将这些变量和方法传递给phaser的游戏界面中。
而我们在phaser 中的调用是直接这样使用：

// 剩余金币数量
this.coinCount = this.game.dataInfo.coin
我们就能获取到vue界面传给我们的数据

this.game.back()
我们就可以调回到vue界面的的方法

上面是没有参数的时候调用。

2、phaser 和 vue 相互传递参数的调用
vue界面

//开始游戏，当游戏开始的时候我们phaser需要调用vue的方法通知服务端开始游戏，扣减金币增加记录之类的操作
// _getGameInfo是调用服务端的方法，返回值我们直接返回到phaser 的界面中，phaser的界面自己去处理
startGame(){
            console.log("vue startGame");
            return _getGameInfo(this.curRoom.id, this.userId, this.curRoom.productId);
            
        },

//将方法传递到phaser 界面中
this.game.startGame = this.startGame

phaser 界面

//在phaser 中的按钮点击调用vue中的方法，通知服务器用户开始玩
this.game.startGame().then((res)=>{
                console.log('开始游戏 1111 ', res);
                this.coinCount = this.coinCount - this.game.dataInfo.presentPrice;
                console.log('开始游戏 2222 ', this.coinCount);
                this.game.dataInfo.coin = this.coinCount;
                if(res.result === 'ok'){
                    this.gameOptions.minAngle = res.data.angle;
                    this.consumeRecordId = res.data.consumeRecordId;
                    this.level = res.data.level;
                }
            });

2、打包问题

IMG_0137.PNG

我们使用的是Cordova 打包的，在这个过程中，强调的一点是使用的phaser3打包的，而且用到了WKWebview，这个问题好像phaser2 是不存在这个样的，我搜索的好像是phaser3 加载器无法加载file://这样的资源。
我总结尝试了很久，找到了一个解决的办法。
我们需要在其中间加一个cordova插件：
cordova-plugin-wkwebview-file-xhr
我只解决了phaser3.0 使用cordova 打包过程中不能加载图片的问题，可能是一类问题，但是具体的不知道。
我找到这个问题在github issuse.
这就是我的探究出来的，感觉改这个bug找了好长时间，记录一下吧。