stackoom
  简体   繁体   中英

Phonegap/vue js nothing appear on my android phone (withscreen) but it works on my browser

 原文  2017-10-27 14:14:05  8   1    javascript/ android/ vuejs2/ phonegap

Question

I'am doing a cross-platform application (android/ios), so I am using phonegap and vue js.

I run phonegap serv on my ubuntu with: sudo phonegap serv

If I go on the ip (that phonegap tell me) on my phone with the phonegap app I have nothing, just white screen, but on my browser everything works well.

I tried to use weinre to see my log (in the html I mask my ip that why I put a X but in my real file is just my ip), but in my console log I have nothing, but in inspector if I go on the div and I click on it my screen phone became blue (like when you inspect a web page) so I think the debugger work but not the console.

here my index.html: 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue Stack 2.0</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <script src="http:/X:8080/target/target-script-min.js#anonymous"></script>
            <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
<!-- 
  <script src="js/materialize.js"></script>
        <script src="js/validate.js"></script>
 -->    <script src="js/app.js"></script>
        <!-- <script src="https://unpkg.com/vue-validator@2.1.7/dist/vue-validator.min.js"></script> -->

    <script type="text/javascript">
    app.initialize();
    $(document).bind("mobileinit", function() {
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
    });
    </script>

</body>
</html>

my config.xml: 

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.Societhy" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>Societhy</name>
    <description>Hello World sample application that responds to the deviceready event.</description>
    <author email="support@phonegap.com" href="http://phonegap.com">PhoneGap Team</author>
    <content src="index.html" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="14" />
    <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />
    <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />
    <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />
    <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />
    <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
    <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />
    <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />
    <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />
    <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />
    <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />
    <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
    <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />
    <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />
    <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
    <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
    <icon src="icon.png" />
    <platform name="android">
        <icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57" />
        <icon height="114" platform="ios" src="www/res/icon/ios/icon@2x.png" width="114" />
        <icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" />
        <icon height="80" platform="ios" src="www/res/icon/ios/icon-40@2x.png" width="80" />
        <icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" />
        <icon height="100" platform="ios" src="www/res/icon/ios/icon-50@2x.png" width="100" />
        <icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" />
        <icon height="120" platform="ios" src="www/res/icon/ios/icon-60@2x.png" width="120" />
        <icon height="180" platform="ios" src="www/res/icon/ios/icon-60@3x.png" width="180" />
        <icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" />
        <icon height="144" platform="ios" src="www/res/icon/ios/icon-72@2x.png" width="144" />
        <icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" />
        <icon height="152" platform="ios" src="www/res/icon/ios/icon-76@2x.png" width="152" />
        <icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" />
        <icon height="58" platform="ios" src="www/res/icon/ios/icon-small@2x.png" width="58" />
        <icon height="87" platform="ios" src="www/res/icon/ios/icon-small@3x.png" width="87" />
        <splash height="1136" platform="ios" src="www/res/screen/ios/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" />
        <splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" />
        <splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" platform="ios" src="www/res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" platform="ios" src="www/res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />
        <splash height="960" platform="ios" src="www/res/screen/ios/Default@2x~iphone.png" width="640" />
        <splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />
    </platform>
    <platform name="wp8">
        <icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />
        <icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />
        <splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />
    </platform>
    <platform name="windows">
        <icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />
        <icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />
        <icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />
        <splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />
        <icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />
        <icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />
        <icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />
        <icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />
        <icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />
        <icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />
        <icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />
        <icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />
        <icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />
        <icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />
        <splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />
    </platform>
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <plugin name="cordova-plugin-statusbar" spec="~2.2.3" />
    <plugin name="cordova-plugin-crosswalk-webview" spec="https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview">
        <variable name="XWALK_VERSION" value="23+" />
        <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+" />
        <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect" />
        <variable name="XWALK_MODE" value="embedded" />
        <variable name="XWALK_MULTIPLEAPK" value="true" />
    </plugin>
