Inicializacion Framework7

1

Buenas a todos, soy nuevo en esto, estoy generando una app con framework7 core y compilando con cordova. Si genero en html y css por ejemplo un menu y construyo app funciona porque no uso framework7, pero cuando intento por ejemplo generar una barra de naveacion usando framework7 no visualizo nada. He seguido los pasos de todo lo que dice en las ayudas, configure el archivo.js pero no logro visualizar nada cuando compilo la aplicacion. Espero me puedan ayudar

2

Hola. Tira algún error en la consola?
Para una mejor ayuda lo ideal es poner el código. Así se puede chequear por errores.

3

Hola Fernando, este codigo es el que tengo en el index.html

<head>

   

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

    <meta name="format-detection" content="telephone=no">

    <meta name="msapplication-tap-highlight" content="no">

    <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">

    

    <link rel="stylesheet" type="text/css" href="css/index.css">

    <link rel="stylesheet" type="text/css" href="css/framework7.bundle.min.css">

    <link rel="stylesheet" type="text/css" href="css/framework7.min.css">

    <title>Navbar</title>

</head>

<body>

   

    <div id="app">

        <!-- Your main view, should have "view-main" class -->

        <div class="view view-main">

          <!-- Initial Page, "data-name" contains page name -->

          <div data-name="home" class="page">

  

            <!-- Top Navbar -->

            <div class="navbar">

              <div class="navbar-bg"></div>

              <div class="navbar-inner">

                <div class="title">Awesome App</div>

              </div>

            </div>

  

            <!-- Bottom Toolbar -->

            <div class="toolbar toolbar-bottom">

              <div class="toolbar-inner">

                <!-- Toolbar links -->

                <a href="#" class="link">Link 1</a>

                <a href="#" class="link">Link 2</a>

              </div>

            </div>

  

            <!-- Scrollable page content -->

            <div class="page-content">

              <p>Page content goes here</p>

              <!-- Link to another page -->

              <a href="/about/">About app</a>

            </div>

          </div>

        </div>

      </div>

    <script type="text/javascript" src="js/framework7.bundle.min.js"></script>

    <script type="text/javascript" src="js/framework7.min.js"></script>

    <script type="text/javascript" src="cordova.js"></script>

    <script type="text/javascript" src="js/index.js"></script>

</body>
4

Y este es el codigo del index.js

var app = new Framework7();

var mainView = app.views.create(’.view-main’);

solo quiero lograr ver la pagina, y la verdad no se como inicializar framework7

5

Continuing the discussion from Inicializacion Framework7:

Buenas a todos, tengo un problema espero me puedan ayudar.
Lo que quiero hacer es generar un apk con el ejemplo de framework para instalarlo en el celular, y no logro resolver el tema. A continuacion les coloco los pasos
1-creo el proyecto (cordova create MyApp)
2 luego voy al directorio y agrego plataforma (cordova platforms add android
3- copio todo del directorio del kitchen-sink/core/
4 pego lo copiado del punto anterior en el directorio www de mi aplicacion
5 agrego los css y js del ultimo framework bajado
6 corrijo los href para que apunten a los a los archivos css y js correspondientes
7 genero apk cordova build android
8 copio apk en mi dispositivo
9 lo instalo
una vez instalado se rompen todos los link, y no me muestra una sola animacion como si no tomara las librerias de framework7. Alguien me puede ayudar???
Probe generar un menu a mano y cuando genere el apk funciono. Pero de framework7 no funciona y quiero usarlo.

6

Yo uso phonegap build para crear el apk,. por lo que con la línea de comandos de cordova no te puedo ayudar.
Probaste usar chrome://inspect/#devices para ver que es lo que te cambia.
Conectas el celular a la pc y listo. EL APK tiene que ser DEBUG, no REALEASE.

7

Los scripts en el index.html los tengo en este orden:

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>

cordova.js en primer lugar. Proba cambiar el orden.

8

Lo hice funcionar de otra manera, logre instalar el framework7 cli y vi como hacer la compilacion desde ahi. y quedo funcionando. Muchas gracias por tus respuestas Fernando. Saludos

1 Like