</widget>

my app.js: 

import { Vue, router, store } from './boot/core'
import App from './components/app.vue'
import io from 'socket.io-client';
import VueSocketio from 'vue-socket.io';
import VueToastr from '@deveodk/vue-toastr'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
// If you would like custom styling of the toastr the css file can be replaced

var Vue = require('vue');
var VueCookie = require('vue-cookie');
//require('jquery-toast-plugin')

var socketio = io('http://localhost:4242/');


// Tell Vue to use the plugin
Vue.use(VueSocketio, socketio);
Vue.use(VueCookie);
Vue.use(VueToastr, {
    defaultPosition: 'toast-top-right',
    defaultType: 'info',
    defaultTimeout: 4000
});


var vm = new Vue({
    router : router,
    el: 'app',
    render: h => h(App),
    data: { store },
    sockets:{
    connect: function(){
      console.log('socket connected');
    },
    sessionId: function(val){
      console.log('sessionId');
      console.log(val);
      this.store.sessionId = val;
    },
    txResult: function(val){

      console.log(val)
      console.log("txResult");
      this.$toastr('success', 'Success', val.event);
      this.store.txResult = val.event;
    }
    },
    methods: {
        /**
        * The Application method
        *
        * @module App
        */

         /**
        * @method getJSONData
        * @param {Object} object - data
        * get the json of a data
        */
        getJSONData(json) {
            if (this.isPhoneGap()) {
                console.log("PJSON: " + json.data)
                console.log("PJSON: " + json.data.toString())
                return json.user;
            }
            else {
                console.log("BJSON: " + JSON.parse(json.data))
                console.log("BJSON: " + JSON.parse(json.data).toString())
                return JSON.parse(json.user);
            }
        },

        /**
        * @method ajaxRequest
        * Basic ajax request for the edition 
        */
        ajaxRequest(type, route, params, success, error) {
            var res = "";
            var url = 'http://localhost:4242/login';
            var xhr = $.ajax({
                url: route,
                async: false,
                dataType : "json",
                type: type,
                contentType: "application/json; charset=utf-8",
                xhrFields: { withCredentials: true },
                crossDomain: true,
                data: JSON.stringify(params),
                beforeSend: setAuthToken,
                success: success,
                error: error,
                cache: false,
            })
        },

        /**
        * Set the token of authentification
        * @method setAuthToken
        * @param {Object} json object who contains the token
        */
        setAuthToken(request) {
            if (this.store.auth_data != null) {
                request.setRequestHeader("Authentification", this.store.auth_data.token);
            }
        },
        /**
        * Check if the application turn on phonegap
        * @method isPhoneGap
        */
        isPhoneGap() {
            return (window.cordova || window.PhoneGap || window.phonegap) 
            && /^file:\/{3}[^\/]/i.test(window.location.href) 
            && /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
        },

        /**
        * Set the auth data
        * @param {Object} json object with all the information about the user
        * @method setAuthData
        */
        setAuthData(_auth_data) {
            this.store.auth_data = _auth_data;
        },
    }
})

window.vue = vm;

1 answers

solution1
 0  2017-11-01 02:56:50

Try to download the script to local folder and changed the link accordingly. I also recommend loading cordova.js first (before any other script). So something like this: 

<head>
    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="scripts/target-script-min.js#anonymous"></script>
</head>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Retrieving and displaying photo with phonegap works in emulator but not on my phone Why won't my JS created class appear on the browser? My Angular JS app works in desktop browser, but not in a mobile browser Phonegap on Android XmlHttpRequest Works in Emulator & browser, Not on Device Phonegap canvas not drawing on android but works fine in browser Nothing inside my $(document).ready works It appears that my ajax works but nothing is being posted Nothing works with my Behance API Key javascript works on jsfiddle but not on my browser My code works on the web, but not PhoneGap & jQuery Mobile
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM